Claude Design pod pokličkou: jak funguje a co skutečně staví (1. díl)

Anthropic za 48 hodin spustil dva produkty — a Figma to pocítila

17. dubna 2026 Anthropic spustil Claude Design — druhý produkt v rámci 48 hodin po vydání modelu Claude Opus 4.7. Akcie Figmy spadly do čtyř hodin o 7,28 %, Mike Krieger (spoluzakladatel Instagramu a CPO Anthropicu, který projekt spolu-vedl) shodou okolností tři dny předtím odstoupil z boardu Figmy. Zpráva byla jasná.

Za týden od spuštění se objevily čtyři zásadní recenze: Victor Dibia postavil interaktivní glóbus pro svoje knižní stránky za 45 minut, Peter Yang natočil 16minutové demo s pěti use-casy, Rodrigo Galván rozebral architekturu produktu až na úroveň systémových promptů, a Karo Zieminski prošla 48hodinový builder test včetně srovnání s Figmou.

V tomto článku sestavujeme všechny tyto pohledy dohromady — co Claude Design opravdu umí, jak to funguje uvnitř, a kde má hranice.

TL;DR — co je Claude Design v jedné větě

Claude Design je AI designový workspace na claude.ai/design. Popíšete, co chcete → Claude vygeneruje pracovní prototyp, slide deck, dashboard nebo animované video → iterujete přes chat, inline komentáře nebo tweaks panel → export do Canva, PDF, HTML, nebo rovnou handoff do Claude Code.

Dostupné pro plány Pro, Max, Team a Enterprise, zatím jen přes web.

Proč Claude Design funguje jen díky Opus 4.7

Bez nového modelu by Claude Design neexistoval. Opus 4.7 přinesl dvě změny, které jsou pro designový nástroj existenční:

• Vision benchmark skočil z 54,5 % na 98,5 %. Model teď čte obrázky o velikosti až 3,75 megapixelu s téměř perfektní přesností. V praxi to znamená, že přečte drobné UI labely, parsuje husté dashboardy, rozezná subtilní ikony. Bez tohoto skoku by designový nástroj halucinoval polovinu toho, co mu ukážete.
• SWE-bench Pro se zlepšil z 53,4 % na 64,3 % a model teď kontroluje vlastní výstup před tím, než ho ukáže uživateli — takže méně rozbitých obrazovek a méně manuálního úklidu.

Jak to popsala Karo Zieminski: „A lot like opening a second eye, or realizing the first one was confabulating the entire time."

Jak vypadá spuštění

Po otevření Claude Design si volíte startovní bod: Prototype, Slide Deck, From Template, nebo Other. U Prototype si navíc volíte mezi *Wireframe* (hrubý wireframe pro rychlé prozkoumávání) a *High fidelity* (vypiplaný mockup s brand assety). Pak buď napíšete textový prompt, nebo nahrajete svoji značku.

A právě to druhé je klíč.

Design System as a Skill: nejchytřejší část produktu

Rodrigo Galván ve své analýze popsal, jak Claude Design interně organizuje váš brand — a je to chytřejší, než se na první pohled zdá. Anthropic tomu oficiálně neříká „Design System as a Skill", ale přesně tak to funguje.

Když při onboardingu nahrajete codebase, Figma soubor nebo živou URL, Claude vygeneruje dva markdown soubory:

README.md — sémantický kontrakt systému

Obsahuje všechno, co definuje identitu značky: voice, tone, barvy s přesnými hex hodnotami a sémantikou použití, typografickou škálu, spacing, radii, stíny, pohyb, interakční stavy. Každé rozhodnutí je anotované zdůvodněním.

SKILL.md — vstupní bod pro executor agenty

Definuje jméno skillu, kdy se má vyvolat, který soubor přečíst jako první, které soubory jsou non-negotiable. Obsahuje i default chování.

Struktura projektu, kterou Claude vytváří automaticky

Kolem README.md a SKILL.md Claude organizuje zbytek projektu do předvídatelné stromové struktury:

• colors_and_type.css — design tokeny pro barvy a typografii
• assets/ — loga a ikony
• fonts/ — fontové soubory s poznámkami k typografii
• preview/ — vizuální dokumentace komponent
• ui_kits/ — hotové React/JSX komponenty
• uploads/ — referenční soubory, screenshoty, moodboardy

Proč je to důležité i mimo Claude Design: SKILL.md je standard, který Anthropic tlačí napříč svým ekosystémem (Claude Code, Claude Cowork). Jakýkoliv systém postavený s touto strukturou je použitelný i jinými agenty — v Cursoru, ve vlastních workflow. Neučíte se ovládat nástroj, učíte se vzor.

Extrakce trvá 15-20 minut na Opus 4.7 a spálí slušnou porci tokenů — ale jakmile je hotová, každý další projekt v tomto workspace brand dědí automaticky. Můžete mít i víc brand systémů na jeden workspace, což ocení agentury nebo multi-produktové týmy.

Test 1: Landing page pro B2B SaaS

Prompt v duchu: „Postav landing page pro B2B SaaS nástroj, který pomáhá marketingovým týmům sledovat konkurenční reklamy. Tmavé pozadí, výrazná typografie, hero sekce s hlavním sdělením a jedním CTA tlačítkem."

