Claude Design v praxi: landing page za 4 minuty

Tvorba landing page trvá hodiny. Musíš otevřít Figmu, nastavit barvy, fonty, komponenty — a to ještě ani nezačínáš psát copy. Pak přijde revize, změna layoutu a znovu od začátku.

Claude Design to mění. Anthropic spustil nový AI nástroj, který přečte tvůj web nebo codebase, automaticky vytáhne celý brand systém a vygeneruje produkčně připravené stránky — v průměru za 4 minuty. Bez Figmy, bez ručního nastavování.

V tomto článku ti ukážu, jak Claude Design funguje, jak ho okamžitě vyzkoušet a kde opravdu šetří čas.

Co je Claude Design

Claude Design je AI nástroj přímo od Anthropicu, poháněný modelem Opus 4.7. Spustil se v dubnu 2026 a cílí přímo na Figmu — Anthropic CPO Mike Krieger dokonce pár dní před launche rezignoval z boardu Figmy.

Na rozdíl od nástrojů jako Lovable, Stitch nebo Replit Claude Design neřeší jen generování stránek. Klíčová funkce je extrakce brand systému: přečte tvůj stávající web nebo repozitář a z kódu vytáhne barvy, typografii, komponenty a layout vzory. Tohle nastaví jednou — a každá další landing page, advertoriál nebo pitch deck z tohoto systému automaticky dědí tvůj vizuální styl.

Výsledky pak exportuješ jako HTML, Canva soubor, PPTX nebo PDF, nebo je jedním kliknutím předáš Claude Code, který z nich rovnou sestaví funkční kód.

Jak Claude Design funguje

Celý workflow stojí na třech krocích:

1. Extrakce brand systému — Claude Design přečte screenshoty tvého webu nebo přímo GitHub repozitář. Z toho vytvoří znovupoužitelný brand kit: paleta barev, fonty, typy tlačítek, spacing. Toto uděláš jednou a systém si to pamatuje pro všechny další projekty.

2. Generování stránek — Otevřeš nový projekt, napíšeš prompt (cíl stránky, cílová skupina, referenční vzor), odpovíš na 7–10 upřesňujících otázek a za 4 minuty máš na obrazovce funkční stránku s tvým brandingem.

3. Export nebo handoff — Stránku zkopíruješ do Claude Code jako build-ready bundle, exportuješ do Canvy nebo stáhneš jako HTML soubor připravený pro Shopify, WordPress nebo jiný CMS.

Co je klíčové: brand konzistence není výsledkem ručního promtování. Je zabudována na systémové úrovni. To znamená, že varianta #2 a varianta #5 vypadají jako od jednoho designéra — bez toho, abys to musel kontrolovat.

Jak Claude Design vyzkoušet krok za krokem

Krok 1: Otevři Design tab v Claudovi

Jdi na claude.ai a v levém menu uvidíš záložku Design (aktuálně v research preview). Pokud ji nevidíš, může být postupný rollout — zkus počkat nebo znovu přihlásit.

Krok 2: Nahraj screenshoty nebo připoj repozitář

Klikni na New Project a vybereš jednu ze dvou cest:

• Screenshots — pořiď screenshoty svého webu a nahraj je přímo do Designu
• Repository — připoj GitHub repozitář (Shopify theme, Next.js projekt, apod.)

Claude z toho automaticky vytáhne brand systém: barvy, fonty, tlačítka, mezery.

Krok 3: Zadej prompt pro stránku

Napiš, co chceš vytvořit. Čím konkrétnější, tím lepší výsledek:

"Vytvoř landing page pro produktový launch. Cíl: e-mail opt-in. Cílová skupina: solopodnikatelé v Česku. Vzor: mechanism-first advertoriál."

Claude ti pak položí 7–10 upřesňujících otázek — odpověz na ně poctivě, jsou součástí procesu.

Krok 4: Revize a varianty

Za přibližně 4 minuty máš hotovou stránku. Pokud chceš variantu, jednoduše změň jednu proměnnou v promptu:

"Udělej tutéž stránku, ale změň story angle z 'mechanism story' na 'customer transformation story'."

Varianta #2 je hotová za méně než 3 minuty — se stejným brandingem.

Krok 5: Export nebo předání Claude Code

Máš dvě možnosti:

• Export — stáhni jako HTML, importuj do Canvy nebo ulož jako PPTX
• Handoff — klikni na Open in Claude Code a dostaneš build-ready bundle, který Claude Code rovnou zkompiluje do funkčního kódu

Praktické příklady

5 variant landing page za jedno odpoledne

DTC brand testující nové copy angly na Metu nebo TikToku normálně potřebuje designéra nebo dny práce v Figmě. S Claude Design nastaví brand systém jednou, zadá 5 různých promptů (různé story angly, různé CTA) a do večera má 5 plnohodnotných stránek připravených k A/B testování.

Agency pitch deck za 20 minut

Klientovi přijde na schůzku a ty za 20 minut postavíš pitch deck — Claude Design načte brand klienta ze screenshotů webu, vygeneruje strukturu prezentace a výsledek exportuješ jako PPTX nebo rovnou do Canvy.

Advertoriál pro e-commerce produkt

Zadáš screenshot Shopify store + prompt s frameworkem advertoriálu. Za 4 minuty máš plnohodnotný advertoriál s tvým brandingem, který jde rovnou do Shopify nebo na Meta testování.

Na co si dát pozor

Aktuální omezení research preview — Claude Design má zatím oddělené weekly limity. Anthropic to popisuje jako dočasné a plánuje postupné navýšení.

Editace je stále nutná — Výsledek na první pokus není finální produkt. Počítej s tím, že 20–30 % práce je ještě úprava. Ale to je jiné než 80–90 % práce od nuly.

Kvalita závisí na brand systému — Čím čistší a konzistentnější je tvůj stávající web, tím přesnější bude extrakce. Starší weby s nekonzistentním CSS mohou dávat horší výsledky.

Ne Figma pro pixel-perfect výsledky — Claude Design je optimalizovaný na rychlé prototypování a iteraci, ne na finální hand-off komponentu po komponentě. Pro finální produkční UI knihovnu stále potřebuješ designéra.

Shrnutí

Claude Design je první nástroj, který řeší brand konzistenci na systémové úrovni — ne přes prompt, ale přes automatickou extrakci z tvého kódu. To mění workflow pro:

• Marketing týmy — rychlé A/B testy landing pages bez čekání na designéra
• Freelancery a agentury — pitch decky a advertoriály za zlomek dosavadního času
• Solo foundera — kompletní brand systém jednou, neomezené variace pak

Pokud děláš jakýkoli druh digital marketingu nebo stavíš produkty, Claude Design je nástroj, který si musíš osahat. Zatím je v research preview, ale funkce jsou plnohodnotné.

Jdi na claude.ai, otevři záložku Design a zkus první stránku. Zpětná vazba po prvním pokusu je, že výsledek překvapí.