Claude Design [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Claude Design ======

[[https://claude.ai/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 [[https://www.youtube.com/watch?v=gAoZ95kqG7w|Claude Design Just Became Unstoppable]] a doplňkově z [[https://www.youtube.com/watch?v=-tGH2tLwCEw|Claude Design is INSANE]].

{{youtube>gAoZ95kqG7w?}}

===== Co je na Claude Design zajímavé =====

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.

===== Workflow ukázaný ve videích =====

==== 1. Setup design systému ====

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.

==== 2. Volba typu výstupu ====

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.

==== 3. Upřesnění zadání přes otázky ====

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:

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

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

<code>
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.
</code>

===== Jak probíhá iterace nad návrhem =====

Doplňkové video [[https://www.youtube.com/watch?v=-tGH2tLwCEw|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:

<code>
can we make the globe larger
</code>

===== Předání do Claude Code =====

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:

<code>
fetch this design file read it read me and implement the relevant aspects of the design
</code>

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.

===== K čemu to dává smysl =====

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.

===== Důležité poznámky a limity =====

  * 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.

===== Zdroje =====

  * [[https://claude.ai/design|Claude Design]]
  * [[https://www.youtube.com/watch?v=gAoZ95kqG7w|Claude Design Just Became Unstoppable]]
  * [[https://www.youtube.com/watch?v=-tGH2tLwCEw|Claude Design is INSANE]]