Prompting pomocí screenshotů má svůj strop. Vložíte návrh, model vytvoří věrohodnou aproximaci, opravíte ji, v dalším tahu se opět odchýlí. Nic není ukotveno. Model nemá zdroj pravdy, proti kterému by se kontroloval mezi tahy.

Kontextový balíček figmascope mění smlouvu. Místo pixelové reference, kterou musí model pokaždé interpretovat, dostanete strukturovanou, odkazovatelnou sadu souborů — design tokeny, IR rozvržení, inventář komponent, UI řetězce — které zůstávají v sezení a jsou konzistentní. Claude Code je může číst, implementovat z nich a na vyžádání kontrolovat svůj vlastní výstup proti nim.

Tento průvodce pokrývá celý pipeline od exportu balíčku po zkontrolovanou, tokenově ověřenou implementaci.

Co dělá toto deterministickým

Tři věci dělají balíček odkazovatelným, ne interpretovatelným:

  1. Tokeny jsou typované a klíčované. tokens.json mapuje sémantická jména (spacing.16, color.7f5cfe) na přesné hodnoty. Model může svůj výstup zkontrolovat proti souboru bez opětovného zpracování návrhu.
  2. IR je strom, ne pixely. screens/home.json popisuje rozvržení z hlediska uzlů stack/overlay/absolute/leaf — stejnou abstrakci, kterou používá cíl implementace (Compose, React atd.). Neexistuje žádný krok vizuální interpretace.
  3. Balíček je stabilní napříč tahy. Jakmile je v repozitáři, každý prompt v sezení může odkazovat na stejné soubory. Odchylka tokenů je detekovatelná: požádejte model, aby porovnal svůj výstup s tokens.json, a může to udělat mechanicky.

Krok 1: Vygenerujte balíček

Otevřete figmascope.dev ve svém prohlížeči. Vložte URL svého Figma souboru. Exportér běží na straně klienta pomocí Figma REST API — váš Figma personal access token je uložen v localStorage a nikdy není odeslán na servery figmascope.

Klikněte na Export Agent Context. Stránka exportuje rámce nejvyšší úrovně, rozlišuje design tokeny, sestaví IR a stáhne context-bundle.zip.

Krok 2: Rozbalte do svého projektu

# z kořene vašeho projektu
unzip ~/Downloads/context-bundle.zip -d ./design/

# potvrďte, co máte
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

Název adresáře nezáleží — design/ je jen konvence. Záleží na tom, aby Claude Code mohl číst soubory z pracovního adresáře.

Krok 3: Spusťte Claude Code ve svém repozitáři

cd my-app
claude

Claude Code se spustí v kořeni vašeho repozitáře s plným přístupem k souborům. Může číst, zapisovat a odkazovat na jakýkoli soubor ve stromu napříč celým sezením — to je klíčová schopnost, která umožňuje vzor balíčku.

Krok 4: Orientujte agenta

Začněte čtecím promptem před jakoukoliv implementací. Tím načtete specifikaci do kontextu sezení a umožníte vám ověřit, že export vypadá správně, než napíšete jakýkoli kód.

Přečti ./design/CONTEXT.md a řekni mi:
1. Pro jaký cílový framework je tento balíček?
2. Na jaké soubory tokenů odkazuje?
3. Jsou nějaká varování, která bych měl vědět před implementací?

Claude nahlásí cíl (Jetpack Compose ve výchozím nastavení), zdroj tokenů a jakákoli varování z hlavičky CONTEXT.md — přechodové výplně, chybějící mapování tokenů, nepodporované efekty. Zachytíte je nyní, ne po vygenerování 200 řádků kódu.

Následujte rychlou kontrolou tokenů:

Vypiš 10 nejlepších barevných tokenů z ./design/tokens.json.
Poté vypiš tokeny mezer.

Tím potvrdíte, že soubor tokenů byl správně analyzován, a získáte mentální model palety před implementací.

Krok 5: Implementujte obrazovku

Nyní implementační prompt. Buďte explicitní ohledně toho, které soubory jsou autoritativní pro která rozhodnutí:

Implementuj ./design/screens/home.json jako Jetpack Compose obrazovku.