Výsledek za ~3 minuty: kompletní landing s hero sekcí, sekcí featurů, sociálním důkazem a footrem. Typografie funguje, hierarchie je čistá, layout responzivní. Kvalita podle Petera Yanga „lepší než to, co byste dostali od juniora za den".

Test 2: Mobilní onboarding flow

Tři obrazovky: welcome, account creation, permissions. Claude vygeneroval iOS-style design s konzistentní barevnou paletou, smysluplnou microcopy a dokonce i empty/error stavy bez extra promptu. Obrazovky jsou zarámované do device mockupu a připravené pro screenshotování do appstore listingu.

Test 3: Analytics dashboard

Komplexní dashboard s charts, KPI kartami, filtry a tabulkou — Claude správně rozhodl, že KPI patří nahoru, charts doprostřed, detailní data dolů. Použil reálné chart komponenty s rozumnými daty, ne placeholdery. Karo Zieminski podotýká, že právě dashboard test je nejtvrdší — vyžaduje hierarchii informací, ne jen pěkný layout.

Test 4: Animované video pro launch

16 sekund animace pro launch produktu — text reveals, logo animace, transition mezi scénami. Export jako MP4. Není to After Effects kvalita, ale pro social ads, product hunt videa nebo shorts to stačí. Tohle je use case, kde Claude Design zabíjí celé kategorie nástrojů (Lottie, Canva animations).

Test 5: Slide deck pro investory

10 slidů: problem, solution, market, traction, team, ask. Claude vygeneroval konzistentní vizuální styl napříč všemi slidy — ne náhodně rozházené šablony, ale skutečný design system. Export do PDF nebo PowerPointu. Peter Yang to popisuje jako „pitch deck, který bych klidně poslal investorovi bez úprav".

Test 6: 3D interaktivní glóbus s reálnými daty

Victor Dibia popisuje nejhlubší test — chtěl na svoje knižní stránky buy.multiagentbook.com přidat rotující glóbus zobrazující čtenáře knihy *Designing Multi-Agent Systems* z více než 100 zemí. Data: Google Analytics (sessions per city) + Stripe (purchases per country).

Workflow (45 minut aktivní pozornosti):

• Nahrál CSS site a screenshot homepage (~5 min) — Claude rekonstruoval celou stránku ve slušné věrnosti
• Popsal úvodní prompt: rotující glóbus, minimálně integrovaný s existujícím hero (~15 min iterací)
• Doladil layout a doplnil reálná data z CSV exportů (~10 min)
• Export do Claude Code přes handoff bundle (~30 min na integraci do React + Vite)

Kde lidský úsudek pořád rozhoduje

Victor zdůrazňuje, že engineering taste zůstává kritický. První draft byl spíš „vizuálně zajímavý" než „užitečná vizualizace komunikující insight". Musel Claude explicitně směrovat:

• Agregovat počty do bucketů místo zobrazování raw analytics čísel (privacy)
• Skrýt city-level data pro Stripe (mít jen country-level)
• Posunout mapu pod fold, aby nesnižovala konverzi na conversion-sensitive page

Claude Design sedí ve středu generační masy, ale citlivá rozhodnutí kolem výstupu jsou pořád na vás — kdy agregovat vs. ukázat raw, co skrýt kvůli privacy, kde to umístit na konverzní stránce.

Claude Code handoff: největší architektonická novinka

Tohle je něco, co Figma Dev Mode neumí. Claude Design exportuje do handoff bundlu strukturovaného pro coding agenta. Bundle přijde jako tar archiv s README, který instruuje coding agent, aby přečetl soubory a přizpůsobil výstup technologii v existující codebase — ne aby strojově konvertoval HTML na React.

Victor popisuje, že Claude Code následně udělal: simplifikaci, tree shaking, performance testing a integraci do React + Vite. Feature, která by bez těchto nástrojů zabrala týden engineering času, byla nasazená za půl dne aktivní práce.

Jinými slovy: Claude Design negeneruje exportovatelný kód, generuje strojově čitelný spec, který další agent přepíše do vašeho stacku. To je řádový rozdíl proti tradičnímu HTML exportu.

Pokračování v 2. dílu

V druhém dílu se podíváme na Tweaks panel, srovnání s Figmou a Lovable, tokenovou ekonomiku Claude Design (spoiler: drahá), praktické tipy na úsporu kreditů a verdikt — pro koho dnes Claude Design dává smysl, a komu se zatím vyplatí počkat.

Zdroje a další čtení

Tento článek vychází ze čtyř hlavních recenzí a oficiální Anthropic komunikace:

• Anthropic Labs: Claude Design announcement
• Claude Opus 4.7 release
• Victor Dibia: How Good is Anthropic's Claude Design? — interaktivní glóbus za 45 minut
• Peter Yang: Claude Design — Everything You Can Build in 16 Minutes — 5 use casů
• Rodrigo Galván: Claude Design — Building at Full Speed on Solid Foundations — analýza architektury
• Karo Zieminski: Claude Design Review — 48-Hour Builder's Test + Hero Prompts — srovnání s Figmou