Composer v Cursor dokáže napsat hodně UI kódu. Co nedokáže, je číst váš Figma soubor. Vložte screenshot a hádá — špatné mezery, vymyšlené hodnoty barev, vybájené názvy komponent, které neodpovídají ničemu ve vaší kódové základně. Problémem není model. Je to chybějící strukturovaný kontext.
figmascope to napravuje. Exportuje váš Figma soubor jako zip balíček: design tokeny, stromy rozvržení pro každou obrazovku, 2× referenční rendery, inventář komponent a UI řetězce — vše, co Cursor agent potřebuje ke generování přesného kódu místo věrohodně vypadajícího kódu.
Tento průvodce pokrývá celý pipeline: URL Figma → kontextový balíček → prompt Cursor → zkontrolovaný výstup.
Co je v balíčku
Když figmascope exportuje váš soubor, zip obsahuje:
CONTEXT.md— specifikace, kterou agent čte jako první. Uvádí cílový framework, zdroje tokenů, omezení a známé mezery.tokens.json— typované design tokeny: mezery, border-radius, barvy, typografie.screens/<name>.json— intermediate representation pro každou obrazovku: uzly stack/overlay/absolute/leaf s výplněmi, mezerami a referencemi na řetězce.screens/<name>.png— 2× referenční rendery pro vizuální potvrzení.components/inventory.json— ID, název a typ komponenty.strings.json— UI řetězce s klíči zdrojů v tečkové notaci._meta.json— manifest sestavení: název zdrojového souboru, časové razítko exportu, varování.
Balíček zůstává na vašem počítači. Nikde se znovu nenahrává.
Krok 1: Vygenerujte balíček
Přejděte na figmascope a vložte URL svého Figma souboru do vstupního pole. Exportér běží ve vašem prohlížeči oproti Figma REST API — poprvé budete potřebovat personal access token (uložen v localStorage, nikdy odesílán na servery figmascope).
Stiskněte Export Agent Context. Stránka zpracuje každý rámec, rozlišuje tokeny, sestaví IR a poté stáhne context-bundle.zip na váš počítač.
Pokud má váš soubor mnoho rámců, jsou zahrnuty pouze rámce nejvyšší úrovně, které nejsou komponentami ani náhledy. _meta.json přesně ukazuje, které rámce byly exportovány a případná varování (přechodové výplně, nepodporované efekty).
Krok 2: Rozbalte do svého projektu
Dejte balíček tam, kde ho Cursor uvidí — adresář design/ v kořeni repozitáře je nejčistší vzor.
# z kořene vašeho projektu
unzip ~/Downloads/context-bundle.zip -d ./design/
# ověřte strukturu
ls design/
# CONTEXT.md _meta.json components/ screens/ strings.json tokens.jsonPřidejte design/ do .gitignore, pokud nechcete balíček commitovat. Nebo ho commitujte — je deterministický; stejný Figma soubor ve stejném stavu vždy produkuje stejný balíček, takže diffy jsou smysluplné.
Krok 3: Přidejte úryvek .cursorrules
Cursor čte .cursorrules v kořeni repozitáře a přidává ho na začátek každého kontextu chatu. Zde zapojíte agenta na balíček.
# .cursorrules
Při vytváření UI obrazovek:
1. Nejprve přečtěte ./design/CONTEXT.md. Specifikuje cílový framework a omezení.
2. Pro všechny hodnoty mezer, barev, poloměrů a typografie používejte tokeny z ./design/tokens.json.
3. Pro strukturu rozvržení a hierarchii uzlů odkazujte na ./design/screens/<name>.json.
4. Pro vizuální potvrzení odpovídejte ./design/screens/<name>.png — používejte ho jako kontrolu správnosti, ne jako zdroj pravdy.
5. Místo hardkódování UI textu používejte klíče řetězců z ./design/strings.json.
6. Nevymýšlejte hodnoty tokenů. Pokud hodnota není v tokens.json, označte ji.Tento jediný blok zabraňuje třem nejčastějším zdrojům odchylky: vymyšleným barvám, hardkódovaným řetězcům a hádání rozvržení ze screenshotu.
Krok 4: Otevřete Cursor Composer a implementujte obrazovku
Otevřete Composer (Cmd+I na macOS). Před promptováním připněte soubory: klikněte na ikonu sponky a přidejte design/CONTEXT.md, design/tokens.json a design/screens/home.json. Poté promptujte:
Implementuj domovskou obrazovku z ./design/screens/home.json.
Omezení:
- Cílový framework a konvence komponent jsou v ./design/CONTEXT.md
- Všechny hodnoty mezer, barev a poloměrů musí pocházet z ./design/tokens.json
- UI řetězce musí používat klíče z ./design/strings.json
- Kořenový uzel je stack (vertikální). Potomci jsou deklarováni v pořadí v JSON.
- Nevymýšlejte žádné hodnoty, které nejsou přítomny v souborech tokenů nebo IR.Cursor přečte připnuté soubory, namapuje IR uzly na primitiva vašeho frameworku a vygeneruje implementaci. Výstup odkazuje na tokeny — pokud zkontrolujete generovaný kód, každá hodnota mezer by měla sledovat klíč v tokens.json.
Krok 5: Zkontrolujte a iterujte
Otevřete design/screens/home.png vedle vyrenderovaného výstupu. PNG je 2× export z Figma — ukazuje přesně to, jak by návrh měl vypadat. Rozdíly jsou smysluplné: ukazují buď na mezery v mapování IR nebo na hodnoty tokenů, které nebyly aplikovány.
Běžné problémy a follow-up prompty:
Odchylka tokenů — agent použil hardkódovaný hex místo tokenu:
Porovnej každou barevnou hodnotu ve vygenerované komponentě s ./design/tokens.json.
Vypiš barvy, které neodpovídají klíči tokenu. Nahraď je správnou referencí tokenu.Chybějící komponenta — IR odkazuje na ID komponenty, které agent nevyřešil:
IR odkazuje na componentId "btn-primary-01". Zkontroluj ./design/components/inventory.json
pro jeho název a typ, poté implementuj zástupný symbol s tímto názvem a správnými hodnotami tokenů.Rozvržení mimo — mezery nebo zarovnání neodpovídá PNG:
Vertikální mezera mezi záhlavím a seznamem karet by měla být spacing.24 z tokens.json (24dp).
Váš výstup používá 16px. Opravte to.Co funguje, co ne
Funguje dobře: ploché obrazovky s rozvržením stack, mezery a barvy řízené tokeny, text s referencemi řetězců, jednoduché vzory karet a seznamů. Cursor s nimi po vložení IR do kontextu zachází dobře — přestane hádat a začne mapovat.
Funguje méně dobře: komplexní absolutně umístěné overlaye (Cursor někdy špatně čte souřadnice offset), přechodové výplně (označeny jako varování v _meta.json — Cursor je přiblíží) a vektorové ikony (IR uchovává pouze referenční ID, ne data cesty).
Pouze screenshot vs. balíček: jít pouze se screenshotem je na začátek rychlejší, ale nedeterministické. Každé sezení začíná od nuly. Model může jednou mezery trefit a v dalším tahu ne. Balíček je odkazovatelný napříč celým sezením — Cursor může kdykoli zkontrolovat svůj výstup proti souboru tokenů bez opětovného nahrávání čehokoli.
Tip: zkontrolujte varování _meta.json před promptováním
Před prvním implementačním promptem si přečtěte design/_meta.json. Pole warnings uvádí vše, co exportér nedokázal plně rozlišit: přechodové výplně, chybějící mapování tokenů, rámce s vloženými obrázky. Přidejte poznámku o těchto věcech do svého promptu, aby agent nezkoušel je implementovat a tiše nespadl zpět na hardkódované hodnoty.
cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'Pokud výstup zobrazuje "gradientFill: not fully supported" na konkrétním uzlu, řekněte Cursor, aby přeskočil pozadí tohoto uzlu a místo toho zanechal komentář // TODO: gradient.
Shrnutí
Workflow je: exportujte jednou, odkazujte všude. Balíček je stabilní, strojově čitelná specifikace, na kterou se Cursor může odkazovat napříč více tahy bez opětovného zpracování návrhu. Místo přiblížení screenshotu dostanete kód přesný z hlediska tokenů, odkazující na řetězce a správný z hlediska rozvržení — a když se něco odchýlí, jednou větou nasměrujete agenta zpět ke zdroji pravdy.
Vyzkoušejte sami na figmascope.dev — vložte URL Figma, klikněte na Export Agent Context a rozbalte balíček do workspace Cursor za méně než dvě minuty.