MCP pre dizajnérov: Pripojenie Figma, tokenov a kódu k Claude a Cursor
Čo znamená Model Context Protocol pre dizajnérov, ktoré návrhárske nástroje majú servery MCP, ako ich pripojiť k Claude Code a Cursor a na čo si dať pozor.
Core Takeaway
MCP (Model Context Protocol) je otvorený štandard, ktorý umožňuje nástrojom AI, ako sú Claude Code a Cursor, pripojiť sa k inému softvéru. Pre dizajnérov to znamená, že nástroj na kódovanie AI dokáže čítať skutočné návrhové údaje, ako sú rámce, komponenty, premenné a tokeny, namiesto hádania zo snímok obrazovky, a v niektorých nástrojoch môže zmeny zapisovať späť. Všetky Figma, Penpot a ExodeUI ponúkajú servery MCP.
Čo je MCP, jednoducho povedané
Oficiálna dokumentácia MCP ho popisuje ako open-source štandard na pripojenie aplikácií AI k externým systémom, ako sú súbory, databázy a nástroje. Jedným z vlastných príkladov je Claude Code generovanie celej webovej aplikácie z dizajnu Figma. Pre dizajnéra je dôležitá táto časť: AI už nemusí hádať, ako vyzerá váš návrh. Môže sa spýtať priamo návrhového nástroja.
Dizajnové nástroje so servermi MCP už dnes
Od októbra 2026:
- Figma: Server MCP, ktorý agentom poskytuje kontext dizajnu (premenné, komponenty, rozloženie) na generovanie kódu a môže písať natívny obsah späť na plátno. Figma ho uvádza na štartovacích a platených plánoch; písanie na plátno je počas beta verzie bezplatné.
- Penpot: bezplatný otvorený server MCP, ktorý funguje s akýmkoľvek klientom MCP vrátane Claude, Cursor, VS Code a OpenAI Codex a môže byť hostený samostatne.
- ExodeUI (my to robíme): server MCP, ktorý umožňuje nástrojom na kódovanie AI vytvárať a upravovať interaktívne animácie so stavmi a fyzikou pružiny.
- Dizajn tokenov: ak vaše tokeny žijú v úložisku ako JSON, nástroj na kódovanie AI ich už dokáže prečítať ako súbory; dedikovaný server je potrebný len pre tokeny uložené v nástroji.
Ako to dizajnéri v skutočnosti využívajú
Najbežnejšie pracovné postupy sú skôr praktické ako magické. Vývojári vyberú rámec a požiadajú AI, aby ho implementovala s existujúcou knižnicou komponentov. Dizajnéri žiadajú AI, aby skontrolovala, či sa kódovaná obrazovka zhoduje s dizajnom a zoznamom rozdielov. Tímy žiadajú AI, aby aktualizovala tokeny komponentu v rámci kódovej základne. A dizajnéri čoraz častejšie používajú AI na navrhovanie variantov priamo na plátne a potom ich ručne upravujú.
Pripojenie k serveru
Claude Code pridáva servery pomocou príkazu claude mcp add alebo prostredníctvom súboru .mcp.json v projekte a podporuje vzdialené servery HTTP, ako aj lokálne. Cursor spravuje servery MCP vo svojich nastaveniach a podporuje lokálne (stdio) a vzdialené servery. Vzdialené servery vás zvyčajne požiadajú, aby ste sa raz prihlásili pomocou protokolu OAuth. Každý dodávateľ dokumentuje presný príkaz alebo URL pre svoj server.
Na čo si dať pozor
MCP poskytuje nástrojom AI skutočný prístup, takže s nimi zaobchádzajte ako s každou integráciou:
- Povolenia: agent, ktorý môže zapisovať na plátno alebo úložisko, môže tiež robiť chyby. Použite históriu verzií a skontrolujte zmeny.
- Ochrana osobných údajov: skontrolujte, kam idú konštrukčné údaje a či to váš plán umožňuje.
- Cena: niektoré funkcie zápisu sú v beta verzii bezplatné a plánuje sa ich použitie.
- Kvalita: Výstup umelej inteligencie nasleduje váš návrhový systém iba vtedy, ak je systém dobre štruktúrovaný a obsahuje pomenované komponenty a tokeny.
Kľúč Principle na zapamätanie
- MCP je otvorený štandard na prepojenie nástrojov AI s iným softvérom
- Umožňuje AI čítať skutočné údaje o dizajne namiesto snímok obrazovky
- Figma, Penpot a ExodeUI ponúkajú servery MCP
- Claude Code a Cursor podporujú lokálne aj vzdialené servery
- Dobre štruktúrovaný systém návrhu je dôležitejší ako nástroj
Často kladené otázky
Zdroje
- What is the Model Context Protocol (MCP)? — modelcontextprotocol.io
- Guide to the Figma MCP server — Centrum pomoci Figma
- Penpot MCP server — Penpot
- Connect Claude Code to tools via MCP — Dokumenty Claude Code
- Model Context Protocol (MCP) — Dokumenty Cursor