Claude Design vs. Figma: limity, ekonomika tokenů a verdikt (2. díl)

Krátké shrnutí prvního dílu

V prvním dílu jsme si ukázali, co Claude Design je, proč ho umožnil teprve Opus 4.7, jak interně funguje Design System as a Skill (README.md + SKILL.md) a co produkt zvládá v šesti praktických testech — od landing pages přes mobilní onboarding až po 3D glóbus s reálnými daty.

Také jsme vysvětlili handoff do Claude Code, který je strojově čitelný spec pro dalšího agenta — řádový rozdíl proti tradičnímu Figma Dev Mode.

Teď se podíváme na druhou stranu: kde produkt naráží na limity, jak si stojí proti Figmě a Lovable, proč spotřebuje tolik tokenů a kdy ho má smysl použít.

Tweaks panel: nejlepší UX nápad (ale není originální)

Tweaks panel je v Claude Design opravdu zábavná inovace — klepnete na element a dostanete posuvníky a toggly, které Claude vygeneroval přesně pro tento konkrétní design. U landingu to byly barevné vzorky a tón titulku, u dashboardu typografie a accent barvy.

Ale: koncept není nový.

• [Cursor](https://www.cursor.com/) vydal visual editor v prosinci 2025 (Cursor 2.2) — manipulace DOM elementů drag-and-drop, sidebar pro inspekci React props, kliknutí na element + natural language popis změny.
• DialKit od Joshe Pucketta je open-source React knihovna, která vystavuje parametry komponent jako real-time vizuální kontroly.
• Agentation dělá v podobném duchu click-to-annotate feedback.

Co dělá Claude Design jinak: produktizuje to a integruje do flow, které nevyžaduje developerský background. Nemusíte rozumět React props, IDE rozhraní, CLI. Uživatelům, kteří jsou zvyklí na konverzační flow, to prostě sedí.

Jak iterovat chytře: chat vs. inline vs. tweaks

Claude Design nabízí tři způsoby úprav, a kdy který použít:

• Chat — pro široké změny, strukturální nebo estetické, co ovlivňuje celý design.
• Inline komentáře — pro konkrétní změny; klepnete na element a řeknete, co změnit. Claude dávkuje všechny inline komentáře a zpracuje je jako jednu koherentní úpravu.
• Tweaks panel — pro doladění parametrů, které Claude vygeneroval.

Pravidlo palce: máte pět malých oprav? Označte všech pět inline, pak nechte Claude zpracovat najednou. Nejen že je to rychlejší, ale výsledek je konzistentnější.

Co se skrývá v systémovém promptu Claude Design

Rodrigo Galván ze systémového promptu vytáhl postup, který agent interně sleduje při každém úkolu:

• Ask questions — zjisti, co uživatel skutečně chce, než začneš generovat.
• Find existing UI kits and collect context — zkopíruj VŠECHNY relevantní komponenty a přečti VŠECHNY relevantní příklady; pokud nenajdeš, zeptej se uživatele.
• Begin with assumptions + design reasoning — chovej se jako junior designer, kterému je uživatel manažer. Přidej placeholdery. Ukaž soubor uživateli brzy!
• Write React components — zapuš je do HTML souboru, znova ukaž ASAP, přidej next steps.
• Check, verify, iterate — použij nástroje k ověření výstupu.

Co Claude Design umí — podle role

Karo Zieminski sestavila výborný seznam podle toho, co děláte:

• Marketéři: landing pages, kampaňové assety, mikrosites, sociální assety, email šablony, bannery, pitch decky, explainer videa, animované sociální klipy, mood boardy, brand system.
• Newsletter/blog autoři: post header ilustrace, recurring column branding, archive page layouty, referral program stránky, subscriber-only PDF bonusy, social share karty per post.
• PM, designer, builder: design systems, token libraries, UI component catalogs, onboarding sekvence, web capture existujících stránek, interaktivní prototypy s voice/video/shader komponentami, 3D prototypy, mobilní mockupy v device rámcích, responzivní varianty, empty/error/loading stavy, dev handoff jako HTML nebo React.
• Vzdělávání: přednáškové slidy, interaktivní explainery, eseje s vlastními diagramy, tisknutelné handouty.
• Ilustrátoři a kartunisté: character sheets, turnarounds, editorial covers, storyboardy.
• Data workers: grafy, dashboardy, editoriální grafy, animovaná data videa — věci, co dřív vyžadovaly týden s D3.
• Místní samospráva a neziskovky: veřejné výzvy, stránky programů, event letáky v několika jazycích, výroční zprávy, dobrovolnické dashboardy.

Export: do Canva, nebo jako PDF, URL, HTML — a hlavně to zmíněné předání do Claude Code.

Co Claude Design NEumí (research preview, duben 2026)

Limity, které stojí za vědomí před tím, než se s nástrojem zamilujete:

• Negeneruje fotorealistické obrázky — na to potřebujete Nano Banana, Midjourney nebo DALL-E a dát výsledek dovnitř.
• Nemá real-time spolupráci jako Figma — nikdo s vámi v reálném čase needituje stejný projekt.
• Nemá vector editing tools v klasickém smyslu — neupravujete bezier křivky, není tam pen tool.
• Není mobilní aplikace — zatím jen web.
• Verze a historie jsou omezené, žádný proper branching jako Git.
• Spotřeba kreditů je vysoká — vrátíme se k tomu níž.

Claude Design vs Figma vs Figma Make vs Lovable

Karo Zieminski sestavila srovnání. Tady to je v textové formě:

Claude Design Silné: rychlost (od nuly k working prototype za minuty), AI-first workflow, handoff do Claude Code, design system extraction. Slabé: spotřeba kreditů, žádná real-time spolupráce, žádný vektor editing, jen web.

Figma Silné: profesionální vector editing, real-time collaboration, plugins, vyzrálý ekosystém, dev handoff přes Dev Mode. Slabé: strmá křivka učení, AI featury jsou doplněk ne core, pomalejší od nápadu k prototypu.

Figma Make Silné: AI generování v rámci Figmy, využívá Figma komponenty. Slabé: méně sofistikované než Claude Design, pomalejší iterace, omezené na rámec Figmy.

Lovable Silné: generuje funkční full-stack aplikace ne jen design, deploy na jeden klik, integrace s backendem. Slabé: designově méně dotažené, primárně pro builders ne designery, jiný use case.

Verdikt z přímého testu: Claude Design vyhrává na rychlost first draftu. Figma vyhrává na finální polish a týmovou spolupráci. Lovable vyhrává, když chcete deploynout funkční aplikaci, ne jen design.

Tokenová ekonomika: proč Claude Design pálí kredity

Karo Zieminski strávila 48 hodin intenzivním testováním a podotýká: kreditová ekonomika je nejméně sympatická část produktu. Důvody:

• Opus 4.7 je drahý model — každá iterace stojí znatelnou porci tokenů.
• Vision processing (čtení screenshotů a designových souborů) přidává další tokeny.
• Multi-step agentic workflow (Claude často interně volá několik nástrojů na jeden požadavek) násobí spotřebu.
• Brand extraction při onboardingu zabere 15-20 minut a slušnou porci tokenů.

Praktické triky na úsporu, které Karo doporučuje:

• Používejte inline komentáře dávkově — pět změn najednou je levnější než pět iterací.
• Nastavte si brand systém jednou, pak ho dědíte — neopakujte onboarding pro každý projekt.
• Začněte s wireframe módem, ne s high fidelity — iterujte na strukturu, pak teprve pull v vizualích.
• Buďte konkrétní v promptu — vágní prompty znamenají, že Claude generuje varianty, které pak musíte revidovat.

Kde AI design končí a lidský úsudek začíná

Tohle je zásadní bod, který se objevuje napříč všemi recenzemi.

Victor Dibia: Engineering taste zůstává kritický — Claude umí vygenerovat krásnou vizualizaci, ale rozhodnutí *kdy ukázat raw čísla vs. agregát*, *co skrýt kvůli privacy*, *kde to umístit na conversion-sensitive page* jsou pořád na vás.

Karo Zieminski: Claude Design nepředpokládá, že v loopu je vyškolený designer. To otevírá design lidem, kteří k němu dřív přístup neměli (PMs, marketéři, founders). Ale to neznamená, že designer není potřeba — znamená to, že designer dělá něco jiného: kuruje, kritizuje a nastavuje směr, místo aby pixelpushoval.

Peter Yang: Pro většinu use casů, kde dnes platíte freelancera nebo strávíte den v Canva, je Claude Design dramaticky rychlejší. Pro use casy, kde je každý pixel důležitý a brand je extrémně vyzrálý, Figma pořád vyhrává.

Verdikt: pro koho Claude Design dnes dává smysl

Použijte Claude Design, pokud:

• Jste founder, PM, marketér nebo builder a outsourcujete vizuální práci nebo ji děláte sami pomalu.
• Potřebujete first draft něčeho — landing page, slide decku, dashboardu, animovaného videa — a chcete to za minuty, ne hodiny.
• Máte codebase nebo design systém, ze kterého chcete těžit (brand extraction).
• Plánujete handoff do Claude Code a chcete, aby spec byl strojově čitelný pro dalšího agenta.

Zůstaňte u Figmy (nebo doplňte ji), pokud:

• Pracujete v týmu, který potřebuje real-time spolupráci.
• Děláte finální polish brand identit s každým pixelem na svém místě.
• Vaše práce vyžaduje vector editing, illustrations, complex prototypy s logikou stavů.
• Kreditová ekonomika vám vadí víc než časová úspora.

Není to Figma killer. Je to first-draft killer. A pro 80 % každodenní designové práce, kterou dnes děláte ručně nebo platíte, to úplně stačí.

Zdroje a další čtení

Druhý díl vychází ze stejných primárních zdrojů jako první díl:

• Anthropic Labs: Claude Design announcement
• Claude Opus 4.7 release
• Karo Zieminski: 48-Hour Builder's Test + Hero Prompts — srovnání Claude Design vs Figma vs Figma Make vs Lovable, kreditová ekonomika
• Rodrigo Galván: Building at Full Speed on Solid Foundations — systémový prompt, README.md + SKILL.md architektura
• Peter Yang: Everything You Can Build in 16 Minutes — 5 use casů
• Victor Dibia: How Good is Anthropic's Claude Design? — 3D glóbus, engineering taste
• Cursor 2.2 visual editor — předchůdce tweaks panelu