Was macht Figma-zu-React Autonomer Workflow?

Übersicht

Diese Fähigkeit orchestriert die komplette Pipeline zur Konvertierung von Figma-Designs in produktionsreife React-Anwendungen. Sie extrahiert Design-Systeme (Farben, Typografie, Abstände, Effekte) aus Figma, transformiert sie in Tailwind-CSS-Konfiguration und CSS-Custom-Properties und generiert dann funktionale TypeScript-React-Komponenten, die das Quell-Design originalgetreu reproduzieren.

Der Workflow läuft in vier Phasen ab: interaktive Erkundung, TDD-Gerüst, autonome Ausführung und verifizierte Auslieferung. Das Ergebnis ist ein Satz von React-Komponenten, Seiten und einem Design-Token-System, das für die Integration in Next.js-, Vite- oder Remix-Projekte bereit ist – auf Pixelebene gegen die Figma-Quelle verifiziert.

Kernprinzipien:

TDD ist Pflicht – Tests werden vor den Komponenten geschrieben, niemals danach
Jede Komponente ist eine funktionale TypeScript-Komponente mit expliziten Prop-Schnittstellen
Das gesamte Styling verwendet Tailwind-Utility-Klassen, die durch Design-Tokens aus Figma untermauert sind
Keine hartcodierten Farbwerte, Schriftgrößen oder Abstände – alles referenziert das Token-System
Bilder verwenden ordnungsgemäße Importe oder Verweise auf das öffentliche Verzeichnis, niemals defekte Pfade
Die Ausgabe ist Framework-bewusst (Next.js App Router, Vite SPA, Remix-Routen)
Pixelgenaue Verifizierung – automatisierte Diff-Schleife mit pixelmatch, kein manueller Vergleich
App-Typ-bewusst – Chrome-Erweiterungen, PWAs und Web-Apps erhalten jeweils geeignete Teststrategien

Wann verwenden

Verwenden Sie diese Fähigkeit, wenn:

Sie eine Figma-Design-Datei in eine React-Anwendung konvertieren
Sie ein Design-System aus Figma in eine Tailwind-Konfiguration extrahieren
Sie eine Komponentenbibliothek aus Figma-Komponentensätzen generieren
Sie eine vorhandene Benutzeroberfläche aus einem Figma-Redesign neu aufbauen
Sie ein neues React-Projekt aus einem Figma-Prototyp starten

Auslösephrasen:

"Konvertiere dieses Figma-Design in React"
"Generiere React-Komponenten aus Figma"
"Extrahiere Design-Tokens aus Figma"
"Baue eine React-App aus dieser Figma-Datei"
"Figma zu Next.js"
"Figma zu Vite"

Phase 1: Erkundung (Interaktiv)

Diese Phase erfordert Benutzereingaben. Fahren Sie nicht autonom fort, bis der Benutzer den Plan bestätigt hat.

Pipeline-Integrationsprüfung

Bevor Sie Fragen stellen, prüfen Sie, ob vorgelagerte Artefakte existieren:

1. Prüfen: .claude/plans/build-spec.json
   → Wenn vorhanden: ALLE Erkundungsfragen ÜBERSPRINGEN. Spezifikation direkt laden.
   → Loggen: "build-spec.json von figma-intake gefunden – Erkundung übersprungen"

2. Prüfen: src/styles/design-tokens.lock.json
   → Wenn vorhanden: Token-Extraktion in Phase 2 ÜBERSPRINGEN. Lockfile-Werte verwenden.
   → Loggen: "design-tokens.lock.json gefunden – gesperrte Token-Werte verwenden"

Wenn build-spec.json existiert, springen Sie direkt zu Phase 2 mit den Framework-, Komponenten- und Optionen aus der Spezifikation.

Schritt 1.1: Figma-Kontext sammeln

Verwenden Sie das Figma MCP, um die Design-Datei zu inspizieren.

1. get_metadata        – Dateiname, Seiten, letzte Änderung, Komponentenanzahlen
2. get_variable_defs   – Design-Tokens (Farben, Typografie, Abstände, Effekte)
3. get_design_context  – Layout-Struktur, Komponentenhierarchie, Auto-Layout-Einstellungen
4. get_screenshot      – Visuelle Referenz für jede Seite/jedes Frame

