Průvodce · Znalosti pro vibe coding
Claude Design: od návrhu ke skutečnému webu
Navrhne web, prototyp nebo prezentaci podle vaší značky. Hotový návrh pak předáte do Claude Code.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
Co se vyplatí znát
Ve všech tarifech Claude, i ve Free
Rychlá odpověď
Co je tedy Claude Design?
Claude Design je vizuální pracovní plocha přímo v Claude. Popíšete, co potřebujete, a vedle chatu vznikne návrh webu, klikací prototyp nebo prezentace.
Drží se vašich barev, písma a komponent. Hotový návrh předáte do Claude Code, který z něj postaví hotový web.
Stav k 26. 10. 2026
Od 16. září je Claude Design přímo v konverzaci, ve všech tarifech včetně Free. Samostatná adresa claude.ai/design skončí 14. prosince 2026, design systémy z ní včas přesuňte.
K čemu slouží
Co v Claude Design vytvoříte
Návrh vzniká na plátně vedle chatu, rozdělený do artboardů a vrstev jako v grafickém programu.
Návrh webu nebo landing page
Klikací prototyp, který si projdete jako hotový web. Dřív, než se napíše jediný řádek kódu.
Prezentace a one-pager
Ve vašich barvách a s vaším písmem. Export do PDF, PowerPointu nebo Google Slides.
Grafika ke kampani
Bannery a grafiky na sociální sítě, které ladí s webem, protože vycházejí ze stejného stylu.
Kde ho otevřete
V chatu
Output → Design
Záložka Artifacts
šablona Design
V Claude Code
příkaz /design
V aplikaci Claude
iOS a Android
Claude Design je jeden z typů artefaktů, vedle dokumentů a prezentací. Přehled všech možností najdete v nápovědě Anthropicu.
Vyzkoušejte si to
Proč výsledek stojí na design systému
Bez něj je výstup podle nápovědy Anthropicu funkční, ale obecný. Přepněte si, co se změní.
Zadání pro Claude: „Navrhni landing page na jarní nabídku naší pekárny.“
Logo
Objevte kouzlo jarního pečení plné chutí
Naše pekárna přináší jedinečný zážitek z poctivého pečiva, které potěší každého milovníka dobrého jídla.
Zjistit vícePatkové písmo, rezavé tlačítko a fráze, které by sedly na jakoukoli pekárnu.
Co si připravit, než začnete
Odkaz na web nebo repozitář
vyčte z něj barvy a komponenty
Logo a písmo
soubory, které už máte
Popis značky
pro koho jste a jak mluvíte
Ukázky, co se vám líbí
screenshoty, starší prezentace
Cena a limity
Kolik Claude Design stojí?
Samostatně ho nekoupíte. Je součástí předplatného Claude a bere ze stejného limitu jako chat i Claude Code.
Free
0 $
na vyzkoušení, bez Claude Code
Pro
20 $ / měs.
≈ 430 Kč
ročně 17 $ / měs.
občasné návrhy
Max
od 100 $ / měs.
≈ 2 170 Kč
návrhy každý den
Team
od 25 $ / místo
≈ 540 Kč
ročně 20 $ / měs.
sdílený design systém firmy
Ceny bez DPH podle claude.com/pricing, stav k 26. 10. 2026.
Jak šetřit limit
Text a rešerši v chatu
do Designu jděte s hotovým obsahem
Menší vstupy
jen soubory, které jsou potřeba
Připomínky v dávce
víc komentářů pošlete najednou
Jak tarify vycházejí v korunách a kdy se vyplatí Max, rozebírá průvodce Kolik stojí Claude Code.
Ujídá limit
Velké projekty a hodně iterací spotřebují víc. Když limit dojde, počkáte na obnovení.
Bez podkladů obecný
Bez vašich podkladů vypadá výstup jako od kohokoli. Nepořádek ve zdroji převezme i import.
Bez historie verzí
Starší verzi návrhu zatím nevrátíte a úpravy víc lidí naráz jsou podle Anthropicu jen základní. Důležité stavy si exportujte.
Data a trénink
Na Free, Pro a Max si v nastavení soukromí určíte, jestli smí Anthropic vaše konverzace použít ke zlepšování modelů.
Alternativy
Čím Claude Design nahradit nebo doplnit
Google Stitch
Experiment Google Labs pro „vibe design“. Návrh pošle do Google Antigravity, nebo ho publikuje přes Netlify.
Když stavíte v Google Antigravity.
Figma Make
Z promptu prototyp nebo webová appka přímo ve Figmě. Hotový design z Figmy do kódu převedete přes Figma MCP.
Když tým žije ve Figmě.
v0 od Vercelu
Specialista na frontend v Reactu. Je zároveň jedním z cílů, kam Claude Design návrh umí poslat.
Když chcete rovnou živou appku.
shadcn/ui v Claude Code
Bez plátna: hotové komponenty, které si Claude Code vloží rovnou do projektu.
Když radši ladíte design přímo v kódu.
Naučte se z návrhu postavit web
V kurzu AI First učíme vibe coding na reálných projektech. Jak web postavit v Claude Code, napojit doménu a nasadit ho, ukazuje lekce 5, Masterclass vibe codingu webů.
24 hodin videí · 1 900+ absolventů · roční licence s aktualizacemi zdarma
FAQ
Časté otázky
Co je Claude Design?+
Claude Design je vizuální pracovní plocha přímo v Claude od Anthropicu. Popíšete, co potřebujete, a vedle chatu vznikne návrh webu, klikací prototyp, one-pager nebo podklad pro prezentaci. Drží se vašeho design systému a hotový návrh předáte do Claude Code, který z něj postaví hotový web.
Je Claude Design zdarma?+
Vyzkoušet ho můžete zdarma. Od 16. září 2026 je dostupný ve všech tarifech Claude včetně bezplatného Free. Samostatný limit ale nemá: bere ze stejného limitu jako chat i Claude Code, a když limit dojde, Claude Design je nedostupný až do jeho obnovení.
Kolik Claude Design stojí?+
Samostatně ho nekoupíte, je součástí předplatného Claude. Pro stojí 20 USD měsíčně (17 USD při roční platbě), Max od 100 USD měsíčně, Team od 25 USD za místo měsíčně (20 USD při roční platbě). Ceny jsou bez DPH. Na víc návrhů denně se vyplatí vyšší tarif, protože design spotřebuje limit rychleji než běžný chat.
Jak Claude Design spustím?+
V konverzaci napište, že chcete design, nebo v poli pro zprávu zvolte Output a pak Design. Jde to i ze záložky Artifacts přes šablonu Design a v Claude Code příkazem /design. Samostatná adresa claude.ai/design zatím funguje, ale 14. prosince 2026 skončí.
Jak dostanu návrh z Claude Design do Claude Code?+
V nabídce Export zvolte předání do Claude Code (Handoff to Claude Code), buď do počítače, nebo do Claude Code na webu. Claude Code pak pokračuje z vašeho návrhu a postaví z něj hotový web. Příkaz /design-sync nahraje design systém z vašeho repozitáře do Claude Design, takže návrhy rovnou používají vaše komponenty. Claude Code ale potřebuje aspoň tarif Pro.
Nahradí Claude Design Figmu?+
Malému týmu bez designéra často stačí: screenshot webu, logo a pár pravidel značky, a návrh je hotový bez Figmy. Designérské týmy, které ve Figmě mají celý design systém, ji ale dál potřebují. Export do Figmy mezi výstupy Claude Design zatím není, Figma má navíc vlastní AI nástroj Figma Make.
Trénuje Anthropic na mých návrzích?+
U tarifů Free, Pro a Max o tom rozhodujete sami v nastavení soukromí, volbou Model Improvement. Konverzace v anonymním režimu se ke zlepšování modelů nepoužívají nikdy. Práva k výstupům vám podle podmínek Anthropicu převádí, takže návrhy můžete používat komerčně.
Jaký je rozdíl mezi Claude Design a artefakty?+
Claude Design je jeden z typů artefaktů, vedle dokumentů (Claude Docs) a prezentací (Claude Slides). Artefakt je obecně cokoli, co Claude vytvoří vedle chatu. Claude Design k tomu přidává plátno s vrstvami, design systém a předání do Claude Code.