Claude Code je schopný kódovací agent. Dejte mu snímek obrazovky z Figmy a vyprodukuje něco, co vypadá vágně správně. Dejte mu strukturovaný kontextový balíček — typované designové tokeny, IR rozložení, referenční rendery a strojově čitelnou specifikaci — a vyprodukuje kód, který skutečně lze nasadit.

figmascope generuje tento balíček na straně klienta, zcela ve vašem prohlížeči. Žádný backend, žádné nahrávání, žádná zprostředkovatelská služba s přístupem k vašim souborům Figmy. Tato příručka prochází celým workflow Figma → figmascope → Claude Code se skutečnými příklady CLI. Pokud používáte Cursor místo Claude Code, viz Figma do Cursoru pro workflow specifický pro Cursor.

Předpoklady

Export kontextového balíčku z figmascope

Otevřete figmascope.dev, vložte URL souboru Figmy a svůj token, klikněte na Exportovat kontextový balíček. Dostanete zip jako figmascope-ABC123.zip.

Rozbalte ho do adresáře design/ ve vašem projektu:

unzip figmascope-ABC123.zip -d design/

Výsledná struktura:

design/
├── CONTEXT.md
├── tokens.json
├── _meta.json
├── components/
│   └── inventory.json
├── screens/
│   ├── Home.json
│   ├── Home.png
│   ├── Settings.json
│   └── Settings.png
└── strings.json

Odevzdejte ho do správy zdrojového kódu. Manifest _meta.json zaznamenává časové razítko exportu a klíč souboru Figmy, takže tým vždy ví, které verzi designu balíček odpovídá.

Jak Claude Code čte kontextový balíček

CONTEXT.md je vstupní bod. Je to strukturovaný specifikační dokument, který agentovi říká:

Claude Code čte soubory před akcí. Zahájení relace s CONTEXT.md orientuje agenta, než se dotkne jakéhokoliv JSON obrazovky.

Zahájení relace Claude Code

Nejpřímější přístup — spusťte claude v kořenu vašeho projektu a nasměrujte ho na adresář designu:

claude

Pak v interaktivní relaci:

Přečtěte design/CONTEXT.md, poté implementujte obrazovku Home jako React komponentu.

Použijte:
- design/tokens.json pro všechny hodnoty designových tokenů
- design/screens/Home.json pro strom rozložení
- design/screens/Home.png jako vizuální referenci
- design/strings.json pro veškeré texty (použijte klíče s tečkovou notací jako identifikátory i18n)

Omezení:
- Tailwind CSS pro styly, mapování hodnot tokenů na konfiguraci tématu
- TypeScript
- Žádné pevně zakódované hodnoty barev ani mezer — všechny hodnoty musí pocházet z tokenů

Claude Code bude číst soubory sekvenčně, resolvovat reference tokenů z IR a generovat komponentu, která odráží váš skutečný designový systém, spíše než obecnou aproximaci.

Jednorázové výzvy s --print

Pro CI pipeline nebo skriptované generování kódu použijte neinteraktivní režim --print:

claude --print "$(cat <<'EOF'
Přečtěte design/CONTEXT.md. Poté implementujte design/screens/Home.json jako
src/screens/Home.tsx (React + Tailwind + TypeScript).
- Všechny tokeny z design/tokens.json
- Všechny řetězce z design/strings.json s klíči s tečkovou notací
- Vizuální reference: design/screens/Home.png
- Názvy komponent z design/components/inventory.json
EOF
)"

Heredoc udržuje výzvu čitelnou ve skriptech shellu. --print zapisuje odpověď Claude na stdout, takže ji můžete přesměrovat nebo zachytit podle potřeby.

Claude Code funguje nejlépe, když mu dáte vždy jednu obrazovku. IR rozložení pro jednu obrazovku je již hustý; udržujte relace soustředěné.

Projekty s více obrazovkami — rozumný přístup

Pro soubory s mnoha framy pracujte postupně. Smyčka přes soubory obrazovek:

