Figma vers Claude Code — Contexte de design structuré pour la CLI d'Anthropic

L'instruction « ne pas ré-implémenter les composants qui existent déjà » est importante lorsque l'inventaire des composants est partagé. Claude Code peut lire design/components/inventory.json pour identifier les composants déjà implémentés et les importer plutôt que de les régénérer.

Câblage des tokens de design

Le fichier tokens.json exporté par figmascope utilise une structure imbriquée inspirée du W3C avec des champs $value et $type :

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

Demandez à Claude Code de générer un bloc d'extension theme dans tailwind.config.ts à partir de ce fichier comme première étape, avant d'implémenter quelque écran que ce soit. Ainsi, toutes les implémentations d'écrans ultérieures pourront utiliser les alias de tokens Tailwind de manière cohérente :

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."

Consultez Export de tokens de design pour agents IA pour une analyse approfondie du format de tokens et du mécanisme d'inférence par fréquence utilisé par figmascope lorsque les Variables Figma ne sont pas configurées.

Gestion de la couche de chaînes

Chaque nœud texte du fichier Figma obtient une entrée dans strings.json. Les clés utilisent la notation pointée dérivée de la hiérarchie des frames :

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

Demandez à Claude Code d'utiliser ces clés comme identifiants i18n. Plutôt que de coder en dur la chaîne "Everything you need" dans le JSX, le composant généré appellera t('home.hero.title') (ou l'équivalent de votre bibliothèque i18n). Le fichier de ressources est déjà dans strings.json — il vous suffit de l'importer ou de le brancher à votre configuration i18n.

Si figmascope détecte une collision — deux nœuds qui hachent vers la même clé — il émet un avertissement strings-collision dans _meta.json et ajoute un suffixe numérique pour lever l'ambiguïté. Vérifiez _meta.json avant de démarrer une session afin de savoir ce à quoi vous attendre.

Intégration avec CLAUDE.md

Si vous utilisez un fichier de contexte de projet CLAUDE.md, ajoutez une courte section pointant l'agent vers le répertoire design. Cela se marie bien avec l'approche décrite dans Passation de design IA et complète la réflexion sur pourquoi figmascope diffère des plugins d'inspection Figma.

Ajoutez une section design de ce type :

## 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`.

Cela signifie que chaque session Claude Code dans le projet disposera automatiquement du contexte de design comme partie de ses connaissances de travail, sans que vous ayez à le répéter dans chaque prompt.

Ce que l'agent produit correctement

Avec un contexte structuré, Claude Code produit de manière fiable :

• Les valeurs d'espacement — car elles sont dans tokens.json sous la forme spacing.4 → 16px, et non estimées visuellement depuis une capture d'écran
• Les couleurs — valeurs hexadécimales exactes, pas « ressemble à un orange chaud »
• La typographie — famille de police, taille, graisse, interligne, toutes typées
• La direction de mise en page — les nœuds stack ont un champ direction et gap explicites
• Le nommage des composants — inventory.json est la source canonique, pas de noms inventés
• Le texte — strings.json empêche l'agent de paraphraser ou d'inventer des textes de substitution

Ce qui nécessite encore une révision humaine : les états d'interaction (hover, focus, active) qui ne sont pas visibles dans les frames Figma statiques, le timing des animations, et les points de rupture responsive qui n'ont pas été explicitement conçus dans le fichier. L'IR capture la mise en page statique ; le comportement dynamique est hors périmètre.

Utiliser --dangerously-skip-permissions dans des environnements contrôlés

Pour les pipelines automatisés où vous souhaitez que Claude Code fonctionne sans invites d'approbation interactives — par exemple dans une étape CI qui génère des stubs de composants après une mise à jour du design — vous pouvez utiliser --dangerously-skip-permissions. Approprié uniquement dans des environnements en sandbox sans identifiants de production.

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
)"

Dans les flux de travail de développement en production, laissez les permissions en mode interactif. Les invites existent pour une bonne raison — Claude Code peut et va écrire des fichiers, et vous voulez savoir lesquels avant qu'il ne le fasse.

Vérifier les avertissements d'export avant de soumettre un prompt

figmascope émet des avertissements dans _meta.json pour les conditions susceptibles d'affecter la qualité de la sortie. Vérifiez-les avant de démarrer une session Claude Code :

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')}\")
"

Deux avertissements à surveiller :

• layout-mode-none-inferred — un frame ne disposait pas de mise en page automatique. figmascope a inféré la disposition à partir des positions absolues des enfants, ce qui est moins fiable. Signalez l'écran concerné dans votre prompt : « Cet écran utilise un positionnement absolu ; générez en conséquence. »
• strings-collision — deux nœuds texte ont produit la même clé de ressource. figmascope lève l'ambiguïté avec un suffixe numérique, mais vous devriez vérifier que les chaînes dans strings.json sont correctes avant que l'agent génère les appels i18n.

Flux de travail Android et iOS

Claude Code n'est pas limité aux frameworks web. Le bundle de contexte est agnostique au framework — l'IR de mise en page et les tokens sont des données, pas du CSS. Pour 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
)"

Les nœuds stack de l'IR se mappent naturellement vers Column (direction : vertical) et Row (direction : horizontal) dans Compose. Les nœuds leaf avec type: "text" deviennent des composables Text ; type: "image" devient Image ou un espace réservé. Consultez Jetpack Compose depuis Figma pour le pattern complet.

Versionner le bundle de design

Traitez le répertoire design/ comme toute autre dépendance du projet. Lorsque le design change significativement, ré-exportez depuis figmascope.dev, validez, et notez le changement dans la 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')
"

Un bundle périmé signifie que l'agent travaille à partir d'un design obsolète. La vérification de l'horodatage détecte ce cas avant que vous ne passiez du temps sur une session de génération de code basée sur des spécifications dépassées.