Claude Design: Sprievodca a päť praktických scenárov

Praktické informácie o práci s Ailootom nájdete v dokumentácii.

Čo je Claude Design a prečo všetci sledujú 17. apríl?#

Piatok 17. apríla 2026. Anthropic uvádza Claude Design—nástroj, ktorý z textového opisu vytvorí funkčnú vstupnú stránku, prezentáciu pre investorov alebo prototyp mobilnej aplikácie. Nie „ďalší generátor obrázkov“. Je to prvý pokus Anthropic odstrániť dizajnéra z počiatočných fáz vývoja produktu.

O dvadsaťštyri hodín neskôr Adobe oznámilo konektor Firefly-Claude a predstavilo sa ako partnerská platforma. Signál: Anthropic nevyhral vojnu produktov, ale zmenu paradigmy—dizajn sa teraz generuje a etablovaní hráči sa stávajú distribútormi.

Claude Design sa tu skúma z pohľadu vibe codera: čo dokáže, koľko stojí, ako ho používať bez dizajnérskeho vzdelania a na aké praktické úlohy sa hodí. Ak budujete produkt bez interného dizajnéra, tento sprievodca je pre vás.

Čo dokáže Claude Design: 6 typov výstupov#

Stručne, Claude Design vytvára návrhy, ktorých zhotovenie kedysi dizajnérovi trvalo 3–5 dní. Podľa Anthropic existuje šesť typov výstupov:

Rozhranie má dva panely. Chat s Claude je vľavo a živý náhľad plátna vpravo. Proces má päť krokov: nastavenie projektu, opis, kontrola, iterácie a export. Keď je zadanie nejasné, Claude kladie doplňujúce otázky, takže proces pripomína skôr spoluprácu s človekom než používanie generátora.

Čo prijíma ako vstup:

1. Textové zadania (hlavný spôsob použitia).
2. Snímky obrazovky, obrázky a existujúce podklady.
3. Dokumenty: DOCX, PPTX, XLSX.
4. Kódovú základňu—cez odkaz na repozitár alebo importovaním lokálneho priečinka.
5. Snímku existujúcej webovej stránky podľa URL.

Formáty exportu:

1. PDF.
2. PPTX (PowerPoint).
3. Samostatný súbor HTML—môžete ho ihneď nahrať ako stránku.
4. Prenos do Canvy—otvorí sa tam ako plne upraviteľný projekt.
5. Balík pre Claude Code—s úplným zámerom návrhu na vývoj.
6. Zdieľanie odkazu v rámci organizácie.

Čo Claude Design nerobí (je dôležité vyjasniť si to hneď na začiatku):

• Neupravuje kódovú základňu ani nespúšťa príkazy—to je úloha Claude Code.
• Neimportuje ani neexportuje súbory .fig—nemá natívnu integráciu s Figmou.
• Nenahrádza Figmu ani Canvu.
• Nemá záznam aktivít ani správy pre administrátorov, takže nie je vhodný pre veľké spoločnosti s požiadavkami na súlad s predpismi.
• Nemá vstavaný export videa—animácie možno zaznamenať iba ako screencast.

Ako sa Claude Design líši od Figmy, Lovable, v0 a Canvy#

V prístupe opísanom v tomto článku sa týchto päť nástrojov používa na rôzne úlohy. Tu je porovnanie k máju 2026:

V čom Claude Design prekonáva všetkých:

1. Dizajnový systém z kódovej základne. Žiadny z konkurentov automaticky neextrahuje súbor komponentov z repozitára. v0 dokáže importovať z Figmy, ale nie z kódu.
2. Uzavretý cyklus s Claude Code. Zámer návrhu sa zachová. Lovable a Bolt to robia v jednom nástroji, ale dizajn je tam vedľajším produktom kódu.
3. Viacero výstupov z jedného kontextu. Jedna značka—vstupná stránka, prezentácia, e-mailová kampaň, kreatíva pre sociálne siete. Ostatné nástroje robia iba jednu z týchto vecí.
4. Netreba sa učiť rozhranie. Nemusíte sa učiť rozhranie ako vo Figme. Je to dôležité pre publikum „zakladateľov a produktových manažérov bez dizajnérskeho vzdelania“—oficiálne vymedzenie Anthropic.

V čom Claude Design zaostáva:

