Design s Figma AI (plán Professional) a Claude Cowork — a integrace výsledku do skutečné aplikace

Navrhnout obrazovku je jen polovina práce. Skutečná hodnota vzniká, když se design stane funkční součástí vaší aplikace. S Figma AI v plánu Professional a Claude Cowork jako druhým párem rukou se jeden člověk dostane od hrubého nápadu k zkontrolovanému designu rozdělenému do komponent a poté ke skutečnému kódu — bez obvyklých týdnů přehazování mezi designérem a vývojářem.

1. Co nabízí plán Figma Professional

Plán Professional je první úroveň určená pro skutečnou projektovou práci: sdílené týmové knihovny, neomezené soubory a projekty, přístup do Dev Mode pro předání a AI funkce jako Figma Make, které se měří AI kredity. Přesné limity a kvóty kreditů se v čase mění, proto před plánováním větší zátěže zkontrolujte aktuální ceník. Pro samostatného designéra nebo malý produktový tým tato úroveň obvykle pokryje celý postup z tohoto článku.

• Sdílené knihovny — jediný zdroj pravdy pro barvy, typografii, rozestupy a komponenty.
• Dev Mode — kontrola rozestupů, tokenů a vygenerovaných úryvků bez hádání.
• Figma AI / Figma Make — generování layoutů a interaktivních prototypů z promptu za AI kredity.

2. Krok první: první návrh ve Figma AI

Začněte přesným, ne vágním promptem. Popište produkt, uživatele, obrazovku, klíčové akce a omezení: „Dashboard pro malou kliniku: seznam objednávek, vyhledávání pacientů, karta dnešních tržeb; desktop first, mřížka 8 px, kontrast WCAG AA, klidná modro-neutrální paleta.“ Figma AI vrátí rámce s auto-layoutem, varianty komponent a sadu barev, kterou můžete iterovat. Výstup berte jako návrh: je rychlý a strukturálně správný, ale hierarchie, texty a okrajové případy stále vyžadují lidské rozhodnutí.

3. Krok druhý: Claude Cowork jako recenzent a spolu-designér

Claude Cowork funguje nejlépe, když má kontext. Dejte mu snímky obrazovky nebo exporty rámců, pravidla značky a uživatelský příběh a požádejte o strukturovanou kritiku: problémy s přístupností, nekonzistentní rozestupy, chybějící stavy prázdný/chyba/načítání, nejasné výzvy k akci a texty, které neodpovídají publiku. Umí také navrhnout mikrotexty, pojmenování komponent a variant a sepsat akceptační kritéria. Změny provádíte ve Figmě sami — Cowork urychluje myšlení, poslední slovo máte vy.

• Požádejte o seznam s prioritami (blokující / důležité / příjemné), ne o zeď názorů.
• Požádejte o kontrolu všech stavů každého interaktivního prvku.
• Požádejte o API komponent, které by očekával: props, varianty, velikosti.

4. Krok třetí: připravte soubor pro kód

Kvalita generovaného kódu závisí téměř úplně na tom, jak čistý je soubor ve Figmě. Před předáním: převeďte barvy, fonty a rozestupy na proměnné (design tokeny); opakující se bloky změňte na komponenty s variantami; všude používejte auto-layout místo ručně umístěných vrstev; vrstvám dávejte smysluplné názvy. Takto vytvořený soubor se téměř 1:1 mapuje na React komponenty a třídy Tailwindu. Soubor plný odpojených skupin a magických čísel vytvoří kód, který nikdo nechce udržovat — ať ho napsal člověk, nebo model.

5. Krok čtvrtý: integrace do aplikace

Existují dvě praktické cesty. První: připojit Figma MCP server k vašemu kódovacímu asistentovi — přečte konkrétní rámec, jeho proměnné i strukturu komponent a vygeneruje kód, který znovu využívá vaše existující komponenty místo vymýšlení nových. Druhá je ruční: otevřete rámec v Dev Mode, přenesete tokeny do tématu Tailwindu (nebo CSS proměnných) a komponenty postavíte sami, s Claude jako programátorem do dvojice. V obou případech platí stejné pravidlo: nejdřív tokeny, potom komponenty, nakonec obrazovky.

Poté ověřte. Spusťte aplikaci, porovnejte ji s rámcem ve Figmě na několika breakpointech, zkontrolujte ovládání klávesnicí a kontrast a přidejte testy pro interaktivní části. Vygenerovaný kód je výchozí bod; funkcí se stává až po revizi, napojení na reálná data a otestování.

6. Časté chyby, kterým se vyhnout

Týmy zakopávají nejčastěji na stejných místech. Vyhněte se jim a postup zůstane rychlý.

• Prompt na celý produkt najednou — generujte vždy jednu obrazovku nebo tok.
• Přeskočení tokenů a komponent — kód bude zadrátovaný a nepůjde tematizovat.
• Důvěra ve vygenerovaný kód bez revize — vždy kontrolujte přístupnost, bezpečnost a práci s daty.
• Ignorování limitů kreditů — iterace náročné na AI plánujte podle kvóty svého plánu.

Závěr

Figma AI dává rychlost, Claude Cowork kritický druhý názor a disciplinovaný soubor ve Figmě kód, který čistě zapadne do vaší aplikace. Společně umožňují jednomu člověku nebo malému týmu dodávat vybroušená rozhraní mnohem rychleji — pokud za rozhodnutí, revizi a kvalitu zůstává odpovědný člověk. Pokud chcete pomoci s nastavením tohoto postupu pro váš produkt, ozvěte se.