for screen_json in design/screens/*.json; do
  screen=$(basename "$screen_json" .json)
  echo "Implementuji $screen..."
  claude --print "$(cat <<EOF
Přečtěte design/CONTEXT.md jednou. Poté implementujte design/screens/${screen}.json
jako src/screens/${screen}.tsx. Odkazujte design/screens/${screen}.png
pro vizuální přesnost. Použijte tokeny z design/tokens.json.
Neimplementujte znovu komponenty, které již existují v src/components/.
EOF
)"
done

Instrukce „neimplementujte znovu komponenty, které již existují" je důležitá, když je inventář komponent sdílený. Claude Code může číst design/components/inventory.json k identifikaci již implementovaných komponent a jejich importu místo regenerace.

Zapojení designových tokenů

tokens.json exportovaný figmascope používá W3C-podobnou vnořenou strukturu s poli $value a $type:

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

Požádejte Claude Code, aby jako první krok vygeneroval blok rozšíření tématu tailwind.config.ts z tohoto souboru, než implementuje jakékoliv obrazovky. Tak všechny následné implementace obrazovek mohou konzistentně používat aliasy tokenů Tailwind:

claude --print "Přečtěte design/tokens.json a vygenerujte blok
theme.extend pro tailwind.config.ts. Mapujte tokeny barev na theme.extend.colors,
tokeny mezer na theme.extend.spacing a typografii na
theme.extend.fontFamily / fontSize. Vyvolejte pouze konfigurační objekt."

Viz Export designových tokenů pro AI agenty pro hluboké ponoření do formátu tokenů a záložního odvozování frekvence, které figmascope používá, když Figma Variables nejsou nastaveny.

Zpracování vrstvy řetězců

Každý textový uzel v souboru Figmy dostane slot v strings.json. Klíče používají tečkovou notaci odvozenou z hierarchie framů:

{
  "home.hero.title":        "Vše, co potřebujete",
  "home.hero.subtitle":    "Dodávejte rychleji se strukturovaným kontextem",
  "home.cta.primary":      "Začít",
  "settings.account.heading": "Nastavení účtu"
}

Instruujte Claude Code, aby tyto klíče používal jako identifikátory i18n. Místo pevného zakódování řetězce "Vše, co potřebujete" v JSX, generovaná komponenta volá t('home.hero.title') (nebo ekvivalent vaší knihovny i18n). Soubor zdrojů je již v strings.json — stačí ho importovat nebo zapojit do nastavení i18n.

Pokud figmascope detekuje kolizi — dva uzly, které se hashují na stejný klíč — emituje varování strings-collision v _meta.json a připojí číselnou příponu pro roztřídění. Zkontrolujte _meta.json před zahájením relace, abyste věděli, co očekávat.

Integrace CLAUDE.md

Pokud používáte soubor kontextu projektu CLAUDE.md, přidejte krátkou sekci nasměrující agenta na adresář designu. To dobře zapadá do přístupu popsaného v AI Design Handoff a doplňuje proč se figmascope liší od pluginů Figma inspector.

Přidejte sekci designu takto:

## Kontext designu

Designové tokeny, IR rozložení, referenční rendery a řetězce žijí v `design/`.
Vždy přečtěte `design/CONTEXT.md` před implementací jakékoliv obrazovky.
Hodnoty tokenů jsou v `design/tokens.json` — nikdy nepevně kódujte barvy ani mezery.
Kanonické názvy komponent jsou v `design/components/inventory.json`.

To znamená, že každá relace Claude Code v projektu bude automaticky mít kontext designu jako součást své pracovní znalosti, aniž byste ho museli opakovat v každé výzvě.

Co agent skutečně dělá správně

Se strukturovaným kontextem Claude Code spolehlivě zvládne:

Co stále vyžaduje lidskou kontrolu: stavy interakcí (hover, focus, active) neviditelné ve statických framech Figmy, časování animací a responzivní body zlomu, které nebyly explicitně navrženy v souboru. IR zachycuje statické rozložení; dynamické chování je mimo rozsah.

Použití --dangerously-skip-permissions v kontrolovaných prostředích

Pro automatizované pipeline, kde chcete, aby Claude Code pracoval bez interaktivních výzev ke schválení — například v CI kroku, který generuje základní komponenty po aktualizaci designu — můžete použít --dangerously-skip-permissions. Vhodné pouze v sandboxových prostředích bez produkčních přihlašovacích údajů.

claude --dangerously-skip-permissions --print "$(cat <<'EOF'
Přečtěte design/CONTEXT.md. Vygenerujte základní soubory komponent pro jakékoliv komponenty
v design/components/inventory.json, které ještě neexistují v src/components/.
Použijte formát TypeScript + React funkcionální komponenty. Zahrňte komentář TODO
pro každou komponentu odkazující na příslušný JSON obrazovky.
EOF
)"

V produkčních vývojářských workflow nechte oprávnění interaktivní. Výzvy existují z dobrého důvodu — Claude Code může a bude zapisovat soubory a vy chcete vědět, které, než tak učiní.

Kontrola varování exportu před promptováním

figmascope emituje varování do _meta.json pro podmínky, které mohou ovlivnit kvalitu výstupu. Zkontrolujte je před zahájením relace Claude Code:

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\"Exportované framy: {meta['frameCount']}\")
print(f\"Zdroj tokenů: {meta.get('tokensSource', 'variables')}\")
"

Dvě varování, na která si dát pozor:

Workflow pro Android a iOS

Claude Code není omezen na webové frameworky. Kontextový balíček je agnostický vůči frameworku — IR rozložení a tokeny jsou data, ne CSS. Pro Jetpack Compose:

claude --print "$(cat <<'EOF'
Přečtěte design/CONTEXT.md a design/tokens.json.

Implementujte design/screens/Home.json jako obrazovku Jetpack Compose.
- Mapujte tokeny barev na MaterialTheme ColorScheme
- Mapujte tokeny mezer na hodnoty Dp (odstraňte příponu 'px', použijte .dp)
- Mapujte tokeny typografie na MaterialTheme.typography
- Použijte názvy komponent z design/components/inventory.json jako názvy Composable
- Odkazujte design/screens/Home.png pro vizuální přesnost
EOF
)"

Uzly stack v IR se přirozeně mapují na Column (směr: vertikální) a Row (směr: horizontální) v Compose. Uzly leaf s type: "text" se stávají composables Text; type: "image" se stává Image nebo zástupným symbolem. Viz Jetpack Compose z Figmy pro celý vzor.

Verzování balíčku designu

Zacházejte s adresářem design/ jako s jakoukoliv jinou závislostí projektu. Když se design výrazně změní, re-exportujte z figmascope.dev, odevzdejte a poznamenejte změnu v PR:

# Zkontrolujte, kdy byl balíček naposledy exportován vs. kdy byl soubor Figmy naposledy upraven
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'VAROVÁNÍ: Soubor Figmy byl upraven {delta} po posledním exportu')
else:
    print('Balíček je aktuální')
"

Zastaralý balíček znamená, že agent pracuje z neaktuálního designu. Kontrola časového razítka to zachytí, než strávíte čas na relaci generování kódu, která vychází z překonaných specifikací.