Cursor + Figma Workflow — Context Bundle से UI Generate करें

Cursor का Composer बहुत सारा UI code लिख सकता है। जो वह नहीं कर सकता वह है आपकी Figma file पढ़ना। Screenshot paste करें और वह guess करता है — गलत spacing, invented color values, made-up component names जो आपके codebase में कुछ भी match नहीं करतीं। Problem model नहीं है। Problem missing structured context है।

figmascope इसे fix करता है। यह आपकी Figma file को zip bundle के रूप में export करता है: design tokens, per-screen layout trees, 2× reference renders, component inventory, और UI strings — वह सब कुछ जो Cursor के agent को plausible-looking code की बजाय accurate code generate करने के लिए चाहिए।

यह walkthrough पूरे pipeline को cover करती है: Figma URL → context bundle → Cursor prompt → reviewed output।

Bundle में क्या है

जब figmascope आपकी file export करता है, zip में होता है:

• CONTEXT.md — वह spec जो agent पहले पढ़ता है। Target framework, token sources, constraints, और known gaps list करता है।
• tokens.json — typed design tokens: spacing, border-radius, color, typography।
• screens/<name>.json — per-screen intermediate representation: fills, spacing, और string refs के साथ stack/overlay/absolute/leaf nodes।
• screens/<name>.png — visual confirmation के लिए 2× reference renders।
• components/inventory.json — component id, name, और type।
• strings.json — dot-notation resource keys के साथ UI strings।
• _meta.json — build manifest: source file name, export timestamp, warnings।

Bundle आपकी machine पर रहता है। इसे कहीं re-upload नहीं किया जाता।

Step 1: Bundle generate करें

figmascope पर जाएं और अपना Figma file URL input field में paste करें। Exporter आपके browser में Figma REST API के खिलाफ run होता है — आपको पहली बार personal access token की ज़रूरत होगी (localStorage में stored, figmascope servers को कभी नहीं भेजा जाता)।

Export Agent Context दबाएं। Page हर frame process करता है, tokens resolve करता है, IR build करता है, फिर context-bundle.zip आपकी machine पर download करता है।

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

Bundle को ऐसी जगह रखें जहाँ Cursor देख सके — आपके repo root पर एक design/ directory सबसे clean pattern है।

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

# structure verify करें
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Step 3: एक .cursorrules snippet add करें

Cursor repo root पर .cursorrules पढ़ता है और इसे हर chat context में prepend करता है। यहाँ आप agent को bundle से wire करते हैं।

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Step 4: Cursor Composer खोलें और screen implement करें

Composer खोलें (Cmd+I macOS पर)। Prompting से पहले files pin करें: paperclip icon click करें और design/CONTEXT.md, design/tokens.json, और design/screens/home.json add करें। फिर prompt करें:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Step 5: Review और iterate करें

design/screens/home.png को rendered output के साथ खोलें। Differences meaningful हैं: वे IR mapping gaps या token values की तरफ point करते हैं जो apply नहीं हुईं।

Common issues और follow-up prompts:

Token drift — agent ने token की बजाय hardcoded hex use किया:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Missing component — IR एक component ID reference करता है जो agent ने resolve नहीं की:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Layout off — spacing या alignment PNG से match नहीं करती:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

क्या काम करता है, क्या नहीं

अच्छी तरह काम करता है: stack layouts वाली flat screens, token-driven spacing और color, string refs के साथ text, simple card और list patterns। IR context में होने के बाद Cursor इन्हें अच्छी तरह handle करता है — वह guessing बंद कर देता है और mapping शुरू करता है।

कम अच्छी तरह काम करता है: complex absolute-positioned overlays (Cursor कभी-कभी offset coordinates गलत पढ़ता है), gradient fills (_meta.json में warnings के रूप में flagged — Cursor approximate करेगा), और vector icons (IR सिर्फ reference ID store करता है, path data नहीं)।

Tip: Prompting से पहले _meta.json warnings check करें

अपने पहले implementation prompt से पहले, design/_meta.json पढ़ें। warnings array वह सब list करता है जो exporter fully resolve नहीं कर सका। Agent को इनके बारे में note करें ताकि वह implement करने की कोशिश न करे और silently hardcoded values पर fall back न हो।

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

Summary

Workflow यह है: एक बार export करें, हर जगह reference करें। Bundle एक stable, machine-readable spec है जिसे Cursor design को re-process किए बिना multiple turns में consult कर सकता है। आपको token-accurate, string-referenced, layout-correct code मिलता है screenshot approximation की बजाय — और जब कुछ drift करे, आप agent को एक line में source of truth की तरफ point कर सकते हैं।

figmascope.dev पर खुद run करें — अपना Figma URL paste करें, Export Agent Context hit करें, और दो मिनट से कम में bundle को अपने Cursor workspace में unzip करें।