Von Figma zu Claude Code: Das Handbuch für Designer

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   VORHER (Übergabe-Hölle)                NACHHER (Vibe Coding)          │
4│   ────────────────────                   ───────────────────              │
5│                                                                         │
6│   Design                               Design                           │
7│      ↓                                    ↓                             │
8│   Spezifikation                       Claude liest Figma direkt         │
9│      ↓                                    ↓                             │
10│   Entwickler interpretiert             Du promptest: "Baue das"         │
11│      ↓                                    ↓                             │
12│   Review                               Produktionscode                  │
13│      ↓                                    ↓                             │
14│   Feedback-Schleife ×10                Ausliefern 🚀                    │
15│      ↓                                                                  │
16│   "Passt schon"                        Zeitrahmen: Minuten              │
17│                                                                         │
18│   Zeitrahmen: Wochen                                                    │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Klicke auf Profil (oben links) → Einstellungen → Sicherheit
2→ Persönliche Zugriffstokens → Neues Token generieren → Sofort kopieren

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Gib in Claude Code ein: /mcp
2Du solltest sehen: figma ✓ verbunden

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         DEINE FIGMA-DATEI                               │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  WAS CLAUDE LESEN KANN                                          │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Ebenennamen & Hierarchie    ✓ Auto-Layout-Einstellungen     │   │
9│   │  ✓ Farben (Füllungen, Konturen) ✓ Komponentenvarianten          │   │
10│   │  ✓ Typografiestile            ✓ Abstände & Padding             │   │
11│   │  ✓ Effekte (Schatten, Weichzeichner) ✓ Einschränkungen        │   │
12│   │  ✓ Design-Tokens/Variablen     ✓ Textinhalt                    │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  WAS CLAUDE NICHT LESEN KANN                                    │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Tatsächliche Bildpixel      ✗ Prototyp-Interaktionen        │   │
19│   │  ✗ Kommentare & Feedback       ✗ Versionsverlauf               │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Lies mein Figma-Design unter:
2https://www.figma.com/design/[DEINE-DATEI-ID]/[DATEINAME]
3
4Gib mir:
51. Eine Übersicht über die Seitenstruktur
62. Eine Liste der Hauptabschnitte
73. Die verwendete Farbpalette
84. Die Typografiestile
95. Alle Komponenten, die du identifizieren kannst

1Extrahiere und erstelle aus der Figma-Datei:
2
31. Eine Tailwind-Konfiguration mit:
4   - Benutzerdefinierten Farben, die dem Design entsprechen
5   - Schriftfamilien und -größen
6   - Abstandsskala basierend auf dem, was du siehst
7
82. CSS-Variablendatei als Backup
9
10Formatiere die Farben als semantische Namen (primary, secondary, accent, neutral).

1Schau dir den [KOMPONENTENNAME] in meiner Figma-Datei an.
2
3Generiere eine React-Komponente, die:
4- Dem exakten Styling entspricht (Farben, Abstände, Typografie)
5- Tailwind CSS verwendet
6- Alle von mir definierten Varianten unterstützt (falls vorhanden)
7- Vollständig mit TypeScript typisiert ist
8- Hover-/Fokus-Zustände basierend auf dem Design enthält

1Generiere den Abschnitt [ABSCHNITTSNAME] aus meinem Figma-Design.
2
3Anforderungen:
4- Stimme exakt mit dem Design überein
5- Mache es responsiv:
6  - Mobil (<768px): [beschreibe das Layout]
7  - Desktop (≥768px): [beschreibe das Layout]
8- Verwende semantisches HTML (section, nav, main, article)
9- Füge den gesamten Textinhalt aus dem Design ein

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP IN AKTION                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Design-Dateien   │  │  Wireframes &     │  │  KI-generierte    │
12│  → Produktions-   │  │  User Flows →     │  │  UI → In Code-   │
13│  code             │  │  Funktionierende  │  │  basis einfügen  │
14│                   │  │  App              │  │                   │
15│                   │  │                   │  │                   │
16│  ⭐ AM HÄUFIGSTEN │  │  🎯 LEISTUNGS-    │  │  ⚡ AM SCHNELL-  │
17│                   │  │  STARK            │  │  STEN             │
18└───────────────────┘  └───────────────────┘  └───────────────────┘
19        │                       │                       │
20        ▼                       ▼                       ▼
21┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
22│ "Baue meine       │  │ "Lies meinen User │  │ "Nimm dieses Make-│
23│ Landingpage aus   │  │ Flow und erstelle │  │ Design und füge es│
24│ diesem Figma-     │  │ die Next.js-      │  │ zu meiner         │
25│ Design"           │  │ Routenstruktur"   │  │ bestehenden       │
26│                   │  │                   │  │ Portfolio-App"    │
27└───────────────────┘  └───────────────────┘  └───────────────────┘

