Claude Code + Figma — एक Deterministic Design Handoff Pipeline

Screenshot prompting की एक सीमा होती है। आप design paste करते हैं, model एक plausible approximation बनाता है, आप उसे correct करते हैं, अगले turn में वह फिर drift करता है। कुछ भी anchored नहीं होता। Model के पास turns के बीच खुद को check करने के लिए कोई source of truth नहीं होती।

figmascope का context bundle contract बदलता है। एक pixel reference की जगह जिसे model को हर बार interpret करना पड़ता है, आपको structured, referenceable files का set मिलता है — design tokens, layout IR, component inventory, UI strings — जो session में रहते हैं और consistent रहते हैं। Claude Code उन्हें पढ़ सकता है, उनसे implement कर सकता है, और demand पर उनके खिलाफ अपना output check कर सकता है।

यह walkthrough bundle export से reviewed, token-verified implementation तक के पूरे pipeline को cover करती है।

यह deterministic क्यों है

तीन चीज़ें bundle को interpretable की बजाय referenceable बनाती हैं:

1. Tokens typed और keyed हैं। tokens.json semantic names (spacing.16, color.7f5cfe) को exact values से map करता है। Model design को re-process किए बिना अपने output को file के खिलाफ check कर सकता है।
2. IR pixels नहीं, एक tree है। screens/home.json layout को stack/overlay/absolute/leaf nodes के terms में describe करता है — वही abstraction जो implementation target (Compose, React, आदि) use करता है। कोई visual interpretation step नहीं है।
3. Bundle turns में stable है। एक बार repo में होने के बाद, session का हर prompt उन्हीं files को reference कर सकता है। Token drift detectable है: model से अपना output tokens.json के खिलाफ compare करने के लिए कहें और वह इसे mechanically कर सकता है।

Step 1: Bundle generate करें

अपने browser में figmascope.dev खोलें। अपना Figma file URL paste करें। Exporter client-side run होता है Figma REST API use करके — आपका Figma personal access token localStorage में stored है और figmascope के servers को कभी नहीं भेजा जाता।

Export Agent Context पर click करें। Page top-level frames export करता है, design tokens resolve करता है, IR build करता है, और context-bundle.zip download करता है।

Step 2: अपने project में Unzip करें

# अपने project root से
unzip ~/Downloads/context-bundle.zip -d ./design/

# confirm करें क्या है
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

Directory का नाम मायने नहीं रखता — design/ बस एक convention है। जो मायने रखता है वह यह है कि Claude Code working directory से files पढ़ सके।

Step 3: अपने repo में Claude Code start करें

cd my-app
claude

Claude Code आपके repo root में full file access के साथ start होता है। यह पूरे session में tree के किसी भी file को read, write, और reference कर सकता है — यह वह key capability है जो bundle pattern को काम करने देती है।

Step 4: Agent को orient करें

किसी भी implementation से पहले एक reading prompt से शुरू करें। यह spec को session context में load करता है और आपको verify करने देता है कि कोई code लिखने से पहले export सही दिखता है।

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

Claude target (default Jetpack Compose), token source, और CONTEXT.md header से कोई warnings — gradient fills, missing token mappings, unsupported effects — report करेगा। आप इन्हें अभी catch करते हैं, 200 lines code generate करने के बाद नहीं।

एक quick token check के साथ follow up करें:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

Step 5: एक screen implement करें

अब implementation prompt। Explicitly बताएं कि कौन सी files किन decisions के लिए authoritative हैं:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

Step 6: Token drift detect और fix करें

पहले implementation pass के बाद, visually review करने से पहले drift check run करें। यह bundle का screenshot prompting पर key advantage है — आप model से अपना output mechanically verify करने के लिए कह सकते हैं।

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

Spacing के लिए भी यही करें:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

Tip: अपने पहले prompt में _meta.json warnings include करें

design/_meta.json में एक warnings array है। ये वे चीज़ें हैं जिन्हें exporter fully resolve नहीं कर सका: gradient fills, embedded images, effects जिनका token equivalent नहीं है। Implement करने से पहले इन्हें पढ़ें:

cat design/_meta.json

अगर output में कुछ ऐसा है:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

इन्हें explicitly अपने implementation prompt में add करें: "Skip the hero background fill and leave a // TODO: gradient. For the avatar node, use a placeholder AsyncImage with a grey background."

यह screenshot prompting को क्यों beat करता है

Multi-turn safe। Token file और IR turns के बीच नहीं बदलते। आप turn 12 में पूछ सकते हैं "क्या आपने card padding के लिए सही spacing use की?" और accurate answer मिलेगा, क्योंकि truth की source अभी भी disk पर है।

Diff-friendly। जब आप design change के बाद re-export करते हैं, नया bundle पुराने के खिलाफ diff produce करता है। आप Claude से diff review करने और केवल affected components update करने के लिए कह सकते हैं — कोई full reimplementation नहीं।

कोई re-upload नहीं। Bundle आपके repo में रहता है। आपको हर नई screen के लिए screenshots re-paste नहीं करने पड़ते। हर नई screen बस design/screens/<name>.json है — अगले prompt में reference करने के लिए एक और file।

Gaps के बारे में honest। CONTEXT.md और _meta.json explicitly list करते हैं कि bundle क्या cover नहीं करता। Screenshot prompting का कोई equivalent नहीं — model बस gaps के through guess करता है।

Main figmascope app आपके browser में export handle करता है — अपना Figma URL paste करें, bundle export करें, और आप Claude Code को एक deterministic spec के खिलाफ run करने के लिए तैयार हैं।