Claude Design: průvodce a pět praktických scénářů

Praktické informace o práci s Ailootem najdete v dokumentaci.

Co je Claude Design?#

Pátek 17. dubna 2026. Anthropic uvádí Claude Design—nástroj, který mění textový popis na funkční vstupní stránku, prezentaci pro investory nebo prototyp mobilní aplikace. Nejde o „další generátor obrázků“. Je to první pokus Anthropic odstranit designéra z počátečních fází vývoje produktu.

O dvacet čtyři hodin později Adobe oznámilo konektor Firefly-Claude a představilo se jako platformní partner. Signál je jasný: Anthropic nevyhrál produktovou válku, ale změnu paradigmatu — design se nyní generuje a zavedení hráči se stávají distributory.

Claude Design se zde zkoumá z pohledu vibe codera: co umí, kolik stojí, jak ho používat bez zkušeností s designem a pro jaké praktické úkoly se hodí. Pokud budujete produkt bez interního designéra, je tento průvodce pro vás.

Jaké typy výstupů umí Claude Design vytvořit?#

Stručně řečeno, Claude Design vytváří návrhy, jejichž příprava dříve zabrala designérovi 3–5 dní. Slovy Anthropic jde o šest typů výstupů:

Rozhraní má dva panely. Vlevo je chat s Claude a vpravo náhled živého plátna. Proces má pět kroků: nastavení projektu, popis, kontrola, iterace a export. Když je zadání vágní, Claude klade doplňující otázky, takže práce připomíná spíš spolupráci s člověkem než s generátorem.

Co přijímá jako vstup:

1. Textová zadání (hlavní případ použití).
2. Snímky obrazovky, obrázky a existující podklady.
3. Dokumenty: DOCX, PPTX, XLSX.
4. Kódovou základnu — prostřednictvím odkazu na repozitář nebo importem místní složky.
5. Snímek existujícího webu podle URL.

Formáty exportu:

1. PDF.
2. PPTX (PowerPoint).
3. Samostatný soubor HTML — můžete ho rovnou nahrát jako stránku.
4. Přenos do Canvy — otevře se tam jako plně upravitelný projekt.
5. Balíček pro Claude Code — s úplným záměrem návrhu pro vývoj.
6. Sdílení odkazu v rámci organizace.

Co Claude Design nedělá (je důležité si to předem vyjasnit):

• Neupravuje kódovou základnu ani nespouští příkazy — to je práce pro Claude Code.
• Neimportuje ani neexportuje soubory .fig — nemá nativní integraci s Figma.
• Nenahrazuje Figma ani Canvu.
• Nemá protokol aktivit ani přehledy pro správce, takže není vhodný pro velké společnosti s požadavky na dodržování předpisů.
• Nemá vestavěný export videa — animace lze zachytit pouze jako záznam obrazovky.

Jak se Claude Design liší od Figma, Lovable, v0 a Canvy#

V popsaném přístupu se těchto pět nástrojů používá k různým úkolům. Zde je srovnání k květnu 2026:

V čem Claude Design předčí ostatní:

1. Designový systém z kódové základny. Žádný z konkurentů automaticky nevytahuje sadu komponent z repozitáře. v0 umí importovat z Figma, ale ne z kódu.
2. Uzavřený cyklus s Claude Code. Záměr návrhu se zachová. Lovable a Bolt to dělají v jednom nástroji, ale design je tam vedlejším produktem kódu.
3. Více výstupů z jednoho kontextu. Jedna značka — vstupní stránka, prezentace, e-mailová kampaň, kreativní materiály pro sociální sítě. Ostatní zvládají jen jednu z těchto věcí.
4. Není třeba učit se rozhraní. Na rozdíl od Figma se nemusíte učit pracovat s rozhraním. To je důležité pro publikum „zakladatelů a produktových manažerů bez designového vzdělání“ — oficiální pozicování Anthropic.

V čem Claude Design zaostává:

