Figma zu Claude Code — Strukturierter Design-Kontext für Anthropics CLI

Die Anweisung „do not re-implement components that already exist" ist wichtig, wenn das Komponenteninventar geteilt wird. Claude Code kann design/components/inventory.json lesen, um festzustellen, welche Komponenten bereits implementiert sind, und diese importieren statt sie neu zu generieren.

Design Tokens verdrahten

Das von figmascope exportierte tokens.json verwendet eine W3C-ähnliche verschachtelte Struktur mit $value- und $type-Feldern:

{
  "color": {
    "surface":    { "$value": "#f6f2ea", "$type": "color" },
    "ink":        { "$value": "#1f1d1a", "$type": "color" },
    "accent":     { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "1": { "$value": "4px",  "$type": "dimension" },
    "2": { "$value": "8px",  "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "lineHeight": { "$value": 1.45,     "$type": "number" }
    }
  }
}

Bitten Sie Claude Code als ersten Schritt, noch bevor Sie einzelne Screens implementieren, einen tailwind.config.ts-Theme-Extension-Block aus dieser Datei zu generieren. So können alle nachfolgenden Screen-Implementierungen die Tailwind-Token-Aliase konsistent nutzen:

claude --print "Read design/tokens.json and generate a tailwind.config.ts
theme.extend block. Map color tokens to theme.extend.colors,
spacing tokens to theme.extend.spacing, and typography to
theme.extend.fontFamily / fontSize. Output only the config object."

Einen tiefen Einblick in das Token-Format und den Häufigkeitsinferenz-Fallback finden Sie unter Design Token Export für KI-Agenten.

Die Strings-Schicht verwalten

Jeder Textknoten in der Figma-Datei erhält einen Eintrag in strings.json. Die Schlüssel verwenden Punkt-Notation, die aus der Frame-Hierarchie abgeleitet wird:

{
  "home.hero.title":        "Everything you need",
  "home.hero.subtitle":    "Ship faster with structured context",
  "home.cta.primary":      "Get started",
  "settings.account.heading": "Account settings"
}

Weisen Sie Claude Code an, diese Schlüssel als i18n-Identifier zu verwenden. Statt den String "Everything you need" direkt in JSX einzubetten, ruft die generierte Komponente t('home.hero.title') (oder das Äquivalent Ihrer i18n-Bibliothek) auf. Die Ressourcendatei liegt bereits in strings.json vor — Sie müssen sie nur importieren oder mit Ihrem i18n-Setup verdrahten.

Erkennt figmascope eine Kollision — zwei Knoten, die zum selben Schlüssel gehasht werden —, gibt es eine strings-collision-Warnung in _meta.json aus und hängt ein numerisches Suffix zur Unterscheidung an. Prüfen Sie _meta.json, bevor Sie eine Sitzung starten, damit Sie wissen, was Sie erwartet.

CLAUDE.md-Integration

Wenn Sie eine CLAUDE.md-Projektkontextdatei verwenden, fügen Sie einen kurzen Abschnitt hinzu, der den Agenten auf das Design-Verzeichnis hinweist. Das ergänzt den Ansatz aus AI Design Handoff und passt gut zu dem, was figmascope von Figma-Inspector-Plugins unterscheidet.

Fügen Sie folgenden Design-Abschnitt hinzu:

## Design context

Design tokens, layout IR, reference renders, and strings live in `design/`.
Always read `design/CONTEXT.md` before implementing any screen.
Token values are in `design/tokens.json` — never hardcode color or spacing.
Component canonical names are in `design/components/inventory.json`.

Damit verfügt jede Claude Code-Sitzung im Projekt automatisch über den Design-Kontext als Teil ihres Arbeitswissens, ohne dass Sie ihn in jedem Prompt wiederholen müssen.

Was der Agent zuverlässig richtig macht

Mit strukturiertem Kontext liefert Claude Code verlässlich:

• Abstandswerte — weil sie in tokens.json als spacing.4 → 16px stehen, nicht aus einem Screenshot geschätzt werden
• Farben — exakte Hex-Werte, nicht „sieht aus wie ein warmes Orange"
• Typografie — Schriftfamilie, Größe, Gewicht, Zeilenhöhe, alles typisiert
• Layout-Richtung — Stack-Knoten haben ein explizites direction- und gap-Feld
• Komponentenbenennung — inventory.json ist die kanonische Quelle, keine erfundenen Namen
• Texte — strings.json verhindert, dass der Agent Texte umformuliert oder Platzhalter erfindet

Was weiterhin menschliche Überprüfung erfordert: Interaktionszustände (Hover, Fokus, Aktiv), die in statischen Figma-Frames nicht sichtbar sind, Animations-Timing sowie responsive Breakpoints, die nicht explizit in der Datei gestaltet wurden. Die IR erfasst statisches Layout; dynamisches Verhalten liegt außerhalb des Umfangs.

--dangerously-skip-permissions in kontrollierten Umgebungen

Für automatisierte Pipelines, in denen Claude Code ohne interaktive Genehmigungsabfragen arbeiten soll — beispielsweise in einem CI-Schritt, der nach einem Design-Update Komponenten-Stubs generiert —, können Sie --dangerously-skip-permissions verwenden. Dies ist nur in Sandbox-Umgebungen ohne Produktionszugang angemessen.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Read design/CONTEXT.md. Generate component stub files for any components
in design/components/inventory.json that don't already exist in src/components/.
Use TypeScript + React functional component format. Include a TODO comment
for each component referencing the relevant screen JSON.
EOF
)"

