Figma naar Claude Code — Gestructureerde Designcontext voor Anthropic's CLI

De instructie "herïmplementeer geen componenten die al bestaan" is van belang wanneer de componentinventaris wordt gedeeld. Claude Code kan design/components/inventory.json lezen om te identificeren welke componenten al zijn geïmplementeerd en ze importeren in plaats van ze opnieuw te genereren.

Designtokens verbinden

De tokens.json geëxporteerd door figmascope gebruikt een W3C-achtige geneste structuur met $value- en $type-velden:

{
  "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" }
    }
  }
}

Vraag Claude Code om een tailwind.config.ts thema-extensieblok uit dit bestand te genereren als eerste stap, voordat er schermen worden geïmplementeerd. Zo kunnen alle volgende schermimplementaties de Tailwind-tokenaliassen consistent gebruiken:

claude --print "Lees design/tokens.json en genereer een tailwind.config.ts
theme.extend-blok. Wijs kleurenstokens toe aan theme.extend.colors,
spatiëringstokens aan theme.extend.spacing, en typografie aan
theme.extend.fontFamily / fontSize. Voer alleen het configuratie-object uit."

Zie Design Token Export voor AI Agents voor een diepgaande analyse van het tokenformaat en de frequentie-inferentie fallback die figmascope gebruikt wanneer Figma Variables niet zijn ingesteld.

De tekenreekslaag verwerken

Elk tekstknooppunt in het Figma-bestand krijgt een slot in strings.json. De sleutels gebruiken puntnotatie afgeleid van de framehiërarchie:

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

Instrueer Claude Code om deze sleutels als i18n-identifiers te gebruiken. In plaats van de tekenreeks "Everything you need" hard te coderen in JSX, roept het gegenereerde component t('home.hero.title') aan (of het equivalent van uw i18n-bibliotheek). Het resourcebestand staat al in strings.json — u hoeft het alleen te importeren of te verbinden met uw i18n-setup.

Als figmascope een botsing detecteert — twee knooppunten die naar dezelfde sleutel hashen — geeft het een strings-collision-waarschuwing in _meta.json en voegt een numeriek achtervoegsel toe om te onderscheiden. Controleer _meta.json voordat u een sessie start zodat u weet wat u kunt verwachten.

CLAUDE.md-integratie

Als u een CLAUDE.md-projectcontextbestand gebruikt, voeg dan een korte sectie toe die de agent naar de designmap wijst. Dit past goed bij de aanpak beschreven in AI Design Handoff en vult aan waarom figmascope verschilt van Figma inspector-plugins.

Voeg een designsectie als volgt toe:

## Designcontext

Designtokens, indelings-IR, referentieweergaven en tekenreeksen staan in `design/`.
Lees altijd `design/CONTEXT.md` voordat u een scherm implementeert.
Tokenwaarden staan in `design/tokens.json` — codeer nooit kleur of spatiëring hard.
Canonieke componentnamen staan in `design/components/inventory.json`.

Dit betekent dat elke Claude Code-sessie in het project automatisch de designcontext als onderdeel van zijn werkkennis heeft, zonder dat u het in elke prompt moet herhalen.

Wat de agent daadwerkelijk goed doet

Met gestructureerde context doet Claude Code betrouwbaar het volgende goed:

• Spatiëringswaarden — omdat ze in tokens.json staan als spacing.4 → 16px, niet geschat van een screenshot
• Kleur — exacte hexwaarden, niet "ziet eruit als een warm oranje"
• Typografie — lettertypefamilie, grootte, gewicht, regelafstand, alles getypeerd
• Indelingsrichting — stack-knooppunten hebben een expliciet direction- en gap-veld
• Componentnamen — inventory.json is de canonieke bron, dus geen verzonnen namen
• Tekst — strings.json voorkomt dat de agent parafrazeert of plaatsaanduidingstekst verzint