1. Nemá úplnou integraci s databází a serverem. Lovable a Bolt poskytují funkční aplikaci s databází, autorizací a publikováním. Claude Design poskytuje pouze frontend. Stejného výsledku dosáhnete takto: Claude Design → Claude Code → Vercel nebo jiný hosting → platební systém ručně. Tři nástroje místo jednoho.
2. Žádné soubory .fig. Návrháři nemohou výstup převzít do Figma — mohou použít pouze snímek obrazovky nebo návrh znovu vytvořit.
3. Žádný bezplatný plán. Všichni konkurenti mají bezplatný plán. Claude Design je dostupný od tarifu Pro.
4. Dotaženost. Figma stále dominuje v připravenosti k produkčnímu nasazení. Claude Design slouží k prvnímu návrhu.
5. Rychlost u prostého prototypu. Bolt je rychlejší pro základní prototyp — v prohlížeči se spustí během několika sekund.

Claude Design je nástroj pro jiný úkol: vytvořit první návrh bez designéra a pak ho předat někomu dalšímu.

Kolik Claude Design stojí a jak ověřit přístup#

Tarify a přístup:

Úvodní kredit se přiděluje jednou — balíček 20 běžných zadání, platný do 17. července 2026. To stačí k vytvoření 2–3 kompletních projektů a rozhodnutí, zda je Claude Design pro vás vhodný.

Tlačítka rozhraní jsou pouze v angličtině.

Jak připojit designový systém z vaší kódové základny#

Hlavní konkurenční výhoda Claude Design se týká lidí, kteří už něco vytvořili. Žádný jiný nástroj automaticky nevytáhne designový systém z repozitáře. Je to podobné přístupu Second Brain: nemusíte Claude vysvětlovat svou značku — poskytnete odkaz na zdroj a on si vše zjistí sám.

5 kroků nastavení:

1. Otevřete Claude Design na claude.ai/design a vytvořte nový projekt.
2. Při úvodním nastavení vyberte zdroj designového systému. Dostupné možnosti: pravidla značky, frontendová kódová základna, staré prezentace a příručky stylu, aktivní web podle URL, soubory Figma.
3. Pokud vyberete repozitář — zadejte odkaz na GitHub. Claude stáhne frontendovou složku a analyzuje nastavení motivu, proměnné stylů, existující komponenty a typografii.
4. Pokud vyberete aktivní web — zadejte URL. Claude zachytí strukturu stránky a vytáhne barvy, písma a vzory tlačítek a karet.
5. Potvrďte vytaženou sadu komponent. Claude zobrazí vytaženou paletu, písma a základní komponenty, které můžete před uložením upravit.

Poté každý nový projekt v Claude Design automaticky zdědí váš designový systém. To znamená, že vstupní stránka, kterou dnes vygenerujete, bude vypadat stejně jako váš současný web.

Zadání pro opětovnou kontrolu designového systému:

Show my active design system in this project: color palette, typography,
basic components, spacing patterns, and corner radii. Compare it with my live
website [URL] and flag anything that differs.

V popsaném postupu se tato kontrola opakuje každé 3–4 iterace v rámci projektu. Anthropic v oznámení otevřeně varuje, že po několika iteracích může Claude na designový systém zapomenout a vrátit se k výchozím vzorům. Řešením je pravidelně použít zadání, které ho vrátí k vaší sadě komponent. V podstatě jde o stejné context engineering jako v Claude Code: kontext se spravuje výslovně, nikoli potichu.

Scénář 1: Vstupní stránka pro uvedení produktu#

Podle zde popsané zkušenosti je prvním výsledkem nového experimentu v Claude Design vstupní stránka. Dříve: den zadávání práce designérovi, po němž následoval týden iterací. Teď: jedno zadání, hodina úprav a hotové HTML.

Šablona zadání:

Create a landing page for [PRODUCT NAME, one-sentence description].
Visual direction: [reference brand 1] meets [reference brand 2],
with a [adjective] and [adjective] tone. Structure: hero with one
value proposition, three benefit sections, an early-access signup form,
a 5-question FAQ, footer. Use my design system.

