MCP pro návrháře: Připojení Figma, tokenů a kódu k Claude a Cursor
Co znamená Model Context Protocol pro návrháře, které návrhářské nástroje mají servery MCP, jak je připojit k Claude Code a Cursor a na co si dát pozor.
Core Takeaway
MCP (Model Context Protocol) je otevřený standard, který umožňuje nástrojům umělé inteligence, jako jsou Claude Code a Cursor, připojit se k jinému softwaru. Pro návrháře to znamená, že nástroj pro kódování AI může číst skutečná návrhová data, jako jsou rámce, komponenty, proměnné a tokeny, namísto hádání ze snímků obrazovky, a v některých nástrojích může změny zapisovat zpět. Všechny Figma, Penpot a ExodeUI nabízejí servery MCP.
Co je MCP, jednoduše řečeno
Oficiální dokumentace MCP jej popisuje jako open-source standard pro připojení aplikací umělé inteligence k externím systémům, jako jsou soubory, databáze a nástroje. Jedním z vlastních příkladů je Claude Code generující celou webovou aplikaci z návrhu Figma. Pro návrháře je důležitá tato část: AI již nemusí hádat, jak váš návrh vypadá. Může se zeptat přímo nástroje pro návrh.
Návrhové nástroje se servery MCP již dnes
Od října 2026:
- Figma: Server MCP, který agentům poskytuje kontext návrhu (proměnné, komponenty, rozvržení) pro generování kódu a může zapisovat nativní obsah zpět na plátno. Figma jej uvádí na Starter a placených plánech; psaní na plátno je během beta verze zdarma.
- Penpot: bezplatný, otevřený server MCP, který funguje s jakýmkoli klientem MCP, včetně Claude, Cursor, VS Code a OpenAI Codex, a může být hostován samostatně.
- ExodeUI (my to děláme): server MCP, který umožňuje nástrojům pro kódování AI vytvářet a upravovat interaktivní animace se stavy a fyzikou pružin.
- Návrhové tokeny: pokud vaše tokeny žijí v úložišti jako JSON, nástroj pro kódování AI je již může číst jako soubory; vyhrazený server je potřeba pouze pro tokeny uložené v nástroji.
Jak to designéři vlastně využívají
Nejběžnější pracovní postupy jsou spíše praktické než magické. Vývojáři vyberou rámec a požádají AI, aby jej implementovala s existující knihovnou komponent. Návrháři žádají AI, aby zkontrolovala, zda kódovaná obrazovka odpovídá designu a vyjmenovala rozdíly. Týmy žádají AI, aby aktualizovala tokeny komponenty napříč kódovou základnou. A designéři stále častěji používají AI k navrhování variant přímo na plátno a poté je ručně upravují.
Připojení k serveru
Claude Code přidává servery pomocí příkazu claude mcp add nebo prostřednictvím souboru .mcp.json v projektu a podporuje vzdálené servery HTTP i místní. Cursor spravuje servery MCP ve svém nastavení a podporuje místní (stdio) a vzdálené servery. Vzdálené servery vás obvykle žádají, abyste se jednou přihlásili pomocí protokolu OAuth. Každý dodavatel dokumentuje přesný příkaz nebo adresu URL pro svůj server.
Na co si dát pozor
MCP poskytuje nástrojům umělé inteligence skutečný přístup, takže s nimi zacházejte jako s jakoukoli integrací:
- Oprávnění: Agent, který může zapisovat na plátno nebo úložiště, může také dělat chyby. Použijte historii verzí a zkontrolujte změny.
- Soukromí: Zkontrolujte, kam jdou návrhová data a zda to váš plán umožňuje.
- Cena: Některé funkce zápisu jsou v beta verzi zdarma a plánuje se, že budou založené na použití.
- Kvalita: Výstup umělé inteligence sleduje váš návrhový systém pouze v případě, že je systém dobře strukturován a obsahuje pojmenované komponenty a tokeny.
Klíč Principle k zapamatování
- MCP je otevřený standard pro připojení nástrojů umělé inteligence k dalšímu softwaru
- Umožňuje umělé inteligenci číst skutečná data návrhu namísto snímků obrazovky
- Figma, Penpot a ExodeUI nabízejí servery MCP
- Claude Code a Cursor podporují místní i vzdálené servery
- Dobře strukturovaný návrhový systém je důležitější než nástroj
Často kladené otázky
Zdroje
- What is the Model Context Protocol (MCP)? — modelcontextprotocol.io
- Guide to the Figma MCP server — Centrum nápovědy Figma
- Penpot MCP server — Penpot
- Connect Claude Code to tools via MCP — Dokumenty Claude Code
- Model Context Protocol (MCP) — Dokumenty Cursor