Wat nog menselijke beoordeling vereist: interactiestatussen (hover, focus, actief) die niet zichtbaar zijn in statische Figma-frames, animatietiming en responsieve breekpunten die niet expliciet in het bestand zijn ontworpen. De IR legt statische indeling vast; dynamisch gedrag valt buiten het bereik.

--dangerously-skip-permissions gebruiken in gecontroleerde omgevingen

Voor geautomatiseerde pipelines waarbij u wilt dat Claude Code zonder interactieve goedkeuringsprompts werkt — bijvoorbeeld in een CI-stap die componentstubs genereert na een designupdate — kunt u --dangerously-skip-permissions gebruiken. Alleen geschikt in sandbox-omgevingen zonder productiereferenties.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Lees design/CONTEXT.md. Genereer componentstubbestanden voor alle componenten
in design/components/inventory.json die nog niet bestaan in src/components/.
Gebruik TypeScript + React functioneel componentformaat. Voeg een TODO-opmerking toe
voor elk component dat verwijst naar de relevante scherm-JSON.
EOF
)"

In productie-ontwikkelaarsworkflows, laat machtigingen interactief. De prompts bestaan om een goede reden — Claude Code kan en zal bestanden schrijven, en u wilt weten welke voordat het dat doet.

Exportwaarschuwingen controleren voordat u prompts geeft

figmascope geeft waarschuwingen in _meta.json voor omstandigheden die de uitvoerkwaliteit kunnen beïnvloeden. Controleer ze voordat u een Claude Code-sessie start:

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 geëxporteerd: {meta['frameCount']}\")
print(f\"Tokensbron: {meta.get('tokensSource', 'variables')}\")
"

Twee waarschuwingen om op te letten:

• layout-mode-none-inferred — een frame had geen auto-layout ingesteld. figmascope leidde indeling af van absolute kindposities, wat minder betrouwbaar is. Markeer het relevante scherm in uw prompt: "Dit scherm gebruikt absolute positionering; genereer dienovereenkomstig."
• strings-collision — twee tekstknooppunten produceerden dezelfde resourcesleutel. figmascope onderscheidt met een numeriek achtervoegsel, maar u dient de tekenreeksen in strings.json te verifiëren zijn correct voordat de agent i18n-aanroepen genereert.

Android- en iOS-workflows

Claude Code is niet beperkt tot webframeworks. De contextbundel is framework-agnostisch — de indelings-IR en tokens zijn data, geen CSS. Voor Jetpack Compose:

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

Implementeer design/screens/Home.json als een Jetpack Compose-scherm.
- Wijs kleurenstokens toe aan een MaterialTheme ColorScheme
- Wijs spatiëringstokens toe aan Dp-waarden (verwijder 'px'-achtervoegsel, gebruik .dp)
- Wijs typografietokens toe aan MaterialTheme.typography
- Gebruik de componentnamen van design/components/inventory.json als Composable-namen
- Raadpleeg design/screens/Home.png voor visuele nauwkeurigheid
EOF
)"

De stack-knooppunten van de IR worden van nature toegewezen aan Column (richting: verticaal) en Row (richting: horizontaal) in Compose. leaf-knooppunten met type: "text" worden Text composables; type: "image" wordt Image of een plaatsaanduiding. Zie Jetpack Compose vanuit Figma voor het volledige patroon.

De designbundel versiebeheren

Behandel de design/-map zoals elke andere projectafhankelijkheid. Wanneer het ontwerp aanzienlijk verandert, exporteer opnieuw vanuit figmascope.dev, commit, en noteer de wijziging in de PR:

# Controleer wanneer de bundel voor het laatst werd geëxporteerd vs wanneer het Figma-bestand voor het laatst werd gewijzigd
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'WAARSCHUWING: Figma-bestand werd {delta} na laatste export gewijzigd')
else:
    print('Bundel is actueel')
"

Een verouderde bundel betekent dat de agent werkt vanuit een verouderd ontwerp. De tijdstempelcontrole vangt dit op voordat u tijd besteedt aan een codegen-sessie die is gebaseerd op vervangen specificaties.