Předávání designu bylo vyřešeným problémem pro lidské vývojáře přibližně od roku 2016. Zeplin, InVision Inspect, Avocode, Figma Dev Mode — všechny dělají totéž: dávají vývojářům webové rozhraní, kde mohou kliknout na uzel a přečíst jeho vlastnosti.

Tento workflow se zcela rozpadá, když je „vývojář" AI agent.

Tento článek vysvětluje proč, co agenti skutečně potřebují a jak strukturovat workflow předávání, který produkuje správný kód místo přibližného kódu. Řešením je figmascope — prohlížečový nástroj, který exportuje strukturovaný kontextový balíček přímo z vašeho souboru Figma. Pro podrobné workflows viz Figma do Claude Code nebo Figma do Cursoru.

Předpoklad předávání designu

Každý nástroj pro předávání vytvořený před rokem 2023 dělá stejný implicitní předpoklad: na druhém konci je člověk, který kliká, čte hodnoty a dělá úsudkové rozhodnutí. Úkolem nástroje je odhalit informace dostatečně jasně, aby mohl zdatný vývojář pracovat bez neustálého přepínání kontextu zpět k designérovi.

Tento předpoklad je zabudován do celého UX těchto nástrojů:

Nic z toho není špatně. Je to správné pro workflow lidského vývojáře. Je to jen špatné rozhraní pro agenta.

Co agenti od designu skutečně potřebují

AI agent, který dostane designový úkol, potřebuje:

  1. Specifikaci, kterou čte před vším ostatním — omezení, rozsah, konvence pojmenování tokenů, poznámky k verzi. Ne implikováno najetím myší nad panel; napsáno explicitně.
  2. Typovaný slovník tokenů — ne surové hex hodnoty a pixelová čísla, ale pojmenované, typované tokeny s jejich hodnotami. Agent potřebuje vědět, že #d96a3a je color.accent, aby mohl generovat správné názvy tříd Tailwind nebo CSS vlastní vlastnosti.
  3. Strom rozložení celé obrazovky — hierarchie každého uzlu, jejich vztahy rozložení, jejich velikosti, jejich reference tokenů. Ne jeden uzel najednou na vyžádání; celý strom v paměti.
  4. Konsolidované řetězce — veškerý textový obsah, normalizovaný, s klíči zdrojů. Ne rozptýlený po jednotlivých uzlech.
  5. Vizuální pravda — referenční render, se kterým může agent porovnat svůj výstup. Snímek obrazovky designu ve 2×.
  6. Názvy komponent — kanonické identifikátory, které by měl generovaný kód používat, ne vymyšlené názvy.

Tradiční nástroje pro předávání neposkytují žádné z těchto věcí ve formě, kterou agent může použít. Aplikace figmascope je všechny produkuje v jediném zipu — vložte URL Figmy, získejte balíček. Žádné nahrávání, žádný backend. Formát tokenů je podrobně popsán v Export designových tokenů pro AI agenty.

Proč snímky obrazovky selhávají

Nejrychlejší alternativa, kterou lidé zkoušejí: exportovat PNG z Figmy a předat jej agentovi s výzvou jako „implementuj tuto obrazovku." Agent produkuje kód. Někdy vypadá blízko. Ale:

Každá z těchto chyb je individuálně malá. Dohromady se sčítají do komponenty, která potřebuje výraznou manuální opravu — což poráží většinu úspor času z používání agenta vůbec.

Podrobný rozbor s příklady viz proč snímky obrazovky selhávají pro AI codegen.

Snímek obrazovky říká agentovi, jak design vypadá. Strukturovaný kontext mu říká, čím design je.

Tradiční nástroje pro předávání, zhodnocené

Zeplin

Primárním rozhraním Zeplinu je webová aplikace, kde vývojáři kontrolují designy uzel po uzlu. Má funkci „Styleguide", která agreguje barvy a typografii ze souboru — nejblíže exportu tokenů. Neexportuje strojově čitelné stromy rozložení. Jeho funkce „Connected Components" propojuje komponenty Storybook s rámci Figma, což je užitečné pro dokumentaci, ale nepomáhá agentovi generovat nový kód.

Figma Dev Mode

Nativní odpověď Figmy na předávání. Panel kódu generuje CSS z vybraných uzlů a zobrazuje názvy proměnných, když jsou nastaveny. Dobře navržen pro lidské vývojáře. Nepodporuje export na úrovni souboru, negeneruje stromy rozložení a jeho úryvky kódu jsou pouze CSS (ne tokenů nezávislých na frameworku). Vyžaduje Dev Mode seat.

Avocode

Avocode byl získán Abstract a poté ukončen v roce 2022. Zmiňuji ho, protože se stále objevuje ve výsledcích vyhledávání pro „nástroje pro předávání designu" a přivádí část srovnávacích návštěv. Již není dostupný.