Co dostanete: Samostatný soubor HTML s vloženými styly. Můžete ho nahrát jako stránku na svůj web nebo jako samostatný projekt na jakýkoli hosting.

Co lidé obvykle po Claude kontrolují a upravují:

• Konkrétní text v hlavní části stránky — Claude zvládá strukturu, ale nepochopí dobře význam produktu.
• Obrázky — Claude vkládá zástupné symboly. Nahrazuji je vlastními nebo je vytvořím pomocí samostatného nástroje.
• Metriky a čísla — vždy používám skutečné. Nikdy si nevymýšlejte „80 % našich zákazníků“.

Úspora času: 6–8 hodin práce designéra plus jeden den vývoje frontendu u typické vstupní stránky při uvedení produktu. Claude Design vytvoří první návrh za 40–60 minut a pak následuje hodina iterací.

Scénář 2: Prezentace pro investory nebo partnery#

Prezentace je druhým hlavním scénářem: materiály pro investory, přihláška do akcelerátoru nebo rozhovor s partnerem.

Šablona zadání:

Create a 10-slide Series A presentation for [Company],
which builds [what] for [whom] and has [key metric]. Audience:
early B2B SaaS investors. Tone: confident, warm, no hype. Slides
in this order: title, problem, solution, traction (highlight the metric prominently),
product demo, market size, business model, competitors, team, ask.

Co dostanete: Soubor PPTX a možnost přenosu do Canvy. V Canvě se soubor otevře jako plně upravitelný společný projekt.

Čas: Ušetříte 6–10 hodin oproti ruční tvorbě. Nejvíce času ušetříte u snímků zaměřených na typografii — velké nadpisy, minimum vizuálního nepořádku, vše podle vašeho designového systému.

Úskalí: Claude Design vytváří statické snímky. Pokud potřebujete animace, buď je přeneste do Canvy a animujte tam, nebo použijte Figma.

Scénář 3: Klikatelný prototyp mobilní aplikace#

Praktický scénář: otestovat hypotézu o mobilní aplikaci předtím, než zaplatíte vývojáři.

Šablona zadání:

Build an interactive onboarding prototype for the [product] mobile app
with three scenarios: empty state, the user's first action, and the moment
of insight. Make the elements clickable for an unmoderated user test
through Maze or Useberry.

Co dostanete: Odkaz na prototyp. Můžete ho rovnou poslat do Maze a otestovat s 5–10 uživateli.

Co zkontrolovat:

• Rozměry obrazovky — ujistěte se, že Claude použil správný poměr stran pro iOS/Android.
• Hloubka scénáře — Claude někdy sloučí složité větve do jedné obrazovky. Zadání „zobraz každou větev jako samostatnou obrazovku“ to napraví.
• Stavy — prázdný, chybový, načítání. Bez výslovného požadavku je nevytvoří.

Úspora času: 1–2 sprinty oproti ručnímu vytvoření ve Figma + ProtoPie.

Scénář 4: Marketingová kampaň s 5 jednostránkovými weby#

Scénář pro placenou reklamu: porovnejte pět hodnotových nabídek se stejným formulářem a jednotným způsobem měření.

Šablona zadání:

Vytvoř 5 značkových jednostránkových webů pro test hodnotových nabídek:
[varianta 1, varianta 2, varianta 3, varianta 4, varianta 5].
Každý potřebuje úvodní sekci s jedinečným nadpisem, obrázek a tlačítko
vedoucí na [STEJNOU SKUTEČNOU URL FORMULÁŘE]. Každý exportuj jako samostatné HTML.
Přidej náhledy PDF a složku Canvy ke kontrole návrhů.
Ve všech pěti stránkách zachovej stejný cíl tlačítka i měřicí události.

Co dostanete: Pět návrhů stránek HTML, pět náhledů PDF a složku projektu Canva. Náhledy pomáhají schválit design; neprokazují funkční vstupní stránky ani měření konverzí.

Před spuštěním návštěvnosti:

