Claude · Foto: Lachlan Hardy, CC BY 2.0

SubagentClaude SubagentenLizenz: MITfrei kopierbar

frontend-designer

Zuletzt aktualisiert: 13. September 2026

⬇ Als Datei laden

⧉ –× kopiert⬇ –× heruntergeladenBewertung:

Typ

Subagent

Lizenz

MIT

Quelle

iannuttall/claude-agents ↗

Anwendungsfeld

Claude Subagenten

Designer-Entwickler-Schnittstelle.

Voraussetzungen

Ein vorhandenes Mockup, Wireframe oder Screenshot als Ausgangsmaterial

Einordnung

Es braucht nur ein vorhandenes visuelles Konzept, keine zusätzlichen Accounts oder Dienste.

Übersetzt Mockups/Wireframes in technische Spezifikationen und Design-Systeme für die Frontend-Umsetzung.

Für wen: Designer-Entwickler-Schnittstelle.

Im Detail

Dieser Subagent übersetzt visuelle Vorgaben wie Figma-Mockups oder Wireframes in technische Spezifikationen, Design-Systeme und Komponenten-Architekturen, die Entwickler direkt zur Umsetzung nutzen können. Er ist damit die Brücke zwischen Design und Code: Statt selbst Komponenten zu programmieren, liefert er die detaillierte Blaupause dafür, etwa Abstände, Zustände, Varianten und Zusammenhänge zwischen Komponenten. Sinnvoll ist er, wenn ein Design vorliegt, aber die Umsetzung noch strukturiert werden muss, etwa bei einem neuen Dashboard-Layout ohne fertige Komponentenliste. Für die eigentliche Implementierung der Komponenten in React oder einem anderen Framework braucht es danach zusätzlich einen Entwickler-Agenten wie frontend-developer.

Schritt für Schritt

Erzeugte Spezifikation zu Farben, Abständen, Breakpoints und Zuständen mit dem tatsächlichen Design abgleichen
Komponentenstruktur als Bauanleitung für die eigentliche Umsetzung nutzen
Bei fehlenden Zuständen wie hover, disabled oder error gezielt nachfragen lassen
Spezifikation an Entwickler übergeben, die nicht am ursprünglichen Design beteiligt waren
Ergebnis als Grundlage für ein wachsendes Design-System nutzen, nicht als Ersatz dafür

Beispiel aus der Praxis

Ein Solo-Entwickler hat einen Figma-Screenshot eines Dashboards und lässt daraus eine Spezifikation mit Farbwerten, Abstandsraster und Button-Zuständen erzeugen, die direkt in die Komponentenentwicklung einfließt.

Praxis-Tipp

Übergeben Sie ihm eine Beschreibung oder ein Bild des Mockups zusammen mit der Zielsetzung, etwa ‘Leite aus diesem Dashboard-Screenshot ein Komponenten-Architektur-Dokument für die React-Umsetzung ab’.

Stolperfallen

Die Spezifikation ist nur so präzise wie das eingereichte Mockup. Bei unklaren oder unvollständigen Vorlagen fehlen Zustände wie error oder disabled, die dann händisch ergänzt werden müssen.

Siehe auch

frontend-developer

Lizenz & Quelle

Lizenz: MIT
Quelle: iannuttall/claude-agents

Häufige Fragen.

Erstellt der Agent ein komplettes Design-System?

Nein, laut Beschreibung macht er ein vorhandenes visuelles Konzept entwicklerfreundlich, ersetzt aber kein echtes Design-System.

Reicht ein einfacher Screenshot statt eines Figma-Mockups?

Ja, laut Beschreibung funktioniert er sowohl mit Mockups und Wireframes als auch mit Screenshots.

Für wen lohnt sich der Einsatz besonders?

Für Solo-Entwickler ohne eigenes Design-Team, die eine präzise Bauanleitung vor dem Coden brauchen.

Inhalt ansehen (frontend-designer.md)

Lade …

Erfahrungen & Kommentare.

Funktioniert der Subagent bei Ihnen? Tipps, Stolperfallen, Varianten — teilen Sie es mit der Community.

Lade Kommentare …