1. Bez úplnej integrácie databázy a servera. Lovable a Bolt poskytujú funkčnú aplikáciu s databázou, autorizáciou a publikovaním. Claude Design poskytuje iba frontend. Rovnaký výsledok dosiahnete takto: Claude Design → Claude Code → Vercel alebo iný hosting → platobný systém ručne. Tri nástroje namiesto jedného.
2. Bez súborov .fig. Dizajnéri nemôžu preniesť výstup do Figmy—iba ako snímku obrazovky alebo po opätovnom vytvorení.
3. Bez bezplatného plánu. Všetci konkurenti majú bezplatný plán. Claude Design je dostupný s plánom Pro a vyšším.
4. Doladenie. Figma naďalej dominuje pri finálnej pripravenosti na produkciu. Claude Design slúži na prvý návrh.
5. Rýchlosť pri jednoduchom prototype. Bolt je pri jednoduchom prototype rýchlejší—spustí ho v prehliadači za pár sekúnd.

Claude Design je nástroj na inú úlohu: vytvorenie prvého návrhu bez dizajnéra, ktorý potom prevezme niekto iný.

Koľko stojí Claude Design a ako skontrolovať prístup#

Plány a prístup:

Úvodný kredit sa poskytuje iba raz—balík 20 bežných zadaní platný do 17. júla 2026. Stačí na vytvorenie 2–3 úplných projektov a rozhodnutie, či je Claude Design pre vás vhodný.

Tlačidlá rozhrania sú iba v angličtine.

Ako pripojiť dizajnový systém z vašej kódovej základne#

Hlavná konkurenčná výhoda Claude Design sa týka ľudí, ktorí už niečo vytvorili. Žiadny iný nástroj automaticky neextrahuje dizajnový systém z repozitára. Je to podobné prístupu Second Brain: svoju značku Claude nevysvetľujete—poskytnete mu odkaz na zdroj a ono si všetko zistí samo.

5 krokov nastavenia:

1. Otvorte Claude Design na adrese claude.ai/design a vytvorte nový projekt.
2. Pri úvodnom nastavení vyberte zdroj dizajnového systému. Dostupné možnosti: pravidlá značky, frontendová kódová základňa, staršie prezentácie a príručky štýlu, živý web podľa URL, súbory Figma.
3. Ak vyberiete repozitár—poskytnite odkaz na GitHub. Claude stiahne frontendový priečinok a analyzuje nastavenia témy, premenné štýlov, existujúce komponenty a typografiu.
4. Ak vyberiete živý web—poskytnite URL. Claude zachytí štruktúru stránky a extrahuje farby, písma a vzory tlačidiel a kariet.
5. Potvrďte extrahovaný súbor komponentov. Claude zobrazí extrahovanú paletu, písma a základné komponenty, ktoré môžete pred uložením upraviť.

Potom každý nový projekt v Claude Design automaticky zdedí váš dizajnový systém. To znamená, že vstupná stránka, ktorú dnes vytvoríte, bude vyzerať rovnako ako váš súčasný web.

Zadanie na opätovnú kontrolu dizajnového systému:

Ukážte mi aktívny dizajnový systém v tomto projekte: farebnú paletu, typografiu,
základné komponenty, vzory rozostupov a polomery zaoblenia rohov. Porovnajte ho s mojím živým
webom [URL] a označte všetky rozdiely.

V opísanom postupe sa táto kontrola opakuje každé 3–4 iterácie v rámci projektu. Anthropic vo svojom oznámení otvorene varuje, že po niekoľkých iteráciách môže Claude zabudnúť dizajnový systém a vrátiť sa k predvoleným vzorom. Riešením je pravidelne použiť zadanie, ktoré ho vráti k vášmu súboru komponentov. V podstate ide o rovnaké context engineering ako v Claude Code: kontext sa spravuje výslovne, nie potichu.

Scenár 1: Vstupná stránka pri uvedení produktu#

Podľa opísanej skúsenosti je prvým výsledkom nového experimentu v Claude Design vstupná stránka. Predtým: deň prípravy zadania pre dizajnéra a potom týždeň iterácií. Teraz: jedno zadanie, hodina úprav a hotové HTML.

Šablóna zadania:

Vytvorte vstupnú stránku pre [NÁZOV PRODUKTU, jednovetový opis].
Vizuálne smerovanie: spojenie [referenčnej značky 1] a [referenčnej značky 2],
s [prídavným menom] a [prídavným menom] tónom. Štruktúra: úvodná sekcia s jedným
návrhom hodnoty, tri sekcie s výhodami, formulár na registráciu prednostného prístupu,
FAQ s 5 otázkami, päta stránky. Použite môj dizajnový systém.

