Claude Design

Claude Design je vizuální rozhraní nad Claudem pro tvorbu prototypů, slidů a jednoduchých webových výstupů. Pod Claude Code dává smysl hlavně proto, že hotový návrh umí předat dál do implementace přes hand-off workflow pro Claude Code. Článek vychází hlavně z videa Claude Design Just Became Unstoppable a doplňkově z Claude Design is INSANE.

Ve videích je Claude Design ukázaný jako webová vrstva nad modelem Claude Opus 4.7, která posouvá část práce z čistého promptování do vizuálního editoru.

• Umí vytvářet wireframy, high-fidelity prototypy, slide decky a jednoduché one-pagery.
• Umí pracovat s design systémem odvozeným z existujícího brandu, assetů nebo repozitáře.
• Nad návrhem se dá iterovat nejen textem, ale i přes panelové úpravy, komentáře a kreslení přímo do návrhu.
• Hotový výstup jde exportovat nebo předat do Claude Code pro další implementaci.

Z druhého videa je dobře vidět, že cílem není jen vygenerovat hezký mockup, ale dostat se rychleji od zadání k použitelnému návrhu, který respektuje existující vizuální identitu.

Claude Design umí začít od existujícího brandu. Ve videích je ukázané zadání názvu firmy, krátkého popisu, loga, brandových podkladů a také napojení na GitHub repozitář nebo lokální složku s assety.

Prakticky to znamená:

• nahrát loga, fonty a další assety,
• připojit existující web nebo repozitář,
• nechat Claude Design odvodit barvy, typografii a základní UI styl,
• schválit nebo upravit vygenerované prvky design systému.

V prvním videu zaznívá poznámka, že u větší codebase může příprava trvat zhruba 15–20 minut a systém si vybírá jen relevantní soubory místo slepého zpracování všeho.

Ve videích jsou ukázané tyto režimy:

• prototyp jako wireframe nebo high-fidelity mockup,
• prezentace ze vstupního dokumentu,
• landing page nebo jiný jednoduchý webový výstup.

Druhé video ukazuje i práci s PDF jako vstupem pro slide deck a první video zase rychlou tvorbu interaktivního vizuálu v prototypovacím režimu.

Zajímavý detail je, že Claude Design se po zadání promptu doptává na chybějící informace. Autor to v prvním videu přirovnává k plan mode v Claude Code.

Tím se neřeší jen samotný vizuál, ale i kontext:

• styl výstupu,
• barevná paleta,
• míra detailu,
• rozsah UI,
• co má být upravitelné nebo zvýrazněné.

Ukázkový prompt z prvního videa:

Let's design an interactive dark themed graphic showing how culture flows between cities: a rotating globe with the cities connected by glowing path.

Ukázkový prompt z druhého videa pro slide deck:

I just gave you a PDF called Opus 4.7 Trading Bot ... I just want you to turn that into a branded presentation for me.

Doplňkové video Claude Design is INSANE ukazuje detailněji samotné ladění výstupu po vygenerování.

K dispozici jsou hlavně tyto režimy:

• Tweaks – rychlé úpravy parametrů jako intenzita efektu, rotace nebo paleta,
• Edit – výběr konkrétního prvku a úprava jeho vlastností přímo v editoru,
• Comments – komentáře k vybrané části návrhu,
• Draw – zakreslení připomínky nebo nového prvku přímo do plátna.

To je praktické hlavně ve chvíli, kdy je rychlejší ukázat na konkrétní komponentu než znovu popisovat celý problém textem. Ve videu je ukázaný i jednoduchý komentář typu:

can we make the globe larger

Nejdůležitější část pro zařazení do sekce Claude Code je export a hand-off. Druhé video ukazuje, že v export menu lze zvolit předání návrhu do Claude Code, zkopírovat vygenerovaný příkaz a vložit ho do terminálu nebo do VS Code session s Claude Code.

Ve videu je ukázaný tento příkaz:

fetch this design file read it read me and implement the relevant aspects of the design

Podle videa tím Claude Code stáhne designový balíček, přečte přiložené instrukce a naváže na něj v lokálním projektu. Vedle toho jsou ve videích ukázané i další exporty jako ZIP, PDF, PowerPoint, Canva nebo HTML.

Claude Design dává smysl hlavně v těchto situacích:

• když je potřeba rychle udělat landing page, která má držet existující brand,
• když se má z PDF nebo jiného podkladu udělat prezentace bez ručního skládání slidů,
• když je lepší ladit UI vizuálně a ne jen přes HTML/CSS promptování naslepo,
• když má návrh skončit v Claude Code a dál pokračovat jako reálná implementace.

Proti čistému promptování v Claude Code je hlavní rozdíl v tom, že návrh je možné průběžně vidět, komentovat a opravovat ještě před tím, než se začne přenášet do kódu.

• Ve videích je Claude Design popsaný jako research preview.
• Zaznívá postupné rolloutování pro placené tarify Claude: Pro, Max, Team a Enterprise.
• Jde o webové rozhraní na claude.ai/design, ne o terminálový režim.
• U větších zdrojů a design systémů je potřeba počítat s delším zpracováním.
• Výsledek je potřeba dál iterovat; videa ho neukazují jako plnou náhradu designéra ani frontendisty.

• Claude Design
• Claude Design Just Became Unstoppable
• Claude Design is INSANE