Schritt 1.2: Design-Tokens extrahieren

Karte von Figma-Variablen und -Stilen zu einer Token-Struktur:

Design-Tokens
├── Farben
│   ├── Primitive (blau-500, grau-100, usw.)
│   ├── Semantisch (primär, sekundär, destruktiv, gedämpft)
│   └── Komponentenspezifisch (karte-hg, button-primär, eingabe-rand)
├── Typografie
│   ├── Schriftfamilien (mit Fallback-Stapeln)
│   ├── Schriftgrößen (Skala: xs bis 5xl)
│   ├── Schriftgewichte
│   ├── Zeilenhöhen
│   └── Buchstabenabstände
├── Abstände
│   ├── Basiseinheit
│   └── Skala (0,5 bis 96)
├── Rahmenradius
│   ├── Skala (sm, md, lg, xl, full)
│   └── Komponentenspezifische Überschreibungen
├── Schatten / Effekte
│   ├── Box-Schatten (sm, md, lg, xl)
│   └── Schlagschatten
└── Breakpoints
    └── Mobil, Tablet, Desktop, Groß

Schritt 1.3: Komponenten erfassen

Identifizieren Sie alle Figma-Komponenten und karten Sie sie auf React-Komponenten:

Figma-Komponente	React-Komponente	Kategorie
Button/Primary	`<Button variant="primary">`	Primitive
Card	`<Card>`	Container
Navigation/Header	`<Header>`	Layout
Hero-Abschnitt	`<HeroSection>`	Abschnitte
Input/Text	`<Input type="text">`	Formulare

Schritt 1.4: Ausgabeziel bestätigen

Fragen Sie den Benutzer, um Folgendes zu bestätigen:

Framework: Next.js (App Router), Next.js (Pages Router), Vite oder Remix
Styling-Ansatz: Tailwind CSS (Standard), CSS Modules oder styled-components
Komponentenbibliotheksbasis: shadcn/ui, Radix UI, Headless UI oder keine
Statusverwaltung: React-Status, Zustand, Jotai oder keine
Ausgabeverzeichnis: z. B. src/components/, app/ usw.

Präsentieren Sie das Komponenteninventar und die Token-Zusammenfassung zur Benutzerfreigabe, bevor Sie fortfahren.

Phase 2: Ausführung (Autonom)

Sobald der Benutzer den Erkundungsplan genehmigt hat, fahren Sie autonom durch alle Schritte.

Token-Lockfile-Einschränkung

Wenn src/styles/design-tokens.lock.json existiert, MUSS der gesamte generierte Code auf Lockfile-Werte verweisen:

Farben: Verwenden Sie Tailwind-Klassen, die im Lockfile zugeordnet sind, niemals ungefähre Hex-Werte
Typografie: Verwenden Sie exakte Schriftfamilien, -größen und -gewichte aus dem Lockfile
Abstände: Verwenden Sie die Lockfile-Abstandsskala-Werte
Textinhalt: Verwenden Sie exakte Zeichenfolgen aus lockfile.textContent

Nähern Sie sich niemals Werten an oder raten Sie sie, wenn ein Lockfile existiert. Wenn ein Wert nicht im Lockfile ist, fügen Sie ihn zuerst zum Lockfile hinzu und referenzieren Sie ihn dann.

Test-First-Gate (VERPFLICHTEND)

TDD wird erzwungen. Die Komponentenimplementierung darf NICHT beginnen, bis Testdateien vorhanden sind. Dies ist ein hartes Gate, kein Vorschlag.