Čo dostanete: Samostatný súbor HTML so zabudovanými štýlmi. Môžete ho nahrať ako stránku na svoj web alebo ako samostatný projekt na ľubovoľný hosting.

Čo ľudia po Claude zvyčajne kontrolujú a upravujú:

• Konkrétny text úvodnej sekcie—Claude dobre zvláda štruktúru, ale nie pochopenie významu produktu.
• Obrázky—Claude vkladá zástupné prvky. Nahrádzam ich vlastnými alebo ich vytváram v samostatnom nástroji.
• Metriky a čísla—vždy používam skutočné. Nikdy si nevymýšľajte „80 % našich zákazníkov“.

Úspora času: 6–8 hodín práce dizajnéra a deň vývoja frontendu pri typickej vstupnej stránke k uvedeniu produktu. Claude Design vytvorí prvý návrh za 40–60 minút a potom nasleduje hodina iterácií.

Scenár 2: Prezentácia pre investorov alebo partnerov#

Prezentácia je druhým hlavným scenárom: materiály pre investorov, prihláška do akcelerátora alebo rozhovor s partnerom.

Šablóna zadania:

Vytvorte 10-snímkovú prezentáciu Series A pre [Company],
ktorá tvorí [čo] pre [koho] a dosahuje [kľúčovú metriku]. Publikum:
začiatoční investori do B2B SaaS. Tón: sebavedomý, srdečný, bez preháňania. Snímky
v tomto poradí: titulná, problém, riešenie, výsledky (výrazne zvýraznite metriku),
demonštrácia produktu, veľkosť trhu, obchodný model, konkurenti, tím, požiadavka.

Čo dostanete: Súbor PPTX a prenos do Canvy. V Canve sa súbor otvorí ako plne upraviteľný spolupracovný projekt.

Čas: Ušetríte 6–10 hodín v porovnaní s ručnou tvorbou. Najviac času ušetrí pri typografických snímkach—veľké nadpisy, minimum vizuálneho neporiadku, všetko podľa vášho dizajnového systému.

Úskalie: Claude Design vytvára statické snímky. Ak potrebujete animácie, preneste ich do Canvy a animujte tam alebo použite Figmu.

Scenár 3: Klikateľný prototyp mobilnej aplikácie#

Praktický scenár: otestujte hypotézu o mobilnej aplikácii skôr, než zaplatíte vývojárovi.

Šablóna zadania:

Vytvorte interaktívny uvítací prototyp mobilnej aplikácie [product]
s tromi scenármi: prázdny stav, prvá akcia používateľa a okamih
pochopenia. Prvky nastavte ako klikateľné pre nemoderovaný používateľský test
prostredníctvom Maze alebo Useberry.

Čo dostanete: Odkaz na prototyp. Môžete ho poslať priamo do Maze na testovanie s 5–10 používateľmi.

Čo skontrolovať:

• Rozmery obrazovky—overte, či Claude použil správny pomer strán pre iOS/Android.
• Hĺbku scenára—Claude niekedy zredukuje zložité vetvy na jednu obrazovku. Zadanie „zobrazte každú vetvu ako samostatnú obrazovku“ to napraví.
• Stavy—prázdny, chybový, načítavací. Nevytvorí ich, ak o ne nepožiadate.

Ušetrený čas: 1–2 sprinty v porovnaní s ručnou tvorbou vo Figme + ProtoPie.

Scenár 4: Marketingová kampaň s 5 jednostránkovými webmi#

Scenár pre ľudí pracujúcich s platenou reklamou: porovnajte päť návrhov hodnoty s rovnakým formulárom a jednotnou metódou merania.

Šablóna zadania:

Vygenerujte 5 značkových jednostránkových webov na testovanie rôznych návrhov hodnoty:
[možnosť 1, možnosť 2, možnosť 3, možnosť 4, možnosť 5].
Každý potrebuje úvodnú sekciu s jedinečným nadpisom, obrázkom a tlačidlom
s výzvou na akciu smerujúcim na [ROVNAKÚ SKUTOČNÚ URL FORMULÁRA]. Každý exportujte ako samostatné HTML.
Exportujte aj náhľady PDF a priečinok Canva na kontrolu dizajnu.
Vo všetkých piatich stránkach zachovajte rovnaký cieľ CTA aj merané udalosti.

Čo dostanete: Päť návrhov stránok HTML, päť náhľadov PDF a priečinok projektu Canva. Náhľady pomáhajú schváliť dizajn; nedokazujú funkčnosť stránok ani merania konverzií.

