frontend-designer

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

Für wen: Designer-Entwickler-Schnittstelle.

So nutzt du es

Kopiere den Inhalt (Button oben) in eine Datei unter ~/.claude/agents/ (global für alle Projekte) oder .claude/agents/ im Projektordner. Beim nächsten Start steht der Subagent in Claude Code bereit — er wird automatisch eingesetzt, wenn seine Beschreibung zur Aufgabe passt, oder gezielt: einfach Claude bitten, den Agenten zu verwenden.

Im Detail

Übersetzt Mockups, Wireframes oder Screenshots in eine technische Spezifikation: Farben, Abstände, Breakpoints, Zustände (hover, disabled, error) und Komponentenstruktur werden explizit ausformuliert, statt dem Entwickler das Ableiten aus einem Bild zu überlassen. Der Mehrwert gegenüber direktem Coden liegt in der sauberen Übergabe – gerade wenn Design und Umsetzung von unterschiedlichen Personen oder Sessions gemacht werden. Lohnt sich für Solo-Entwickler ohne Design-Team, die ein Figma-Mockup oder Screenshot haben und eine präzise Bauanleitung brauchen, bevor der eigentliche Code entsteht. Ersetzt kein echtes Design-System, sondern macht ein vorhandenes visuelles Konzept entwicklerfreundlich.

Praxis-Tipp

Screenshot oder Figma-Link mitgeben und explizit nach einer Spec für Farben, Spacing, Breakpoints und Zuständen fragen, bevor frontend-developer den Code schreibt.

Siehe auch

• frontend-developer

Lizenz & Quelle

• Lizenz: MIT
• Quelle: iannuttall/claude-agents

Lade …