Anthropic vydal nástroj Claude Design, který slibuje generování uživatelských rozhraní a frontendů bez formulaického vibecoded vzhledu typického pro starší modely. V tomto článku si ukážeme, jak Claude Design funguje, co umí a jak ho propojit s Claude Code.
Co je Claude Design a jak ho spustit
Claude Design je dostupný přímo v prohlížečové nebo desktopové verzi Claude. Na levé straně rozhraní najdete ikonu barevné palety a kliknutím na ni se dostanete do Claude Design. Při zahájení nového projektu stačí zadat název projektu a kliknout na „Vytvořit“. Nástroj vám pak nabídne možnosti, jak projekt obohatit o podklady.- Import Figma souborů nebo GitHub repozitáře
- Nahrání screenshotů existujícího webu nebo aplikace pro napodobení jejich vzhledu
- Přidání vlastního design systému nebo Frontend Skill od Anthropicu
- Výběr typu výstupu: wireframe, high-fidelity prototyp nebo slide deck
Interaktivní tvorba wireframů a slide decků
Claude Design nejprve položí uživateli sérii upřesňujících otázek, například o cílové skupině, hlavním cíli stránky, službách k prezentaci nebo sociálních důkazech. Teprve poté vytvoří návrh. Tento přístup je podobný nástroji „ask user input“ v Claude Code. Výsledné návrhy jsou výrazně kvalitnější než výstupy starších modelů jako Opus 4.6. Claude Design zvládá také tvorbu prezentací. Při zadání jednoduchého promptu, například požadavku na slide deck k prezentaci nápadu na merchandise, vytvoří vizuálně propracovanou prezentaci s promyšlenou typografií a celkovým vzhledem. Nástroj navíc automaticky renderuje návrhy i v mobilním zobrazení bez nutnosti explicitního zadání.Funkce Tweaks: úpravy bez psaní promptů
Jednou z klíčových funkcí je panel „Tweaks“, který navrhuje možné úpravy designu a umožňuje je okamžitě préviewovat bez nutnosti psát jakýkoliv prompt. Změny lze přepínat v reálném čase a okamžitě sledovat jejich dopad na výsledný vzhled stránky. Dostupné parametry zahrnují například styl (cinematic, editorial, responsive), tempo scrollování nebo typografii.- Přepínání vizuálních stylů v reálném čase
- Úprava barvy pozadí, velikosti písma a dalších základních parametrů bez přirozeného jazyka
- Kliknutí na konkrétní oblast stránky pomocí funkce „Draw“ a připsání instrukce přímo do náhledu
Přesné úpravy pomocí funkce Draw
Pro přesnější zásahy do designu slouží funkce „Draw“. Uživatel klikne na tlačítko Draw, vybere konkrétní oblast na stránce a přímo tam napíše instrukci, například „chci toto výrazně zvětšit“. Prompt se automaticky odešle a Claude Design aplikuje změnu s větší přesností, než jaká je možná v Claude Code při označování screenshotů. Claude Design navíc sám kontroluje svou práci: pokud při ověřování zjistí například přesah prvků, iteruje opakovaně, dokud nedosáhne správného výsledku.Bezproblémový handoff do Claude Code
Největší předností Claude Design je možnost předat hotový návrh přímo do Claude Code. Na záložce „Export“ se nachází možnost „Handoff to Claude Code“, která vygeneruje příkaz ke zkopírování. Ten stačí vložit do terminálu, přičemž Claude Code načte design ve formátu gzip, parsuje podkladové HTML a renderuje stránku na localhostu. Výsledkem je přesná kopie navrženého designu připravená k dalšímu vývoji, tedy přidání databází, mikroservisů a veškeré funkcionality.- Export příkazu pro Claude Code jedním kliknutím
- Automatické načtení a renderování HTML z gzip souboru
- Okamžité spuštění stránky na localhostu pro kontrolu věrnosti přenosu
- Navazující vývoj funkcionality přímo v Claude Code