BEVOR Sie eine Komponentenimplementierung schreiben:

  1. Führen Sie aus: ./scripts/verify-test-coverage.sh
     → Wenn Exit-Code 1: STOPPEN. Rufen Sie zuerst die Fähigkeit tdd-from-figma auf.
     → Wenn Exit-Code 0: Fahren Sie mit der Implementierung fort.

  2. Für jede zu generierende Komponente:
     a. ERFORDERLICH: src/components/**/{ComponentName}.test.tsx existiert
        → Wenn fehlt: STOPPEN. Schreiben Sie zuerst den Test (rufen Sie tdd-from-figma auf).
        → Dies ist nicht optional. Keine Komponente wird ohne vorhandene Tests ausgeliefert.
     b. Lesen Sie die Testdatei, um das erwartete Verhalten zu verstehen
     c. Die Implementierung MUSS alle Tests bestehen lassen
     d. Führen Sie aus: pnpm vitest run {test-file} nach dem Schreiben der Komponente
     e. Wenn der Test fehlschlägt: Korrigieren Sie die Komponente, NICHT den Test

  3. Nachdem alle Komponenten in einem Batch geschrieben wurden:
     → Führen Sie aus: pnpm vitest run --reporter=verbose
     → ALLE Tests müssen bestehen (Grüne Phase), bevor Sie fortfahren
     → Wenn einige fehlschlagen: Korrigieren Sie die Komponenten, bis sie grün sind. Fahren Sie nicht mit Phase 3 fort.

  4. Überprüfen Sie die Testabdeckung, ob der Schwellenwert erreicht ist:
     → Führen Sie aus: pnpm vitest run --coverage
     → Muss erreichen: pipeline.config.json → tdd.coverageThreshold (Standard: 80%)

Warum dieses Gate existiert: Tests kodieren exakte Werte aus dem Lockfile (Textinhalt, ARIA-Rollen, Komponentenstruktur). Ohne vorgefertigte Tests gibt es keinen Mechanismus, um zu überprüfen, ob die Implementierung mit dem Design übereinstimmt. Tests sind der Vertrag zwischen dem Figma-Design und dem React-Code.

Schritt 2.1: Tailwind-Konfiguration generieren

Erstellen oder erweitern Sie tailwind.config.ts mit extrahierten Tokens:

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // Semantische Tokens, karteniert von Figma-Variablen
        primary: {
          DEFAULT: "var(--color-primary)",
          foreground: "var(--color-primary-foreground)",
          // ... vollständige Skala
        },
        // ... alle Farb-Tokens
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        heading: ["var(--font-heading)", "system-ui", "sans-serif"],
      },
      fontSize: {
        // Karteniert von Figma-Typografie-Stilen
      },
      spacing: {
        // Karteniert von Figma-Abstandsvariablen
      },
      borderRadius: {
        // Karteniert von Figma-Eckenradius-Tokens
      },
      boxShadow: {
        // Karteniert von Figma-Effekt-Stilen
      },
    },
  },
  plugins: [],
};

export default config;

Generieren Sie eine begleitende CSS-Datei mit benutzerdefinierten Eigenschaften:

/* src/styles/tokens.css */
:root {
  /* Farben - Primitive */
  --color-blue-500: #3b82f6;
  /* ... */

  /* Farben - Semantisch */
  --color-primary: var(--color-blue-500);
  --color-primary-foreground: #ffffff;
  /* ... */

  /* Typografie */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  /* ... */
}

Schritt 2.2: React-Komponenten generieren

Generieren Sie für jede in Phase 1 identifizierte Komponente:

Dateistruktur pro Komponente:

src/components/
├── ui/
│   ├── button.tsx          # Primitive Komponenten
│   ├── input.tsx
│   ├── card.tsx
│   └── ...
├── layout/
│   ├── header.tsx          # Layout-Komponenten
│   ├── footer.tsx
│   └── ...
├── sections/
│   ├── hero-section.tsx    # Seitenabschnitte
│   ├── features-grid.tsx
│   └── ...
└── pages/                  # Vollständige Seitenkompositionen (oder app/ für Next.js)
    ├── home-page.tsx
    └── ...

Komponenten-Vorlage:

// src/components/ui/button.tsx
import { type ButtonHTMLAttributes, forwardRef } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "primary", size = "md", ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(
          "inline-flex items-center justify-center rounded-md font-medium transition-colors",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
          "disabled:pointer-events-none disabled:opacity-50",
          {
            "bg-primary text-primary-foreground hover:bg-primary/90": variant === "primary",
            "bg-secondary text-secondary-foreground hover:bg-secondary/90": variant === "secondary",
            "border border-input bg-transparent hover:bg-accent": variant === "outline",
            "hover:bg-accent hover:text-accent-foreground": variant === "ghost",
          },
          {
            "h-8 px-3 text-sm": size === "sm",
            "h-10 px-4 text-sm": size === "md",
            "h-12 px-6 text-base": size === "lg",
          },
          className
        )}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, type ButtonProps };