1SCHRITT 1                  SCHRITT 2                  SCHRITT 3
2───────────────────────────────────────────────────────────────────
3"Lies meine Design-       "Generiere Basis-          "Baue die
4System-Datei und          Komponenten: Button,       Homepage mit
5extrahiere alle Tokens"   Card, Input, Badge"       diesen Komponenten"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    SCHRITT 4: Füge Seiten nacheinander hinzu
11                    "Baue jetzt die Preisseite"
12                    "Baue jetzt die Über-uns-Seite"

1"Lies [URL], extrahiere Tokens, generiere vollständige Seite mit allen Abschnitten,
2mache sie responsiv, verwende Next.js + Tailwind. Los."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Funktioniert am besten, wenn deine Figma-Datei gut │
6     │     organisiert ist, mit aussagekräftigen Namen und      │
7     │     Auto-Layout durchgängig                              │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Atome   │ → │ Moleküle │ → │ Sektionen│ → │  Seite  │
3│ (Farben, │    │ (Button,│    │ (Card,  │    │ (Hero,  │    │ (voll-  │
4│ Schriften)│   │ Input)  │    │ Nav)    │    │ Footer) │    │ ständig)│
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  BENENNUNG                                                              │
3│  [ ] Ebenen verwenden semantische Namen  hero-section ✓   Frame 427 ✗  │
4│  [ ] Komponenten sind klar benannt      Button/Primary ✓  Komponente 1 ✗│
5│  [ ] Varianten haben beschreibende Props size=lg ✓        variant=2 ✗    │
6├─────────────────────────────────────────────────────────────────────────┤
7│  STRUKTUR                                                               │
8│  [ ] Auto-Layout auf ALLEN Containern   Flexbox bereit ✓  Absolutes Chaos ✗│
9│  [ ] Flache Hierarchie (minimale        Sauberes DOM ✓    Div-Suppe ✗    │
10│      Verschachtelung)                                                   │
11│  [ ] Abschnitte klar getrennt           Einfaches Parsen ✓   Chaos ✗   │
12├─────────────────────────────────────────────────────────────────────────┤
13│  TOKENS                                                                 │
14│  [ ] Farben als Styles definiert        Extrahierbar ✓    Hartcodiert ✗│
15│  [ ] Typografie als Textstile          Konsistent ✓      Zufällig ✗    │
16│  [ ] Abstände sind konsistent          Systematisch ✓    Willkürlich ✗│
17└─────────────────────────────────────────────────────────────────────────┘

11. BENENNE EBENEN WIE CSS-KLASSEN
2   nav-links ✓    Gruppe 5 ✗
3
42. ARBEITE ABSCHNITT FÜR ABSCHNITT
5   Hero → Funktionen → Testimonials → Footer
6   (Fordere nicht die gesamte Seite auf einmal an)
7
83. VERWEISE DIREKT AUF FIGMA
9   "Schau dir die Karte im Abschnitt 'Funktionen' an"
10   (Nicht: "Erstelle eine Karte mit abgerundeten Ecken")
11
124. EXPORTIERE ASSETS ZUERST
13   Bilder müssen manuell exportiert werden → /public-Ordner
14   Sage dann Claude: "Das Hero-Bild ist unter /public/hero.png"
15
165. TEILE DEINEN STACK VORAB MIT
17   "Ich verwende Next.js 14 + Tailwind + TypeScript"
18   (Claude wird deine Konventionen übernehmen)

1Ich möchte mein Figma-Design in Code umwandeln.
2
3Figma-URL: [FÜGE DEINE URL EIN]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Bitte:
81. Analysiere zuerst das Design und sag mir, was du siehst
92. Extrahiere die Farbpalette und erstelle eine Tailwind-Konfiguration
103. Dann sage ich dir, welchen Abschnitt du zuerst bauen sollst
11
12Lass uns Schritt für Schritt vorgehen.