In produktiven Entwickler-Workflows lassen Sie die Berechtigungen interaktiv. Die Abfragen haben ihren Grund — Claude Code schreibt Dateien, und Sie möchten wissen, welche, bevor es das tut.

Export-Warnungen vor dem Prompten prüfen

figmascope schreibt Warnungen in _meta.json für Bedingungen, die die Ausgabequalität beeinflussen könnten. Prüfen Sie sie, bevor Sie eine Claude Code-Sitzung starten:

python3 -c "
import json
meta = json.load(open('design/_meta.json'))
for w in meta.get('warnings', []):
    print(f\"{w['code']}: {w['message']}\")
print(f\"Frames exported: {meta['frameCount']}\")
print(f\"Tokens source: {meta.get('tokensSource', 'variables')}\")
"

Zwei Warnungen verdienen besondere Aufmerksamkeit:

• layout-mode-none-inferred — ein Frame hatte kein Auto-Layout. figmascope hat das Layout aus den absoluten Kindpositionen inferiert, was weniger zuverlässig ist. Weisen Sie in Ihrem Prompt auf den betreffenden Screen hin: „Dieser Screen verwendet absolute Positionierung; generieren Sie entsprechend."
• strings-collision — zwei Textknoten haben denselben Ressourcenschlüssel ergeben. figmascope disambiguiert mit einem numerischen Suffix, aber Sie sollten die Strings in strings.json überprüfen, bevor der Agent i18n-Aufrufe generiert.

Android- und iOS-Workflows

Claude Code ist nicht auf Web-Frameworks beschränkt. Das Context-Bundle ist framework-agnostisch — Layout-IR und Tokens sind Daten, kein CSS. Für Jetpack Compose:

claude --print "$(cat <<'EOF'
Read design/CONTEXT.md and design/tokens.json.

Implement design/screens/Home.json as a Jetpack Compose screen.
- Map color tokens to a MaterialTheme ColorScheme
- Map spacing tokens to Dp values (strip 'px' suffix, use .dp)
- Map typography tokens to MaterialTheme.typography
- Use the component names from design/components/inventory.json as Composable names
- Reference design/screens/Home.png for visual accuracy
EOF
)"

Die stack-Knoten der IR lassen sich in Compose natürlich auf Column (direction: vertical) und Row (direction: horizontal) abbilden. leaf-Knoten mit type: "text" werden zu Text-Composables; type: "image" wird zu Image oder einem Platzhalter. Das vollständige Muster einschließlich MaterialTheme-Integration finden Sie unter Jetpack Compose from Figma.

Das Design-Bundle versionieren

Behandeln Sie das Verzeichnis design/ wie jede andere Projektabhängigkeit. Wenn sich das Design wesentlich ändert, exportieren Sie erneut von figmascope.dev, committen Sie und vermerken Sie die Änderung im PR:

# Check when the bundle was last exported vs when Figma file was last modified
python3 -c "
import json
from datetime import datetime
meta = json.load(open('design/_meta.json'))
exported = datetime.fromisoformat(meta['exportedAt'].replace('Z', '+00:00'))
modified = datetime.fromisoformat(meta['figmaLastModified'].replace('Z', '+00:00'))
delta = modified - exported
if delta.total_seconds() > 0:
    print(f'WARNING: Figma file was modified {delta} after last export')
else:
    print('Bundle is current')
"

Ein veraltetes Bundle bedeutet, dass der Agent auf Basis eines überholten Designs arbeitet. Die Zeitstempelprüfung erkennt das, bevor Sie Zeit in eine Codegen-Sitzung investieren, die auf supersedierten Spezifikationen basiert.