AI v Cursoru dokáže napsat hodně UI kódu. Co nedokáže, je číst váš soubor Figmy. Vložíte snímek obrazovky a hádat se — špatné mezery, špatné hodnoty barev, vymyšlené názvy komponent. Problém není model. Chybí strukturovaný kontext.

figmascope překlenuje tuto mezeru. Exportuje soubor Figmy jako zip balíček — designové tokeny, stromy rozložení pro každou obrazovku, referenční rendery, inventář komponent, UI řetězce — vše, co jazykový model potřebuje k generování přesného kódu, namísto plausibilně vypadajícího kódu. Hlavní aplikace běží zcela ve vašem prohlížeči bez backendu nebo nahrávání.

Tato stránka prochází celým workflow od URL Figmy po generování kódu v Cursoru. Pokud používáte Claude Code místo Cursoru, viz Figma do Claude Code pro workflow specifický pro Claude. Pro širší pohled na to, co dělá handoff připraveným pro agenty, viz AI Design Handoff.

Co je v kontextovém balíčku

Když spustíte figmascope proti souboru Figmy, dostanete .zip obsahující:

Nic se nenahrává. Váš Personal Access Token žije pouze v paměti prohlížeče a odesílá se pouze do api.figma.com. Zip je sestavován na straně klienta a předán ke stažení do vašeho prohlížeče.

Krok 1 — Získejte Figma Personal Access Token

Přejděte na Figma → Nastavení účtu → Personal Access Tokens a vytvořte token s rozsahem Obsah souboru: pouze pro čtení. To je minimum, které je vyžadováno.

Token nikdy neopustí vaši relaci prohlížeče; figmascope ho odesílá v hlavičce X-Figma-Token na požadavky do api.figma.com a nikam jinam. Viz Zabezpečení PAT a figmascope pro úplný model hrozeb.

Krok 2 — Export kontextového balíčku

  1. Otevřete figmascope.dev ve svém prohlížeči.
  2. Vložte URL souboru Figmy (např. https://www.figma.com/file/ABC123/MujDesign).
  3. Vložte svůj Personal Access Token.
  4. Klikněte na Exportovat kontextový balíček.
  5. Na váš počítač se stáhne figmascope-<fileKey>.zip.

Rozbalte ho do svého projektu. Rozumné umístění je složka design/ v kořenu repozitáře:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Krok 3 — Otevřete projekt v Cursoru

Otevřete složku projektu v Cursoru normálně. Adresář design/ je nyní součástí pracovního prostoru a indexer Cursoru ho zahrne.

Než budete promtovat model, přečtěte si jednou sami design/CONTEXT.md. Říká vám, které framy byly exportovány, jaké je schéma pojmenování tokenů a uvádí veškerá varování emitovaná během exportu (např. layout-mode-none-inferred pro framy, kde Figma hlásila žádný auto-layout). Tato varování jsou stejná, se kterými se setká váš agent.

Krok 4 — Napište efektivní výzvu pro Cursor

Nejjednodušším výchozím bodem je referenční výzva, kterou můžete vložit do Cursor Chat:

Nejprve přečtěte design/CONTEXT.md, poté implementujte obrazovku Home.

Použijte:
- design/tokens.json pro všechny hodnoty barev, mezer a typografie
- 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 zdrojů jako identifikátory i18n)
- design/components/inventory.json pro shodu názvů komponent

Cíl: React + Tailwind CSS. Mapujte hodnoty tokenů na položky konfigurace Tailwind spíše
než pevně kódujte hex hodnoty. Použijte názvy komponent z inventory.json jako
názvy souborů komponent (PascalCase).

Cursor Composer bude dodržovat omezení CONTEXT.md, vyhledá strom rozložení v Home.json, stáhne mezery z tokens.json a vyprodukuje kód, který odpovídá vašemu designovému systému spíše než ho aproximuje.

Model nezná váš design. Ví to, co mu dáte. Strukturovaný JSON porazí snímek obrazovky pokaždé.

Krok 5 — Mapujte tokeny na konfiguraci frameworku

Exportovaný tokens.json používá W3C-podobný vnořený tvar:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Pro Tailwind požádejte Cursor, aby vygeneroval blok theme.extend pro tailwind.config.js přímo z tokens.json. Viz Export designových tokenů pro AI agenty pro hluboké ponoření do formátu tokenů a odvozování frekvence. Struktura tokenů je dostatečně plochá, aby ji bylo možné procházet v jediném Node skriptu, pokud chcete automatizaci:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Krok 6 — Zpracování projektů s více obrazovkami