Pravidla:
- Platí omezení CONTEXT.md. Přečtěte ho, pokud jste tak ještě neudělali.
- Všechny hodnoty mezer, barev a poloměrů musí pocházet z ./design/tokens.json.
  Mapujte klíče tokenů na příslušná primitiva Compose (např. spacing.16 → 16.dp).
- UI řetězce musí používat klíče z ./design/strings.json přes stringResource().
  Pokud není k dispozici žádné resource ID, použijte jako záložní hodnotu pole "fallback".
- Druhy IR uzlů se mapují takto:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box s Modifier.offset
    leaf (text)             → Text s TextStyle
    leaf (rectangle)        → Box s Modifier.background
- Nevymýšlejte žádnou hodnotu, která není přítomna v souborech tokenů nebo IR.
  Pokud něco chybí, zanechte komentář TODO s klíčem tokenu, který jste očekávali.

Claude Code přečte IR, projde strom uzlů, namapuje každý uzel na jeho primitiv Compose a vytáhne hodnoty tokenů podle klíče. Výstup je sledovatelný: každá hodnota .dp by měla odpovídat tokenu mezery, každý Color(0xFF...) by měl odpovídat tokenu barvy.

Krok 6: Detekujte a opravte odchylku tokenů

Po prvním průchodu implementace spusťte kontrolu odchylky před vizuální kontrolou. To je klíčová výhoda balíčku oproti promptování screenshotem — můžete požádat model, aby mechanicky ověřil svůj vlastní výstup.

Porovnej každou barevnou hodnotu ve vygenerovaném HomeScreen.kt s ./design/tokens.json.
Vypiš všechny hex hodnoty ve výstupu, které neodpovídají klíči barevného tokenu.
Pro každou z nich identifikuj správný token a nahraď hardkódovanou hodnotu.

Totéž pro mezery:

Porovnej každou hodnotu .dp v HomeScreen.kt s tokeny mezer v ./design/tokens.json.
Označte každou hodnotu, která neodpovídá tokenu mezery. Nahraďte správnou referencí tokenu.

Tato smyčka — implementovat, zkontrolovat odchylku, opravit — konverguje rychle. Po druhém nebo třetím průchodu je výstup plně odkazován na tokeny.

Tip: zahrňte varování z _meta.json do prvního promptu

design/_meta.json obsahuje pole warnings. Jsou to věci, které exportér nedokázal plně rozlišit: přechodové výplně, vložené obrázky, efekty bez ekvivalentního tokenu. Přečtěte je před implementací:

cat design/_meta.json

Pokud výstup obsahuje něco jako:

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

Přidejte to explicitně do svého implementačního promptu: "Přeskočte výplň hero background a zanechte // TODO: gradient. Pro uzel avatar použijte zástupný AsyncImage se šedým pozadím."

Tím zabráníte Claudovi v tichém odhadování — udělá, co jste mu řekli, místo hádání.

Proč je to lepší než prompting screenshotem

Bezpečné pro více tahů. Soubor tokenů a IR se mezi tahy nemění. Můžete se v tahu 12 zeptat "použil jsi správné mezery pro odsazení karty?" a dostanete přesnou odpověď, protože zdroj pravdy je stále na disku.

Přátelské k diffům. Když re-exportujete po změně návrhu, nový balíček vytvoří diff oproti starému. Můžete požádat Clauda, aby zkontroloval diff a aktualizoval pouze dotčené komponenty — není nutná plná reimplementace.

Žádné opětovné nahrávání. Balíček žije ve vašem repozitáři. Pro každou novou obrazovku znovu nevkládáte screenshoty. Každá nová obrazovka je jen design/screens/<name>.json — jeden další soubor pro odkaz v dalším promptu.

Upřímnost ohledně mezer. CONTEXT.md a _meta.json explicitně vypisují, co balíček nepokrývá. Prompting screenshotem nemá ekvivalent — model jen hádá přes mezery.

Hlavní aplikace figmascope zpracovává export ve vašem prohlížeči — vložte URL Figma, exportujte balíček a jste připraveni spustit Claude Code proti deterministické specifikaci.