Znáš ten kolotoč. Klient neví, co chce. Grafik neví, co si klient představuje. Týdny letí na komunikaci tam a zpátky, než se vůbec začne něco tvořit. Co kdyby ale klient hned na začátku grafikovi poslal hotový návrh ve Figmě, který vypadá přesně tak, jak chce? A grafik mohl tento návrh přebrat, vylepšit a rovnou pokračovat. Přesně to umožňuje Figma MCP v kombinaci s Claude Code. A v tomto článku ti ukážu, jak na to.
Krok 1: Jak celý proces funguje
Celý flow je překvapivě jednoduchý a dá se shrnout do tří kroků.
Nejprve popíšeš Claude Codovi, co chceš vytvořit. Klidně česky, klidně svými slovy. Claude Code na základě tvého zadání vytvoří dočasnou HTML stránku, tedy vizuální návrh tvého designu. A nakonec tento návrh přes MCP server automaticky přenese do Figmy.
MCP (Model Context Protocol) funguje jako most mezi AI a Figmou. Je to standardizovaný protokol, přes který si AI nástroje povídají s externími aplikacemi. V praxi to znamená, že Claude Code může přímo vytvářet a upravovat prvky ve tvém Figma souboru, aniž bys musel cokoliv kopírovat ručně.
Díky tomuto propojení Claude Code nejen design vytvoří, ale rovnou ho vloží do Figmy jako plně editovatelné komponenty. To znamená, že výsledek není statický obrázek ani screenshot. Je to plnohodnotný design, do kterého může kdokoliv kliknout, upravit texty, přesunout prvky nebo změnit barvy. Grafik může na výstupu okamžitě pokračovat ve svém běžném workflow.
Krok 2: Co budete potřebovat
Celý stack je minimalistický. Nepotřebuješ grafika, nepotřebuješ programátora, žádný Photoshop ani další nástroje.
Tady je kompletní seznam:
- Claude Code s aktivním předplatným (Claude Pro nebo Team)
- Figma desktop app (stačí free tier)
- Figma MCP server (nastavíš jednou, funguje pořád)
- Nápad, co chceš vytvořit
To je všechno. Dva nástroje a tvoje představa. Žádné další licence, žádné složité toolchainy.
Pokud ještě nemáš Claude Code nainstalovaný, podívej se na můj tutoriál. A pokud nevíš, co je Figma, je to profesionální nástroj pro design webů a aplikací, který používá většina designérů na světě. Na rozdíl od Photoshopu je přímo stavěný pro webový design a týmovou spolupráci.
Krok 3: Jak nastavit Figma MCP
Nastavení zabere pár minut. Tady je postup krok za krokem.
Ve Figmě:
- Otevři Figma desktop app (doporučuji desktop verzi, funguje spolehlivěji než online)
- Vytvoř nový design projekt a pojmenuj ho (třeba "Domovská stránka")
- Klikni na Share a vyber Copy link, aby se ti zkopíroval odkaz na Figma soubor
V Claude Code:
Nejjednodušší způsob je zadat v terminálu:
claude mcp add --transport http figma https://mcp.figma.com/mcpPak otevři Claude Code, napiš /mcp a vyber Figma pro autentizaci přes prohlížeč. Po úspěšném propojení uvidíš Figma server jako connected.
Tip pro lepší výsledky: Vytvoř si dedikovanou složku pro Figma projekty. Do ní můžeš přidat Frontend Skill od Anthropiku, který výrazně zlepší vizuální kvalitu výstupů. Claude pak design nejen vytvoří, ale vytvoří ho profesionálně.
Já osobně doporučuji Figma for Desktop, protože mi přijde, že propojení funguje spolehlivěji než s online verzí. Pokud bys nevěděl jak MCP server nainstalovat, v AI Kruh komunitě najdeš konkrétní návod krok za krokem.
Důležitý detail: Claude Code neumí vytvářet nové Figma projekty. Projekt musíš vytvořit ručně ty a pak Claudovi předat link. Ale to je jediná věc, kterou děláš manuálně. Zbytek obstará AI.
Krok 4: Jak zadat design Claude Codovi
Tady začíná ta zábava. A tady je i největší prostor pro ovlivnění kvality výstupu.
Zapni Plan Mode. To je klíčový krok, který většina lidí přeskakuje. V Plan Mode Claude plánuje, ale nic nedělá. Sepíše si postup, zeptá se na detaily a teprve po tvém odsouhlasení začne pracovat. Boris Černý, tvůrce Claude Code, o tom říká, že je to v podstatě klasický Claude s jednou důležitou instrukcí na pozadí: "nedělej žádnou práci."
Právě v plánovací fázi můžeš rapidně zvýšit kvalitu výstupu tím, že strávíš dostatek času specifikací. Většina lidí napíše jednořádkový prompt, odsouhlasí první plán a pak jsou překvapení, že výstup není dokonalý. Přitom stačí věnovat 5 minut tomu, aby Claude pochopil, co přesně chceš.
Příklad promptu:
Ahoj, prosím vytvoř mi novou domovskou stránku pro freelancera Vojtěch Bruk. Fotky využij z momentálního webu vojtechbruk.cz. Chci, aby stránka působila moderně, byla v černé barvě, aby to vypadalo podobně jako produkty Apple. Design zrovna udělej ve Figmě pomocí MCP serveru. Link na Figmu najdeš zde: [link]
Claude se tě pak zeptá na konkrétní věci. Chceš monochromatický design, nebo s barevným akcentem? Jaká šířka frameu? Které sekce má homepage obsahovat? Odpověz a nech ho pracovat.
Čím konkrétnější zadání, tím lepší výstup. Ale i s líným promptem, jako v příkladu výše, získáš něco, na čem se dá stavět.
Co konkrétně specifikovat:
- Barvy a vizuální styl (moderní, minimalistický, tmavý, Apple-like)
- Šířku frameu (standardně 1440 px pro desktop)
- Které sekce má stránka obsahovat (hero, služby, recenze, CTA, FAQ)
- Odkud má Claude čerpat obsah (odkaz na existující web, texty, fotky)
- Tón a cílovou skupinu
Claude Code nejprve udělá první část plánu a pak se tě zeptá na upřesnění. Odpovíš, odsouhlasíš plán, a teprve potom začne reálně tvořit. Tento proces je záměrný. Strávit 5 minut v plánovací fázi ti ušetří 30 minut na pozdějších úpravách.
Krok 5: Jak iterovat a upravovat design
První výstup málokdy bude dokonalý. A to je v pořádku, protože úpravy jsou rychlé.
Když se podíváš do Figmy, uvidíš hotový design. Všechno jsou Figma komponenty. Můžeš do čehokoliv kliknout, upravit to, přesunout. Pokud bys byl grafik, můžeš rovnou všechny prvky konfigurovat podle svého.
Tohle je zásadní rozdíl oproti klasickým šablonám. Claude Code si informace vytáhne přímo z tvého webu. Recenze v designu jsou tvoje skutečné recenze od klientů. Počet hodnocení na Google odpovídá realitě. Služby jsou přesně ty, které nabízíš. Dokonce i texty o tobě dávají smysl, protože Claude přečetl tvůj web a pochopil, čím se zabýváš. Nic si nevymýšlí. Nepotřebuješ připravovat žádné podklady, stačí odkaz na tvůj web.
Pro úpravy stačí napsat Claude Codovi, co se ti nelíbí. Česky, svými slovy:
Napravo máme podivný bílý pruh, tak se toho zbav. V hero sekci nám chybí fotka, tak tam tu fotku přidej.
Nebo:
Uprav sekci "Co říkají klienti" tak, aby tam bylo pět karet vedle sebe a tři řádky pod sebou.
Nemusíš upravovat jen rozložení. Klidně můžeš měnit barvy, přidávat sekce, odebírat je, nebo kompletně předělat jednu část designu. AI je dostatečně chytrá na to, aby tvůj "hloupý" prompt přeložila do profesionální změnu.
Občas se stane, že se design ve Figmě nějak podivně zobrazí. Třeba přeteče mimo frame, nebo je tam nadbytečný prázdný prostor. Protože je to Figma, můžeš to klidně opravit ručně. Stačí chytit okraj frameu a zúžit ho. Nemusíš kvůli každé drobnosti volat zpátky AI.
Reálné workflow pak vypadá tak, že popíšeš zadání, necháš Claude vytvořit první verzi, uděláš 2 až 3 kola úprav přes prompty, a výsledek předáš grafikovi. Grafik dostane profesionální Figma soubor, ve kterém jsou všechny prvky jako samostatné komponenty, a může na něm okamžitě pokračovat.
Proč je to lepší než Canva
Pokud jsi doteď prototypoval v Canvě nebo v Malování, tohle je úplně jiná liga.
Editovatelné komponenty vs statické obrázky. V Canvě vytvoříš hezký obrázek. Ve Figmě přes MCP dostaneš plnohodnotný design, kde je každý element samostatný objekt. Grafik může tento design přebrat a pokračovat na něm, aniž by musel začínat od nuly.
Týmová spolupráce. Ve Figmě jdou psát komentáře. Každý člen týmu může napsat k designu, co ho napadá. Klient může přímo ukázat prstem na element, který chce změnit. Tohle v Canvě takhle nefunguje.
Rychlost iterací. Změny buď udělá grafik přímo ve Figmě, nebo zase použiješ Claude Code. V obou případech máš výsledek za minuty, ne za dny.
Profesionální output. Design vytvořený přes Claude Design a Figma MCP vypadá profesionálně. Žádné "vypadá to z Canvy" komentáře od kolegů.
Škálovatelnost. Potřebuješ navrhnout 5 landing pages pro různé kampaně? S Canvou budeš kopírovat šablony a ručně měnit texty. S Figma MCP popíšeš každou stránku Claude Codovi a máš hotovo za zlomek času. A všechny budou ve Figmě, kde je grafik může centrálně spravovat.
Závěr
Figma MCP s Claude Code mění pravidla hry pro každého, kdo někdy čekal dny na grafický návrh.
Co konkrétně získáš:
- Hotový design za minuty místo dnů. Od nápadu po první Figma návrh trvá typicky 15 až 30 minut.
- Profesionální Figma výstup. Grafik může na výstupu okamžitě pokračovat, protože vše jsou editovatelné komponenty.
- Lepší týmová spolupráce. Komentáře, sdílení, verzování. Všechno přímo ve Figmě.
- Instantní iterace. Změny popíšeš česky a máš je za minuty. Žádný nekonečný ping-pong přes email.
Důležité je říct si na rovinu: nejsem grafik. Kdyby tenhle návrh dostal profesionální grafik, dokázal by ho obohatit a přizpůsobit tak, aby ještě lépe splnil cíle, které od grafiky máme. Figma MCP nenahrazuje grafika, ale dramaticky zkracuje cestu od nápadu k prvnímu mockupu.
Minimálně na prototypování, na situace, kde si nejsi jistý, jestli je to dostatečně dobrý důvod na to volat grafika, je tenhle setup skvělý.
Pokud tě to zaujalo a chceš přesně toto zprovoznit pro svůj byznys, přijď do AI Kruh komunity. Pomůžeme ti se setupem a sdílím přesně ten projekt, jak ho mám nastavený já.
Často kladené otázky
Potřebuji umět programovat, abych mohl Figma MCP používat?
Ne. Celé ovládání probíhá přes textové příkazy v Claude Code. Píšeš česky, co chceš vytvořit nebo změnit. Žádný kód psát nemusíš. Jediný "technický" krok je počáteční nastavení MCP serveru, které je jednorázové a zabere pár minut.
Kolik stojí Figma MCP?
Samotný Figma MCP server je aktuálně zdarma (beta fáze). Figma má free tier, který na prototypování stačí. Potřebuješ ale aktivní předplatné Claude Code (Claude Pro za $20/měsíc nebo Claude Team za $25/měsíc na uživatele). Celkové náklady jsou tedy kolem 500 Kč měsíčně.
Nahradí Figma MCP grafika?
Ne, a to ani není cíl. Figma MCP ti umožní vytvořit kvalitní prototyp, který grafik přebere a dotáhne do produkční kvality. Ušetříš čas na komunikaci a grafik dostane jasný výchozí bod místo slovního popisu na papíře. Představ si to jako rozdíl mezi tím říct "chci moderní tmavý web" versus ukázat hotový návrh a říct "toto chci, jen vylepši typografii a dolaď barvy."
Funguje to i v češtině?
Ano. Claude Code rozumí česky bez problémů. Můžeš zadávat prompty, popisovat úpravy i komunikovat kompletně v češtině. Výstupní design bude obsahovat české texty přesně tak, jak potřebuješ.
Jak kvalitní jsou výstupy?
Na prototypování a první návrhy plně dostačující. Výstup jsou skutečné Figma komponenty, ne screenshoty. Občas se stane, že zarovnání není dokonalé nebo že přetéká obsah mimo frame. Tyto drobnosti buď opravíš dalším promptem, nebo přímo ve Figmě. Pro finální produkční design doporučuji nechat návrh projít přes grafika.
Mohu použít Figma MCP i pro mobilní design?
Ano. Stačí v promptu specifikovat, že chceš mobilní verzi (šířka frameu 375 px nebo 390 px). Claude Code vytvoří responsive design přizpůsobený mobilním zařízením. Můžeš si nechat udělat desktop i mobilní verzi současně do jednoho Figma projektu.