Pred spustením návštevnosti:

1. Zverejnite každú stránku HTML na vlastnej URL u vybraného hostiteľa alebo ju odovzdajte Claude Code na zapracovanie do webu.
2. Nahraďte zástupné údaje a skontrolujte každé CTA. Cez spoločný formulár odošlite neškodný skúšobný záznam a overte, že dorazí na určené miesto.
3. Každej stránke priraďte odlišný štítok kampane alebo variantu. Návštevy, kliknutia na CTA a úspešné odoslania formulára zaznamenávajte oddelene, aby ste porovnávali rovnaké činnosti návštevníkov.
4. Otvorte zverejnené URL na počítači aj mobile, overte zaznamenané skúšobné udalosti a až potom spustite plánovaný experiment s návštevnosťou.

Použitie: Platená reklama, e-mailové kampane a testy na sociálnych sieťach. Mieru preklikov porovnávajte ako kliknutia na CTA na návštevu stránky a konverziu ako úspešné odoslania na návštevu. Samotná kontrola PDF či Canvy je kontrolou dizajnu, nie týmto živým testom.

Úskalie: Claude Design vyberá obrázky zo svojich podkladov automaticky. Ak potrebujete konkrétne fotografie, nahrajte ich vopred.

Scenár 5: E-mailová kampaň pre Resend, Mailchimp alebo Sendsay#

Každá hromadná e-mailová kampaň potrebuje šablónu HTML so zabudovanými štýlmi. Pre marketéra bez frontendového vývojára je to technický problém.

Šablóna zadania:

Vytvorte šablónu HTML e-mailu pre [tému kampane]. Dizajn: tmavá téma,
hlavný akcent vašej značky, písma značky. Štruktúra: podnadpis,
nadpis, 3 odseky, tlačidlo s výzvou na akciu, podpis. Exportujte ako
samostatný súbor HTML so zabudovanými štýlmi a bez externých závislostí.

Čo dostanete: Súbor HTML pripravený na vloženie do Resend, Mailchimp, Sendsay alebo Unisender.

Čo ľudia zvyčajne kontrolujú a upravujú:

• Šírku—e-mailové klienty uprednostňujú pevnú šírku 600px.
• Obrázky—odkazy nahrádzam odkazmi na vlastné podklady umiestnené online.
• Verziu v obyčajnom texte—Claude Design ju nevytvára; píšem ju sám.

Ušetrený čas: 2–3 hodiny práce s rozložením na každú šablónu.

Odovzdanie do Claude Code: uzavretý cyklus#

V prístupe opísanom tu táto funkcia odôvodňuje výber Claude Design, aj keď máte Figmu. Každý iný dizajnový nástroj odovzdáva obrázok alebo súbor Figma. Vývojár sa naň potom pozrie a preloží ho „podľa svojho chápania“. V tomto kroku sa stratí 30–40 % zámeru návrhu.

Claude Design poskytuje balík, ktorý obsahuje nielen vizuálne prvky, ale aj:

• Štruktúru komponentov (ako spolu logicky súvisia).
• Logiku dizajnových rozhodnutí (prečo sú rozostupy takéto, prečo sú polomery rohov takéto, prečo je hierarchia takáto).
• Responzívne kotvy—miesta, na ktorých sa blok „prichytí“ k obrazovke pri rôznych veľkostiach.
• Pomenované hodnoty štýlov namiesto magických čísel.

Claude Code otvorí tento balík priamo a napíše kód, ktorý zachová zámer. Nerekonštruuje iba obrázok v rozložení; implementuje logiku návrhu. Funguje to spolu s CLAUDE.md vášho projektu: čím presnejšie sú pravidlá v CLAUDE.md, tým menej sa Claude Code „odchyľuje“ od pôvodného zámeru.

Pracovný postup:

1. V Claude Design—dokončite návrh → kliknite na „Export to Claude Code“.
2. V Claude Code—otvorte projekt → vložte ID balíka → zadanie: „Implementujte tento návrh v src/components/.“
3. Claude Code—prečíta balík, pochopí vzory a napíše komponenty s použitím vášho aktuálneho stacku (Next.js + Tailwind, Vue, Svelte—čokoľvek používate).
4. Potom—vykonávajte zmeny buď v kóde cez Claude Code, alebo v Claude Design (nová iterácia návrhu) a opäť ho odovzdajte.