Locofy, Builder.io, Anima

Tyto nástroje se pokoušejí generovat skutečný framework kód (React, Next.js, HTML) přímo z Figma designů. Jsou blíže k problémovému prostoru — chápou, že výstupem musí být kód, ne jen panel vlastností. Ale generují kód, který nasadíte, ne kontext, který předáte agentovi. Rozdíl záleží: nemůžete se zeptat „Implementuj obrazovku Nastavení, znovu použijte komponentu UserAvatar, kterou jsem již vytvořil" když nástroj sám generuje kód. Tuto otázku Claude Code nebo Cursoru můžete položit, když jste jim dali strukturovaný kontext.

Viz figmascope vs Locofy a figmascope vs Builder.io pro podrobná srovnání.

Jak vypadá předávání připravené pro agenta

Předávání připravené pro agenta má tři vlastnosti, které ho odlišují od tradičního předávání:

1. Je to souborový artefakt, ne UI

Artefakt předávání je verzovaný soubor (nebo sada souborů), který žije v repozitáři vedle kódu. Ne sdílený odkaz, který vyžaduje přihlášení. Ne panel ve webové aplikaci. Adresář design/ se soubory JSON, PNG a Markdown.

To má několik důsledků:

2. Používá typovaná data, ne renderovaný text

Designové tokeny v tokens.json jsou typované — $type: "color", $type: "dimension" — ne jen řetězce v tabulce Markdownu. Layout IR v screens/*.json má explicitní druhy uzlů (stack, overlay, absolute, leaf) a reference tokenů pomocí notace $ref. Řetězce v strings.json mají klíče tečkové notace, ne jen lidsky čitelné štítky.

Typovaná data znamenají, že agent může o nich uvažovat programově: „všechny uzly s background.$ref == color.surface používají stejnou barvu pozadí," ne „všechny uzly, které vypadají jako na stejném pozadí."

3. Zahrnuje specifikační dokument, který agent čte jako první

CONTEXT.md je smlouva mezi designérem a agentem. Popisuje:

Tradiční předávání nemá ekvivalent. Dev Mode má pole „poznámky vývojáře" na rámec, ale je psáno ad-hoc designérem bez struktury. CONTEXT.md je generován konzistentně ze skutečného obsahu souboru.

Workflow předávání krok za krokem

  1. Designér označí rámce jako připravené — ve Figmě designér označí rámce, které jsou připraveny k implementaci (konvence pojmenování, štítek „připraveno", cokoli váš tým používá).
  2. Vývojář spustí figmascope — vložte URL souboru a PAT na figmascope.dev, klikněte na export, stáhněte zip.
  3. Rozbalte do design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Commitněte design/ do repozitáře — balíček je artefakt předávání. PR zahrnuje jak bundle designu, tak implementaci.
  5. Agent implementuje — nasměrujte Claude Code nebo Cursor na design/CONTEXT.md a příslušný JSON obrazovky. Agent generuje kód, který používá hodnoty tokenů, názvy komponent a řetězce z balíčku.
  6. Kontrola a iterace — vývojář kontroluje oproti screens/*.png, zaznamenává mezery, upřesňuje výzvy.

Když se design změní, opakujte od kroku 2. Časové razítko _meta.json říká, kdy byl balíček naposledy generován relativně k tomu, kdy byl soubor Figma naposledy upraven — jednoduchá kontrola čerstvosti.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Co se nemění

Předávání připravené pro agenta nenahrazuje kontrolu designu. Agent implementuje ze strukturovaného kontextu; člověk stále ověřuje výstup. Interakční stavy, animace, responzivní chování, přístupnost — tyto věci vyžadují úsudek, který agent může přibližovat, ale nemůže zaručit pouze ze statických designových dat.

Strukturovaný kontext také nenahrazuje konverzaci designér-vývojář. Pokud je token pojmenován nejednoznačně, nebo se komponenta chová jinak napříč breakpointy, než statický rámec naznačuje, je potřeba konverzace. CONTEXT.md zachycuje, co je v souboru; nededukuje, co designér zamýšlel pro případy, které soubor neřeší.

Co se mění: implementace statických rozvržení obrazovek ze stabilního designu přechází z hodinového manuálního procesu na workflow výzva-a-kontrola. Agent zpracovává mechanický překlad; vývojář zpracovává úsudkové rozhodnutí.

Kontrolní seznam: je vaše předávání designu připraveno pro agenta?

Pokud většina z nich chybí, agent produkuje kód, který vyžaduje více oprav než začít od nuly s dobrým kontextem. Balíček, který figmascope generuje, splňuje všechny v jednom exportu. Navštivte blog figmascope pro případové studie a hlubší rozbory každé položky kontrolního seznamu, nebo viz Alternativa Figma inspektoru pro přímé srovnání s Dev Mode a pluginy.