1. Publikujte každou stránku HTML na vlastní URL zvoleného hostingu nebo ji předejte Claude Code k implementaci do webu.
2. Nahraďte zástupné údaje a ověřte každé tlačítko. Přes společný formulář odešlete neškodný testovací záznam a ověřte doručení do správného cíle.
3. Každé stránce přiřaďte odlišné označení kampaně nebo varianty. Návštěvy, kliknutí a úspěšná odeslání evidujte zvlášť, aby se porovnávala stejná akce návštěvníka.
4. Otevřete publikované URL na počítači i mobilu, ověřte zaznamenané testovací události a teprve poté spusťte plánovaný experiment.

Použití: Placená reklama, e-mailové kampaně a sociální sítě. Míru prokliku počítejte jako kliknutí na výzvu k akci na návštěvu stránky a konverzi jako úspěšná odeslání na návštěvu. Samotná kontrola PDF či Canvy je kontrolou návrhu, nikoli živým testem.

Úskalí: Claude Design vybírá obrázky automaticky ze svých podkladů. Pokud potřebujete konkrétní fotografie, nahrajte je předem.

Scénář 5: E-mailová kampaň pro Resend, Mailchimp nebo Sendsay#

Každá hromadná e-mailová kampaň potřebuje šablonu HTML s vloženými styly. Pro marketéra bez frontendového vývojáře jde o technický problém.

Šablona zadání:

Create an HTML email template for [campaign topic]. Design: dark theme,
your brand's primary accent, brand fonts. Structure: subheading,
heading, 3 paragraphs, call-to-action button, signature. Export as
a standalone HTML file with embedded styles and no external dependencies.

Co dostanete: Soubor HTML připravený k vložení do Resend, Mailchimp, Sendsay nebo Unisender.

Co lidé obvykle kontrolují a upravují:

• Šířka — e-mailoví klienti upřednostňují pevnou šířku 600px.
• Obrázky — odkazy nahrazuji odkazy na vlastní podklady hostované online.
• Prostá textová verze — Claude Design ji nevytváří; píšu ji sám.

Úspora času: 2–3 hodiny práce na rozvržení jedné šablony.

Předání do Claude Code: uzavřený cyklus#

V popsaném přístupu tato funkce ospravedlňuje volbu Claude Design, i když máte Figma. Každý jiný designový nástroj předá obrázek nebo soubor Figma. Vývojář se na něj pak podívá a převede ho do kódu „podle svého pochopení“. Tím se ztratí 30–40 % záměru návrhu.

Claude Design poskytuje balíček obsahující nejen vizuální podobu, ale také:

• Strukturu komponent (jejich logické vztahy).
• Logiku designových rozhodnutí (proč jsou mezery takové, proč mají rohy tento poloměr, proč je hierarchie uspořádána právě takto).
• Responzivní kotevní body — místa, kde se blok „přichytí“ k obrazovce při různých velikostech.
• Pojmenované hodnoty stylů místo magických čísel.

Claude Code tento balíček přímo otevře a napíše kód, který zachová záměr. Nejenže znovu vytvoří obrázek v rozvržení, ale implementuje logiku návrhu. Funguje to společně s vaším projektovým CLAUDE.md: čím přesnější jsou pravidla v CLAUDE.md, tím méně se Claude Code odchyluje od původního záměru.

Pracovní postup:

1. V Claude Design — dokončete návrh → klikněte na „Export to Claude Code“.
2. V Claude Code — otevřete projekt → vložte ID balíčku → zadání: „Implement this design in src/components/.“
3. Claude Code — přečte balíček, pochopí vzory a napíše komponenty pomocí vašeho současného stacku (Next.js + Tailwind, Vue, Svelte — cokoli používáte).
4. Poté — změny provádějte buď v kódu prostřednictvím Claude Code, nebo v Claude Design (nová iterace návrhu) a znovu je předejte dál.