Čo je dôležité: nejde o „AI píše frontend“. Ide o to, že „dizajn a kód sa stanú jedným dokumentom“. Keď v Claude Design zmením rozostupy medzi sekciami, Claude Code v ďalšej iterácii pochopí, že ide o nový vzor, nie o jednorazovú opravu.

V čom konkurenti zaostávajú:

• Lovable / Bolt—dizajn je vedľajším produktom kódu. Ak chcete zmeniť dizajnový systém, prepíšete celé zadanie.
• v0—poskytuje komponenty React, ale nie balík obsahujúci zámer návrhu. Potom pracujete s kódom, nie s dizajnom.
• Figma + Cursor—pluginy existujú, ale prenášajú iba vizuálne prvky, nie logiku rozhodnutí.

Exkluzívna integrácia, ktorá začleňuje Claude Design do stratégie „agent plus canvas“ spoločnosti Anthropic.

Čo nefunguje: architektonické slabiny#

Anthropic to otvorene priznáva: ide o ukážkovú verziu. Niektoré funkcie stále zlyhávajú.

Architektonické slabiny:

• Chýba záznam aktivít—problém pre veľké spoločnosti s požiadavkami na súlad s predpismi.
• Chýbajú požiadavky na uchovávanie údajov—nemožno ho používať s regulovanými údajmi.
• Experimentálny dizajn (hlas, video, 3D) je označený ako experimentálny a môže zlyhať.
• Chýba vstavaný export videa—animácie možno zaznamenať iba ako screencast.

Zvláštnosti správania Claude (spoločné pre všetky nástroje, nielen Design):

• Po niekoľkých iteráciách zabudne požiadavky a vráti sa k predvoleným vzorom.
• Darí sa mu pri jasne štruktúrovaných úlohách (opakovaní vzoru), menej pri otvorených úlohách (vymýšľaní nového smeru).
• Môže „lipnúť“ na svojich návykoch namiesto nasledovania stanovených cieľov.

Riešením je každé 3–4 iterácie použiť pripomínacie zadanie, ktoré ho vráti k dizajnovému systému. Nie je to prekážka, ale vyžaduje si to návyk.

Kedy zostať pri Figme, Lovable alebo Canve#

V prístupe opísanom v tomto článku sa týchto päť nástrojov používa na rôzne úlohy. Tu je úprimný prehľad, kedy použiť každý z nich:

Použite Claude Design, ak:

• Ste zakladateľ, produktový manažér alebo marketér bez dizajnérskeho vzdelania.
• Potrebujete prvý návrh prezentácie, vstupnej stránky alebo makety za hodinu, nie za deň.
• Už máte kódovú základňu alebo pravidlá značky, ktoré Claude môže použiť.
• Plánujete odovzdať návrh dizajnérovi alebo vývojárovi na doladenie.
• Píšete kód pomocou Claude Code a chcete uzavretý cyklus „návrh → vývoj“.

Použite Figmu, ak:

• Ste dizajnér a pracujete na finálnom doladení.
• Potrebujete pracovať v tíme so spoločným dôrazom na odovzdanie vývojárovi.
• Potrebujete pluginy, režim pre vývojárov alebo dôslednú správu verzií.
• Potrebujete finálny návrh pripravený na produkciu.

Použite Lovable alebo Bolt, ak:

• Potrebujete funkčný produkt s databázou, autorizáciou a publikovaním z jediného zadania.
• Ste ochotní vymeniť dizajnové doladenie za rýchlosť.
• Záleží vám na bezplatnom pláne.

Použite Canvu, ak:

• Potrebujete marketingové materiály z hotových šablón.
• Dizajnová úloha spočíva v skladaní prvkov z knižnice, nie v kreatívnom vytváraní.
• Potrebujete tlač, sociálne siete a video v jednom produkte.

Použite v0, ak:

• Tvoríte frontend a potrebujete hotové komponenty na kopírovanie a vkladanie.
• Už pracujete v ekosystéme Next.js / Vercel.
• Chcete importovať priamo z Figmy.

Typický postup v prístupe opísanom tu: Claude Design vytvorí prvý návrh vstupnej stránky → Claude Code ho presunie do src/app/ → úpravy v kóde → ak potrebuje typografické doladenie, prejdem do Figmy → ak potrebuje animáciu pre sociálne siete, prejdem do Canvy.

Claude Design netvrdí, že dokáže všetko. Chce byť prvým krokom, po ktorom už viete, čo urobiť ďalej.

Prejdite na Ailoot.