Figma से Claude Code — Anthropic के CLI के लिए Structured Design Context

"do not re-implement components that already exist" instruction तब matter करती है जब component inventory shared हो। Claude Code design/components/inventory.json पढ़ कर identify कर सकता है कि कौन से components पहले से implement हैं और उन्हें regenerate करने के बजाय import करे।

Design tokens wire करना

figmascope द्वारा export किया गया tokens.json $value और $type fields के साथ W3C-ish nested structure use करता है:

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

कोई भी screen implement करने से पहले पहले step के रूप में Claude Code से tailwind.config.ts theme extension block generate करवाएं। इस तरह सभी subsequent screen implementations consistently Tailwind token aliases use कर सकती हैं:

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

Token format और frequency-inference fallback पर deep dive के लिए AI Agents के लिए Design Token Export देखें।

Strings layer को handle करना

Figma file का हर text node strings.json में एक slot पाता है। Keys frame hierarchy से derived dot-notation use करती हैं:

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

Claude Code को इन keys को i18n identifiers के रूप में use करने का instruction दें। JSX में "Everything you need" string hardcode करने के बजाय, generated component t('home.hero.title') (या आपकी i18n library का equivalent) call करे। Resource file पहले से strings.json में है — बस इसे import करें या अपने i18n setup से wire करें।

अगर figmascope collision detect करे — दो nodes जो same key पर hash होती हैं — तो वो _meta.json में strings-collision warning emit करता है और disambiguate करने के लिए numeric suffix append करता है। Session शुरू करने से पहले _meta.json check करें।

CLAUDE.md integration

अगर आप CLAUDE.md project context file use करते हैं, तो agent को design directory की तरफ point करने वाला एक short section add करें। यह AI Design Handoff में describe किए approach के साथ अच्छी तरह pair करता है।

इस तरह एक design section add करें:

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

इसका मतलब है project में हर Claude Code session को automatically design context working knowledge के रूप में मिलेगी, बिना आपको हर prompt में दोहराने के।

Agent actually क्या सही करता है

Structured context के साथ, Claude Code reliably सही करता है:

• Spacing values — क्योंकि वो tokens.json में spacing.4 → 16px के रूप में हैं, screenshot से eyeball नहीं किया गया
• Color — exact hex values, न कि "warm orange जैसा लगता है"
• Typography — font family, size, weight, line-height, सब typed
• Layout direction — stack nodes का explicit direction और gap field है
• Component naming — inventory.json canonical source है, तो कोई invented names नहीं
• Copy — strings.json agent को paraphrase करने या placeholder text बनाने से रोकता है

जो अभी भी human review चाहता है: interaction states (hover, focus, active) जो static Figma frames में visible नहीं हैं, animation timing, और responsive breakpoints जो file में explicitly design नहीं किए गए। IR static layout capture करता है; dynamic behavior out of scope है।

Controlled environments में --dangerously-skip-permissions

Automated pipelines के लिए जहां आप Claude Code को interactive approval prompts के बिना operate करना चाहते हैं — जैसे एक CI step में जो design update के बाद component stubs generate करे — आप --dangerously-skip-permissions use कर सकते हैं। केवल sandboxed environments में appropriate है जहां production credentials नहीं हैं।

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

Production developer workflows में, permissions interactive रहने दें। Prompts अच्छे कारण से exist करते हैं — Claude Code files लिख सकता है और लिखेगा, और आप जानना चाहते हैं कौन से, पहले।

Prompt करने से पहले export warnings check करें

figmascope उन conditions के लिए _meta.json में warnings emit करता है जो output quality को affect कर सकती हैं। Claude Code session शुरू करने से पहले check करें:

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

दो warnings पर ध्यान दें:

• layout-mode-none-inferred — एक frame में कोई auto-layout set नहीं था। figmascope ने child absolute positions से layout infer किया, जो कम reliable है। अपने prompt में relevant screen flag करें: "यह screen absolute positioning use करती है; accordingly generate करें।"
• strings-collision — दो text nodes ने same resource key produce किया। figmascope numeric suffix से disambiguate करता है, लेकिन आपको verify करना चाहिए कि strings.json में strings correct हैं, agent के i18n calls generate करने से पहले।

Android और iOS workflows

Claude Code web frameworks तक limited नहीं है। Context bundle framework-agnostic है — layout IR और tokens data हैं, CSS नहीं। 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
)"

IR के stack nodes naturally Compose में Column (direction: vertical) और Row (direction: horizontal) से map होते हैं। type: "text" के साथ leaf nodes Text composables बनते हैं; type: "image" Image या placeholder बनता है। Full pattern के लिए Jetpack Compose from Figma देखें।

Design bundle को version करना

design/ directory को किसी भी अन्य project dependency की तरह treat करें। जब design significantly बदले, figmascope.dev से re-export करें, commit करें, और PR में बदलाव note करें:

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

Stale bundle का मतलब है agent एक outdated design से काम कर रहा है। Timestamp check इसे पकड़ता है इससे पहले कि आप एक codegen session पर समय बर्बाद करें जो superseded specs पर based है।