Claude Design — vizuální iterace v jednom proudu s kódem
Tento workshop teprve připravujeme. Níže je rámec toho, co bude pokrývat — strukturu, výstupy a předpoklady. Plný obsah doplníme.
Proč to děláme#
Design je jeden z nejčastějších přepínačů, který tě vytrhne z proudu — píšeš v Lovable, vyskočíš do Figmy, řešíš barvy, vrátíš se, kopíruješ. Claude Design (Anthropic Labs, vydáno duben 2026) tenhle přepínák odstraňuje: na onboardingu si přečte tvůj kód a stávající design files, postaví z toho design systém (barvy, typografie, komponenty) a každý další návrh ti vychází v něm. Konverzuješ jako s Claudem, ale výstupem jsou polished vizuály — landing page mockup, slide deck, one-pager, prototyp.
Pro vibe coding workflow je to logický doplněk: Lovable staví kód, Claude Design ladí jeho vizuální stránku.
Co se naučíš#
- Co Claude Design umí a kde má smysl ho pustit místo manuální práce ve Figmě/Canvě
- Jak ho napojit na existující projekt, aby používal tvoje barvy, fonty a komponenty
- Iterovat návrh přes prompt místo klikání ve vrstvách
- Generovat slide decky, mockupy, marketing one-pagery v jednom toolu
- Vyhnout se nejčastějším pastím (nesoulad s prod kódem, „AI estetika")
Předpoklady#
- Hotový Workshop 1: Od nápadu k živé aplikaci — abys měl projekt, nad kterým iterovat
- Hotový Workshop 2: GitHub a verzování — Claude Design čte z repa
- Předplatné Claude Pro / Max / Team / Enterprise (Claude Design je součástí, nepatří k free tieru)
Co budeme pokrývat#
- Co je Claude Design a kdy ho použít — srovnání s Figmou, Canvou a generováním přes Lovable
- Onboarding na tvém projektu — jak Claude Design čte codebase, jak validovat extrahovaný design systém
- První návrh — landing page — prompt → mockup → iterace
- Slide deck a one-pager — workflow pro marketing materiály
- Sync zpět do aplikace — jak z designu udělat reálný kód v Lovable (nebo Claude Code)
- Limity, na které narazíš — co Claude Design (zatím) nezvládá
Otestuj se předem#
Pro co Claude Design nemá přidanou hodnotu oproti Figmě?