Na čem záleží: nejde o to, že „AI píše frontend“. Jde o to, že „návrh a kód se stávají jedním dokumentem“. Když v Claude Design změním mezery mezi sekcemi, Claude Code v další iteraci pochopí, že jde o nový vzor, nikoli o jednorázovou opravu.

V čem konkurenti zaostávají:

• Lovable / Bolt — design je vedlejším produktem kódu. Když chcete změnit designový systém, musíte přepsat celé zadání.
• v0 — poskytuje komponenty React, ale ne balíček se záměrem návrhu. Pak pracujete s kódem, nikoli s návrhem.
• Figma + Cursor — existují pluginy, ale nepřenášejí logiku rozhodnutí, pouze vizuální podobu.

Jde o výhradní integraci, která začleňuje Claude Design do strategie Anthropic „agent plus plátno“.

Co nefunguje: architektonické slabiny#

Anthropic to říká otevřeně: jde o ukázkovou verzi. Některé funkce stále selhávají.

Architektonické slabiny:

• Žádný protokol aktivit — problém pro velké společnosti s požadavky na dodržování předpisů.
• Žádné požadavky na uchovávání dat — nelze ho používat s regulovanými daty.
• Experimentální design (hlas, video, 3D) je označen jako experimentální a může selhat.
• Žádný vestavěný export videa — animace lze zachytit pouze jako záznam obrazovky.

Zvláštnosti Claude v chování (společné všem nástrojům, nejen Design):

• Po několika iteracích zapomíná požadavky a vrací se k výchozím vzorům.
• Dobře zvládá jasně strukturované úkoly (opakování vzoru), hůře otevřené úkoly (vymýšlení nového směru).
• Může „lpět“ na svých zvyklostech místo toho, aby sledoval stanovené cíle.

Řešením je každé 3–4 iterace použít připomínací zadání, které ho vrátí k designovému systému. Není to překážka, ale vyžaduje to návyk.

Kdy zůstat u Figma, Lovable nebo Canvy#

V popsaném přístupu se těchto pět nástrojů používá k různým úkolům. Tady je upřímný přehled, kdy který použít:

Claude Design použijte, pokud:

• Jste zakladatel, produktový manažer nebo marketér bez zkušeností s designem.
• Potřebujete první návrh prezentace, vstupní stránky nebo makety za hodinu, nikoli za den.
• Už máte kódovou základnu nebo pravidla značky, které Claude může využít.
• Plánujete předat výsledek designérovi nebo vývojáři k doladění.
• Píšete kód s Claude Code a chcete uzavřený cyklus „návrh → vývoj“.

Figma použijte, pokud:

• Jste designér a provádíte závěrečné dolaďování.
• Potřebujete týmovou spolupráci se zaměřením na předání vývojáři.
• Potřebujete pluginy, režim pro vývojáře nebo důkladnou správu verzí.
• Potřebujete finální návrh připravený pro produkční nasazení.

Lovable nebo Bolt použijte, pokud:

• Potřebujete funkční produkt s databází, autorizací a publikováním na základě jednoho zadání.
• Jste ochotni vyměnit dotažený design za rychlost.
• Záleží vám na bezplatném plánu.

Canvu použijte, pokud:

• Potřebujete marketingové materiály z hotových šablon.
• Designový úkol spočívá v sestavování položek z knihovny, nikoli v kreativním generování.
• Potřebujete tisk, sociální sítě a video v jednom produktu.

v0 použijte, pokud:

• Tvoříte frontend a potřebujete hotové komponenty ke kopírování a vložení.
• Už pracujete v ekosystému Next.js / Vercel.
• Chcete importovat přímo z Figma.

Typický postup v popsaném přístupu: Claude Design vytvoří první návrh vstupní stránky → Claude Code ho přesune do src/app/ → úpravy v kódu → pokud potřebuje typografické doladění, přejdu do Figma → pokud potřebuje animaci pro sociální sítě, přejdu do Canvy.

Claude Design netvrdí, že umí všechno. Chce být prvním krokem, po kterém víte, co dál.

Přejděte na Ailoot.