Figma Implement — Design to Code

Was macht Figma Implement — Design to Code?

Wandle jedes Figma-Design in produktionsreifen Code um. Der geführte Workflow erkennt Ihr Projekt, ordnet Designsystem-Komponenten Code-Komponenten zu und generiert Code, der Ihren Konventionen entspricht.

Bei Aktivierung

Prüfe das aktuelle Modell. Falls NICHT opus, warne den Benutzer:

„Achtung – Sie verwenden aktuell [Modellname]. Dieses Plugin funktioniert am besten mit Claude Opus für präzise Design-to-Code-Übersetzung. Wechseln Sie mit:

/model opus

Oder arbeiten Sie mit dem aktuellen Modell weiter, wenn Sie das bevorzugen."

Wenn bereits Opus, diese Nachricht still überspringen.

Dann starte den geführten Workflow. Frage immer nur eine Sache auf einmal. Warte auf jede Antwort.

---

Phase 0: Mit Figma verbinden

Prüfe, ob Figma MCP verbunden ist.

Rufe still mcp__figma__whoami oder mcp__plugin_figma_figma__whoami auf. Falls erfolgreich, springe zu Phase 1.

Falls fehlgeschlagen:

„Figma MCP ist nicht verbunden. Folge der Einrichtungsanleitung in der Plugin-README (Abschnitt Figma MCP Setup) – du benötigst einen Figma-Zugriffstoken und einen CLI-Befehl. Sag mir Bescheid, wenn du bereit bist, dann überprüfe ich es."

Warte auf Antwort. Versuche whoami erneut. Wenn es funktioniert, fahre fort. Wenn es immer noch fehlschlägt, empfehle die Überprüfung des Tokens und einen Neustart von Claude Code.

---

Phase 1: Dein Projekt erkunden

Durchsuche das Projekt, um Stack, Konventionen und bestehende Komponenten zu verstehen.

„Lass mich dein Projekt scannen, um zu verstehen, wie du Code schreibst..."

Führe diese Prüfungen still durch:

1a. Framework-Erkennung

package.json lesen → identifiziere: React? Vue? Svelte? Next.js? Remix? Astro?
tsconfig.json lesen → TypeScript oder JavaScript?

1b. CSS-Framework-Erkennung

Prüfe auf: tailwind.config.* → Tailwind CSS
Prüfe auf: *.module.css → CSS Modules
Prüfe auf: styled-components oder @emotion → CSS-in-JS
Prüfe auf: .scss-Dateien → Sass
Prüfe auf: einfaches .css → Vanilla CSS

1c. Komponentenbibliothek-Erkennung

Lese package.json-Abhängigkeiten für:
  @mui/* → Material UI
  @chakra-ui/* → Chakra UI
  antd → Ant Design
  @eds/* → Epic Design System
  @radix-ui/* → Radix
  Benutzerdefiniert → durchsuche src/components/ nach hauseigener Bibliothek

1d. Bestandsaufnahme vorhandener Komponenten

Glob: src/components/**/*.{tsx,jsx,vue,svelte}
Für jede: extrahiere Komponentennamen, Props-Interface, Nutzungsmuster

1e. Codierungskonventionen

Prüfe Dateinamen: PascalCase.tsx? kebab-case.tsx? index.tsx in Ordnern?
Prüfe Import-Stil: absolut (@/components) oder relativ (../components)?
Prüfe Export-Stil: default export oder named export?

Präsentiere die Erkundung:

„Hier ist, was ich in deinem Projekt gefunden habe:

Framework: [React/Vue/etc.] mit [TypeScript/JavaScript] CSS: [Tailwind/CSS Modules/etc.] Komponentenbibliothek: [MUI/Chakra/Benutzerdefiniert/Keine] Vorhandene Komponenten: [N] gefunden in src/components/ [Liste der Top 10 bis 15 Komponentennamen] Konventionen: [PascalCase-Dateien, absolute Imports, default Exports, etc.]

Stimmt das so? Gibt es etwas, das ich über deine Projekt-Einrichtung wissen sollte?"

Warte auf Antwort. Passe das Verständnis an, falls sie etwas korrigieren.

---

Phase 2: Das Figma-Design abrufen

„Teile mir die Figma-Design-URL mit (mit einem bestimmten Frame/Knoten)."

Warte auf Antwort. Extrahiere fileKey und nodeId aus der URL.

Rufe dann das Design ab:

get_design_context({ nodeId, fileKey })
get_screenshot({ nodeId, fileKey })

Zeige den Screenshot:

„Hier ist das Design, das ich umsetzen werde: [Screenshot]

Ich kann erkennen: [kurze Beschreibung der Abschnitte und Elemente]

Ist das der richtige Frame?"