Každý frame v souboru Figmy se stane screens/<NázevFramu>.json a odpovídajícím .png. Pro projekt s tuctem obrazovek procházejte je postupně. Cursor Composer zvládá dobře jednu obrazovku na relaci; dejte mu JSON obrazovky a PNG jako explicitní @file reference:

@design/screens/Settings.json
@design/screens/Settings.png

Implementujte obrazovku Settings. Dodržujte stejnou strukturu komponent
jako již implementovaná obrazovka Home. Použijte tokeny z design/tokens.json.

Inventář komponent (design/components/inventory.json) vám pomůže vyhnout se drift názvů napříč obrazovkami — každá komponenta odkazovaná v JSON obrazovky má kanonické id a name v inventáři. Pokud generujete sdílenou knihovnu komponent, použijte tyto názvy jako zdroj pravdy.

Jak IR vypadá v praxi

JSON pro každou obrazovku používá rekurzivní strukturu uzlů. Zjednodušený příklad pro komponentu karty:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Reference tokenů používají řetězce $ref, které odpovídají klíčům v tokens.json. Model je může resolvovat bez samostatného kroku vyhledávání. Viz per-screen IR vysvětlen pro úplné schéma uzlů.

Udržování kontextu aktuálního

Soubory designu se mění. Dobrý zvyk: re-spusťte figmascope pokaždé, když má design výraznou revizi, odevzdejte aktualizovanou složku design/ a poznamenejte verzi v popisu PR. _meta.json obsahuje časové razítko a pole lastModified souboru Figmy, takže můžete porovnat, kdy byl balíček naposledy regenerován versus kdy byl soubor naposledy dotýkán.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Pokud je warnings neprázdné, řešte je před předáním kontextu agentovi. Běžná varování: strings-collision (dva uzly se stejným slugem přeložily na stejný klíč) a layout-mode-none-inferred (kontejner bez explicitního auto-layoutu, kde figmascope odvodil rozložení z pozic dětí).

Běžné workflow v Cursoru

Aktualizace na základě diff

Když má design drobnou revizi — řekněme hodnota mezery se změnila z spacing.4 na spacing.6 u komponenty karty — můžete požádat Cursor, aby aplikoval pouze delta místo regenerace celé obrazovky:

Soubor design/tokens.json byl aktualizován. spacing.4 je nyní 24px místo 16px.
Najděte všechny komponenty používající spacing.4 a aktualizujte je. Nedotýkejte se ničeho jiného.

To funguje, protože vaše generované komponenty odkazují názvy tokenů jako Tailwind třídy (gap-spacing-4) spíše než surové hodnoty pixelů. Změna tokenu je hledání a nahrazení, ne přepracování designu.

Přidání nové obrazovky do existující kódové základny

Když přidáváte obrazovku N do kódové základny, která již má implementovány obrazovky 1 až N-1, klíčovým přidáním výzvy je uzemnění agenta ve stávající knihovně komponent:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implementujte obrazovku Checkout. Znovu použijte existující komponenty z src/components/
kdekoli název komponenty odpovídá design/components/inventory.json.
Vytvářejte nové soubory komponent pouze pro komponenty, které ještě nejsou implementovány.
Použijte design/tokens.json pro všechny hodnoty tokenů.

Inventář komponent je most mezi názvem komponenty designu a názvem souboru v kódové základně. Bez něj si agent vymyslí importní cesty a vytvoří duplicitní komponenty.

Generování základny designového systému

Před implementací jakýchkoliv obrazovek použijte kontextový balíček k vygenerování základny designového systému: konfigurace tokenů, komponenta palety barev a základní styly typografie. To ukotvuje všechny následné implementace obrazovek na stejný základ:

Přečtěte design/tokens.json a design/CONTEXT.md.

Vygenerujte:
1. Blok theme.extend pro tailwind.config.ts ze všech tokenů
2. src/styles/tokens.css s CSS vlastními vlastnostmi pro stejné tokeny
3. src/components/foundations/ColorPalette.tsx zobrazující všechny tokeny barev
4. src/styles/typography.css s třídami tokenů typografie

Pojmenujte všechny třídy a proměnné pomocí cest klíčů tokenů
(např. --color-accent, text-ink, bg-surface).

Jakmile tato základna existuje, každá implementace obrazovky na ni může odkazovat. Agent nebude znovu odvozovat barvy z designu v každé relaci — bude používat již vygenerované třídy.

Omezení, která je třeba znát předem

Kontextový balíček figmascope zachycuje statickou strukturu. Několik věcí, které nemůže reprezentovat:

Soubor CONTEXT.md poznamenává, které framy byly vyloučeny a proč, takže agent se nepokusí implementovat něco, co bylo záměrně mimo rozsah.