Regeln für die Komponentengenerierung:

Alle Komponenten sind funktional mit forwardRef, wo angemessen
Jede Komponente hat eine explizite TypeScript-interface für Props
Das gesamte Styling verwendet Tailwind-Klassen, die auf Token-Werte verweisen
Komponenten akzeptieren eine className-Prop für die Komposition
Verwenden Sie die cn()-Utility (clsx + tailwind-merge) für das Zusammenführen von Klassen
Fügen Sie ordnungsgemäße ARIA-Attribute für interaktive Elemente hinzu
Exportieren Sie sowohl die Komponente als auch ihren Props-Typ

Schritt 2.3: Seitenkompositionen generieren

Setzen Sie Abschnittskomponenten zu vollständigen Seiten zusammen, die Figma-Frames entsprechen:

// app/page.tsx (Next.js App Router)
import { Header } from "@/components/layout/header";
import { HeroSection } from "@/components/sections/hero-section";
import { FeaturesGrid } from "@/components/sections/features-grid";
import { Footer } from "@/components/layout/footer";

export default function HomePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        <HeroSection />
        <FeaturesGrid />
      </main>
      <Footer />
    </div>
  );
}

Schritt 2.4: Bilder und Assets behandeln

Für statische Bilder aus Figma:

// Next.js – next/image verwenden
import Image from "next/image";
import heroImage from "@/assets/images/hero.webp";

<Image src={heroImage} alt="Helden-Illustration" width={1200} height={600} priority />

// Vite – Standardimporte verwenden
import heroImage from "@/assets/images/hero.webp";

<img src={heroImage} alt="Helden-Illustration" width={1200} height={600} loading="eager" />

Regeln:

Exportieren Sie Bilder aus Figma in 1x und 2x für Retina
Verwenden Sie das WebP-Format mit JPEG/PNG-Fallback
Platzieren Sie in public/images/ oder src/assets/images/
Jedes <img> muss ein sinnvolles alt-Attribut haben
Helden-/Above-Fold-Bilder verwenden priority (Next.js) oder loading="eager"
Below-Fold-Bilder verwenden loading="lazy"

Schritt 2.5: Utility-Dateien generieren

src/lib/
├── utils.ts          # cn()-Hilfsfunktion, Formatierer
└── fonts.ts          # Schriftarten laden (Next.js: next/font, Vite: @fontsource)

Schritt 2.6: Tests ausführen (wenn Testdateien vorhanden sind)

Nachdem Sie alle Komponenten generiert haben, falls Testdateien von tdd-from-figma geschrieben wurden:

pnpm vitest run --reporter=verbose

Wenn Tests fehlschlagen: Korrigieren Sie die Komponentenimplementierung, um den Testerwartungen zu entsprechen. Die Tests sind maßgeblich – sie kodieren exakte Werte aus dem Lockfile. Ändern Sie keine Tests, um sie an die Implementierung anzupassen.

Wiederholen Sie, bis alle Tests bestehen (Grüne Phase von TDD).

Schritt 2.7: Storybook-Geschichten generieren (Nicht blockierend)

Sobald Komponenten erstellt und ihre Unit-Tests bestanden haben, generieren Sie automatisch Storybook-Geschichten und MDX-Dokumentation. Rufen Sie die Fähigkeit storybook-story-generation auf (oder führen Sie das Skript direkt aus). Dies ist Phase 4.5 der Pipeline und ist nicht blockierend – ein Fehler hier protokolliert eine Warnung und die Pipeline wird fortgesetzt.

# Generieren Sie .stories.tsx + .mdx für jede Komponente (überspringt diejenigen, die bereits Geschichten haben)
./scripts/generate-stories.sh

# Vorschau ohne zu schreiben, oder Neugenerierung erzwingen

Figma-zu-React Autonomer Workflow

Was ist Figma-zu-React Autonomer Workflow?

In Ihrer bevorzugten KI fragen

Dokumentation