Warte auf Bestätigung.

---

Phase 3: Komponenten-Mapping

Ordne jedes Figma-Element einer Code-Komponente zu. Dies ist der kritische Schritt.

„Lass mich das Design deinen Code-Komponenten zuordnen..."

Für jedes Element im Figma-Design:

1. Prüfe, ob eine passende Komponente im Projekt existiert (aus Phase 1d)
2. Wenn ja → verwende sie mit korrekten Props wieder
3. Wenn nein → erstelle eine neue Komponente gemäß den Projektkonventionen

Präsentiere das Mapping:

„Hier ist mein Umsetzungsplan:

Wiederverwendung bestehender Komponenten:

Figma-Element	Ihre Komponente	Props, die ich setze
Primärer Button	<Button variant="primary">	label, onClick
Texteingabe	<TextField>	label, placeholder
Avatar	<Avatar>	src, name, size
...	...	...

Neue Komponenten, die erstellt werden:

Figma-Element	Neue Komponente	Speicherort
Statistik-Karte	<StatsCard>	src/components/StatsCard.tsx
...	...	...

[N] Elemente verwenden bestehende Komponenten wieder. [M] neue Komponenten erforderlich.

Soll ich fortfahren?"

Warte auf Bestätigung.

---

Phase 4: Abschnitt für Abschnitt umsetzen

Baue inkrementell – nicht alles auf einmal:

1. Layout-Struktur – äußerer Container, Grid, responsive Breakpoints
2. Navigation – Header, Sidebar, Breadcrumbs (vorhandene wiederverwenden, falls verfügbar)
3. Primärer Inhalt – Hauptfunktionsbereich
4. Sekundärer Inhalt – Sidebars, Footer
5. Dateninhalte – Tabellen, Karten, Formulare mit realistischen Daten

Nach jedem Abschnitt:

• Speichere die Datei
• Prüfe im Browser, falls der Dev-Server läuft
• Vergleiche mit dem Figma-Screenshot

Umsetzungsregeln

1. Vorhandene Komponenten wiederverwenden. Erstelle niemals einen neuen Button, wenn bereits einer existiert.
2. Konventionen einhalten. Dateibenennung, Imports, Exports – folge dem, was das Projekt bereits macht.
3. CSS-Ansatz einhalten. Wenn Tailwind → Tailwind. Wenn CSS Modules → CSS Modules. Nicht mischen.
4. Figma-Angaben sind die Quelle der Wahrheit. Stimme Abstände, Farben und Typografie genau ab.
5. Positionsberechnung: CSS-Position = Figma-Kind − Figma-Eltern für absolute Elemente. Verwende Flexbox/Grid für Auto-Layout.
6. SVG-Bereinigung. Entferne preserveAspectRatio="none" aus SVGs.

---

Phase 5: Mit Playwright überprüfen

„Umsetzung abgeschlossen. Lass mich prüfen, ob es dem Design entspricht..."

Verwende Playwright MCP, um die Umsetzung mit Figma zu vergleichen:

1. Frage nach der Dev-Server-URL, falls unbekannt (z. B. http://localhost:5173)
2. Navigiere: browser_navigate({ url })
3. Passe den Viewport an die Figma-Frame-Größe an: browser_resize({ width: [Figma-Breite], height: [Figma-Höhe] })
4. Mache einen Browser-Screenshot: browser_take_screenshot({ type: "png" })
5. Vergleiche mit dem Figma-Screenshot aus Phase 2
6. Prüfe auf Konsolenfehler: browser_console_messages({ level: "error" })
7. Hole den Accessibility-Snapshot: browser_snapshot() — überprüfe die strukturelle Übereinstimmung

„Hier ist der Vergleich:

• Figma: [Screenshot]
• Browser: [Screenshot]
• Konsolenfehler: [alle Fehler, oder 'Keine']
• Abweichungen: [list differences, or 'Sieht gut aus!']

Möchtest du etwas anpassen, oder soll ich eine vollständige Validierung mit /figma-validate durchführen?"

---

Wichtige Regeln

• Phase 0 ist obligatorisch. Überspringe niemals die Figma-Verbindungsprüfung.
• Phase 1 wird einmal pro Sitzung ausgeführt. Zwischenspeichere die Erkundung für die Sitzung.
• Phase 3 Mapping erfordert Bestätigung. Generiere keinen Code, bevor der Benutzer den Plan genehmigt hat.
• Wiederverwendung vor Neuerstellung. Prüfe immer zuerst vorhandene Komponenten.
• Passe dich dem Projekt an. Erzwinge keine neuen Muster, Frameworks oder Konventionen.
• Abschnitt für Abschnitt. Generiere niemals die gesamte Seite auf einmal.