Claude Design – nový nástroj pro vibe designing postavený nad Claude Code

Vibe-coding dost pravděpodobně znáte. Ale co takovej vibe-designing? Designování nebo respektive tvoření nějakých vizuálů pomocí umělý inteligence, pomocí AI agentů. Tady ty oblasti se teďka začíná dostávat taky do spozornosti.

A jedním z důkazů je nová aplikace Cloud Design od Antropiqu, která vám umožňuje schraňovat váš brand manuál, váš design a na základě toho vašeho nastavenýho designovýho systému tak tvořit pak různý prezentace nebo třeba rovnou prototypy, wireframy nebo celý designy a rovnou i ten kód, rovnou tu aplikaci. Nebo rovnou celý design přeníst a nechat vlastně Cloud Code pomocí toho design systému programovat. Já se jmenuji Filip Poporník z projektu AI s Rozmem a pojďme se společně podívat na aplikaci Cloud Design. lomeno design.

Nenajdete ji v té desktopové aplikaci klódu nikoliv ani právě v telefonu. Opravdu musíte jít přes tu webovou aplikaci. V levý sekci tady rovnou vidíte, co můžete tvořit. Nicméně, my začneme u toho, že si vytvoříme náš vlastní design systém.

To funguje tak, že se připlnete do záložky Design a kliknete Create. A teďka vás začne ta aplikace provádět tím vytvořením designu samotného. Já budu tvořit design system pro sebe, takže tady napíšu, že chci design pro freelancera Filipa Oborníka, který nabízí školení, vzdělávání a vývoj softwaru. Můžu si tady připojit repozitář na GitHubu a nebo můžu tady připojit složku, což já udělám.

Normálně si tady vyberu složku, kde mám svůj web a dám vybrat. Musím povolit, aby vlastně ta webová aplikace, aby ten prohlížeč k ním měl přístup. Teďka tady mám možnost na importovat Figma soubory, což jsou vlastně designový soubory z Figma. Já žádný brand manuál nebo něco podobného nemám, takže to vynechám, ale pokud už máte svůj design system, můžete to importovat tady a opět Cloud Design si vytahá veškerý ty barvy, fonty a styly, který už tam máte nastavený.

Zároveň máte možnost tady přidat fonty a loga, tak já si tady kliknu zase a přidám si zase tady ze složky dva fonty, které já používám. cz. A teďka už jenom kliknu Continue Generate a bude to trvat cirka nějakých pět minut, kdy Cloud začne tvořit ten můj design systém. Já se skoro domnívám, když tady pozoruju Cloud Design.

tak že to je pod kapotou ukrytej cloud kód, nebo aspoň dost podobný cloud kodu. Protože když se podíváte, tak tady je, že se vytvořil nějakej Toodleist, na základě toho Toodleistu vlastně prochází veškerou tu konfiguraci a snaží se na základě toho připravovat ty styly. Takže já si opravdu myslím, že to je takovej skrytej cloud kód, který je vlastně jenom správně napromptovaný, aby pracoval s tím design systémem. A ve chvíli, kdy vám klot vytvoří ten design, tak vy jste schopní ho tady publikovat, když jste spokojený, ale tady vlastně říkáte, jestli jste spokojený nebo ne.

Takže tady je nějaká moje fotka, tady tlačítka, jak by měly vypadat, nějaký jiný tlačítka, kartičky, další věci, které si vlastně vytáhl z té mé webové stránky. Takže vidíte, že on si tu webovou stránku rozkouskoval na logické celky, logické komponenty, se kterýma vlastně pak dál může pracovat. To je za mě jako extrémně působivý, dokonce se vytáhnou ty ikonky, jak s nima pracuju i v nějakých zaoblenejch rozích. Tohle je nějaký rytmičko, to je nějaký popis, řekněme, že je správně.

Zaoblení, delší popisky, shadows, to znamená jak je ta karta vlastně jako zvednutá. to znamená velikosti, nějaký statistický rous, tady vlastně normálně referenci, technologie, to znamená nějaké texty. A vy, když se tady dole podíváte, tak si můžete vlastně nechávat, zobrazovat to, jak to má vypadat. kartičky, typografie, můžeme se poját na Gradient Display.

Můžete si tady vyložit nějakou cokoliv pro jít. Takže tady vidíte třeba Color, Navy Secondary, jaký máme barvy, Primary oranžový barvy na tom popředí nebo respektive na tom povrchu. Zkrátka můžete si tady vlastně hlasovat a zároveň můžete říkat, jestli to má ještě mít nějakou práci nebo ne. To znamená, jestli to má Cloud upravit.

Případně to tady zase dole v chatu můžete popsat. Takže vy si tady v průběžně radíte ten design a ve chvíli, když jste spokojený, tak si dáte publish a dáte si to jako novej design system. Můžete si ho nastavit jako default a pak ho tady vlastně jste schopni normálně používat. A co jsem ještě zapomněl zmínit, tak je to, že vy můžete tady přes ten share dát handoff to cloud code a tím vlastně předáte ten design system, nebo to, co jste vlastně tady vytvořili.

V našem případě je to tady ta komunitní app. Když se podíváte do těch souborů, tak je to vyložně HTML soubor, který se vám tady zobrazí, takže opravdu tohle byste byli podle mě schopni docílit i v cloud kódu klasickým, jenom byste ho museli správně napromtovat. Takže za mě ten design je vlastně jenom takovej wobel toho cloud kódu, ale funguje to jako velmi pěkně. No a já pak tohle můžu vzít, dát share, handoff tu cloud code a vlastně skopírovat si tady ten příkaz a zadat ho cloud kodu, aby on mi s tím mohl pracovat a vlastně inspirovat se tady tomu zadání.

A buď to to můžu dát lokálnímu agentovi, anebo to rovnou můžu otevřít v cloud kodu na webu, což je taky super takový zjednodušení. Zároveň, když jsme tady ještě u těch exportů, tak si tady můžete vlastně ten projekt stáhnout jako zip, můžete to exportovat taky do PDFka a PPTex, což je ten PowerPoint, i tady jistý návrhy. Případně to můžete odeslat do kanvy, případně se stáhnout jako HTML. Takže těch možností, jak můžete vlastně s tím designem, s tím výsledkem pracovat, tak je jako celá řada.

No a ještě takovej malej doplněk, když pracujete s týmem, tak tady můžete přidávat komenty, případně sami si tady můžete přidávat komenty, takový tudůčka, a můžete si říct, který chcete vlastně použít v klódu, přidat nějakou poznámku a vlastně tady si odkládat nápady a postupně pak zapracovávat. Potom, co máme hotovej ten design systém, tak tady vlevo jsme schopní si vlastně vybrat, co budeme chtít tvořit. Můžete si vybrat ten váš design systém, který jste si vytvořili a můžete si zvolit mezi prototypem, slide deckem, templaty a other. Prototyp, tak to je vlastně buď to wireframe nebo high fidelity.

Já už jsem si pro ukázku tady vytvořil vlastně wireframe i high fidelity. Ten wireframe vypadá takhle. Já jsem zadal, že bych chtěl jednoduchou komunitní aplikaci pro svoje členy, které uvidí v moje kurzi moje videa nějaký zajímavý obsah a můžou si tam navzájem povídat. Klod se mě doptal na nějaké otázky, to si za chvilku ukážem, jak vypadá, a vybral nebo vytvořil takovýhle vlastně wireframy.

Když se podíváte, tak je to vlastně náčrtek té aplikace. Já jsem schopnej si tady přepínat, jaký obrazovky chci a mám tady vlastně několik variant. Lufajsky je komunitní aplikace pro členy i AI s rozumem. A mám tady klidnou variantu, klidná studovna, kde vlastně nejsou žádný stríky.

Tady v té druhé pak jsou normálně stríky, to znamená, že získávání bodů, nějakých bonusů. A tady pak mám XPčka, levly, žebříček a zkrátka nějaký pokročilější varianty. Já jsem schopnej si tady zobrazit a skrýt anotace. To je nějaký vlastně komentář k tomu, co tady je vidět.

Tady, že každý má level u toho avataru, takže když to teďka skryju, tak to bude pro mě tady to, že to je ten level. a mám k tomu tady tu vysvětlivku, co znamená tady nějaký banerům. Já pak s tím designem můžu různě pracovat, můžu ho komentovat, to znamená, že jsem schopný Cloudovi říct, že něco přesně chci upravit, nějakej z těch prvků. Třeba tady ten titulek a můžu říct, že ho chci na něco změnit.

A pokud bych chtěl změnit jenom text, tak můžu použít tady si to tlačítko Edit, normálně si tady kliknu a můžu si to přepsat třeba na moje komunita. To znamená, že jsem schopnej poměrně flexibilně si tady něco upravovat. No a poslední varianta je, že můžu kreslit, to znamená, že jsem tady schopnej něco zakrouškovat, dát tady nějakou šipku, do toho tady pak něco napsat, že bych třeba chtěl tam něco změnit a jsem schopnej vlastně tomu jazykovému modelu ukázat, co chci. Co mi přijde trošku divný je, že jakmile začnu scrollovat po té page, tak vlastně to není přilepené k tomu, co jsem zakrouškoval, ale jde to vlastně se mnou.

Což mi přijde takový trošku nešťastný, ale vidím to jako takový bagísek. A normálně si můžu kliknout, že to chci odeslat a tím se mi to vlastně tady odešle do toho jazykovýho modelu, do té konverzace a můžu říct, že chci něco dalšího s tím vlastně udělat. Takhle vypadají nějak ty wireframy, s tím, že vy jste samozřejmě schopný si tam nadefinovat, že chcete toho třeba vygenerovat víc. Když se vrátím a ukážem si ten High Fidelity, to je vlastně tohle, co jsem si vytvořil, tak to už nejsou wireframy, ale je to vyloženě takový proklikávatelný prototyp té aplikace.

Mně se to tady při zdílení obrazovky úplně nevejde celý, ale když si všimnete, tak je to opravdu takováhle celá mobilní appka, která je normálně interaktivní, jsem schopnej si tady třeba rozkliknout detail, vidím detail tohohle kurzu, vidím, jak je sestavenej a jsem schopnej v té appce takhle normálně fungovat. Mám tady i spodní navigační lištu, takže se můžu vlastně přepínat mezi nějakýma obrazovkama. A za mě tohle je fakt fascinující. Jako vypadá to poměrně dobře a musím říct, že to moc hezky dodrželo můj design systém, který to čerpalo jenom z toho webu, z ničeho jinýho.

A zkrátka navrhlo mi to takovouhle appku. Takže je takhle krásně proklikatelná, můžu normálně měnit i ty obrazovky, jakože wow, tohle je velmi zajímavý. Vy si tady zase úplně stejně jako při tom předchozím můžete dávat komentáře, můžete editovat a kreslit, to je vždycky úplně stejný. Koukám, že to tady můžu zmenšit, aby se mi to vešlo, tak já to takhle oddálím.

Takhle vypadá celá ta aplikace, můžu si ji vlastně proklikat. Tohle je za mě fakt super. Zase pomocí chatu jsem schopnej to upravovat. Případně si tady můžu importovat buď to GitHub, webovej element, složku, skily, referencovat další projekt a tak dál.

Za mě jako velmi působivý. A když se přepneme tady nahoře, tak je tady slide deck. Slide deck to je vlastně takováhle prezentace. Když se do ní přepnu, tak ta prezentace, já jsem vlastně to zadání vytvořil takový, že chci vytvořit prezentaci na téma webcodingu a výsledky, které jsem si udělal v nějakým mým složce.

který chystám na Zlínský park, který už pravděpodobně proběhnul. No a když se teďka podívám na tu prezentaci, tak za mě vypadá jako velmi působivě. Drželo se to toho mýho design systému, takže tohle je jako wow. Tohle je taky velmi dobrý.

Tady to sice dalo vymyšlený screenshot, ale ten by se tam dal normálně jako samozřejmě dodělat. moje představení, claim, popíšeš, co máš, čekáš a tak dál. Co je na tomhle super, oproti třeba notebook LM, tak já tady prostě můžu přijít a můžu si tady cokoliv vlastně přepsat, můžu si to upravit, opět můžu komentovat jednotlivý ty slajdy. Za mě tohle je jako velmi, velmi dobrý.

Takže jako ta prezentace musím říct, že mě jako velmi překvapila. Tady dokonce si vykreslil sám nějaký graf. Můžeme se bavit, jestli dává, nedává smysl. Tady bych to asi vykreslil jako jinak.

Nicméně, tohle mi přijde velmi zajímavé, že je schopnej si vlastně do těch prezentací dodělávat nějaký vlastní grafiky. Když to tady doproběhnem, velmi zajímavé a ty prezentace vypadají za mě hezky. Co s tím projektem můžete dělat? Co je super, tak vy to můžete vyexportovat nejenom jako PDF, tak i PPTX, což je PowerPoint prezentace.

A buď toto můžete vyexportovat jako editable, to znamená, že s tím můžete pracovat, případně s univerzálníma fontama. Můžete to vyexportovat jako Google Slidy, no a zároveň to můžete vyexportovat jako screenshot-based PPTX. To znamená, že tam budou zachovaný veškerý ty stily. Když se pak podíváme na tu staženou PowerPointovou prezentaci, tak pokud to máme ten screenshot-based, tak to vypadá vlastně jako úplně stejně.

Jediný co, tak tady nemůžu měnit, ale zkrátka můžete to takhle někomu poslat a můžete to odprezentovat. To je za mě vlastně jako velmi geniální řešení udělat screenshot-based prezentaci, aby se vám žádný dizajn nemohl rozsypat. No a samozřejmě tady můžete rovnou i prezentovat. Takže když dám in this tab, tak jsem schopnej tu prezentaci rovnou odvyprávět a nemusím to ani nikam exportovat.

Třetí variantou je tady from template. To znamená, že vy si můžete z těchto vašich souborů vytvořit takzvané šablony a můžete na základě toho nechat vytvořit nějaké věci. A tady to from template tak znamená, že vy když teď něco budete tvořit, tak to tvoříte na základě třeba této prezentace. Takže nemusíte to tvořit jen na základě toho design systému, ale třeba když si u prezentace odladíte to, jak ji chcete prezentovat, tak si kliknete Share, dáte Duplicate as Template a potom jste schopni z té šablony, když si do ní kliknete, vycházet, dáte New from this template a jste schopni tvořit nějaký design z té šablony.

Vy si tady můžete vybrat, co budete tvořit. To jsou spíš nějaké předdefinované varianty, ale jste schopni s tím pracovat trošku pokročilejc. A pokud je tady other, to vás jenom ekvivalentem přepne do tadytoho chatu, kdy pak jste schopni něco nadizajnovat. A ještě, jak jsem zmiňoval na začátku, že se vás klod doptává, tak já když tady zvolím, že chci nějakou template, tak dám mu, ať vlastně na základě ní pracuje, a on se mě pak tady uprostřed vlastně jako doptá, co vlastně budu chtít.

Takže když mu tady zadám nějaký úkol, tak ještě mám si ukázat, že on se mě vlastně bude pak doptávat na základě toho, co tady má a na nějaký detaily. A takhle pak vypadá to vlastně doptání se na nějaký otázky, které vy tam chcete zodpovědět. Zkrátka takhle se vás pak ten design system doptává na to, co vy tady chcete tvořit. Zároveň, co vy ještě můžete udělat, je tzv.

sketch. Vy když tady něco tvoříte, tak si tady můžete kliknout New Sketch. A tady máte jako nekonečný plátno, na který jste schopný kreslit, přidávat různé stickynoty a další věci. A vy pak tady ten skeč můžete referencovat tady v tom chatu.

Tady vidíte, že se mi už automaticky přidal a já pak na základě toho můžu říct, Na základě tady nějakého mýho nakreslení, jak ten web chci, aby vypadal, tak prosím zapracuj ten design. Pojďme se ještě podívat na to, co Anthropic má tady v ukázkách. Examples. Nějaké efekty na textu, taky velmi zajímavé.

Celý se to vlastně točí kolem animací. Tady je pak vlastně kalkulačka, která umě živě počítat. Takže to je super, že vlastně vy můžete dělat nejen prototyp, vizuální, ale i vlastně funkční. Samozřejmě nedáte tam něco úplně extrémně složitýho, ale tím, že oni vlastně na pozadí používají HTML, je to vlastně aplikace, jste schopný si tam simulovat poměrně komplexní věci.

Jo, tady je například třeba ukázka toho, že jste schopný vlastně natáčet v 3Dčku a zároveň tady něco takhle upravovat živě, to je jako super, když zvětšíme tilt. tak nějakou můžeme pohybovat tou kartou. Tady je zase ukázka toho, jak si můžete simulovat nějaký flow. Není to jenom o tom designu, ale je to i o té uživatelské přívětivosti.

To znamená, že tady ukazuje, si můžete vyskoušet, jak vypadá streamování textu. Buď to takovouhle animací, nějakou objevovací, takováhle animace ze spoda případně. Tady pak třeba zobrazování pomocí jiných písmenek, takové to, že se generuje. Zkrátka, vy jste schopni si vyzkoušet i to, jak nějaký flow, respektive nějaká uživatelská zkušenost, bude vypadat i při používání aplikace v nějakých situacích.

Další věc jsou tady pak různé animace. Organic loader, z tomu říkají, a to jsou zkrátka animace, které si můžete vyzkoušet a můžete je použít i v tom vašem projektu. Vypadá to moc pěkně, když místo klasického načítání máte nějakou takovou animaci. Uponboarding, to už jsme si ukazovali i tam u nás.

Tady pak je nějaká animace ze mě, ale co mě ještě extrémně zaujalo, tak je tady animovaná infografika, což je něco, co firmy dělají hodně často. Má to smysl vysvětlovat data nejenom staticky, ale i nějakou takovouhle hezkou animací, abyste schopni si to v designu, z vašeho designu vytvořit. Samozřejmě tady to vypadá velmi působivě. Když se člověk tvoří pro sebe, tak je to o tom to ladit.

Ale opět, kdybyste tak podle animaci dělali s motion designerem, tak vás to bude stát poměrně dost peněz. Tady jste schopni to vlastně takhle tvořit. To jim přijde skvělý. No a poslední věc, tak tady je shader wallpaper.

Nevím, jak hodně to opravdu používá shadery, nebo jestli to je jenom nějaká simulace. Nicméně jste schopni dělat takovýhle vlastně vizuály, které, když se to týká těch shaderů, tak jsou vyloženě vlastně na té grafické kartě. Ale myslím si, že tady je to spíš nějaká jako simulace. Nicméně taky hezký.

Tohle bylo za mě takové obecné, rychlé představení klo designu. Za mě jako naprosto supersměr, dává to smysl, jde to vlastně jako ruku v ruce s tím, že vy těm agentům potřebujete poskytnout co nejlepší kontext a nějak ho logicky a efektivně strukturovat. Co já jsem strašně zvědavej, my jsme si ukazovali, že jde vlastně stáhnout tady ten projekt do lokálních složek, takže já bych vlastně ideálně chtěl pracovat pořád ve svý lokální knowledge base, to znamená mít vlastně lokálně uložený ty moje data, ať už třeba právě přes Git, zobrazovat si je přes Obsidian, nechat v nich pracovat vlastně v těch markdownech agenta, a k tomu třeba přilepit tady ten repozitář složků, něco takovýho vlastně vklad designu. Mně přijde vlastně strašně geniální, že oni k tomu přistoupili, takže je to vlastně složková struktura, se kterou Cloud Code, já jsem přesvědčený, že tam je jako ten agent minimálně je to těžce inspirovaný Cloud Code, já si myslím, že vyleže pod tím Cloud Code bude běžet a bude mít vlastně nějaký MDčka, který ho konfigurují nějaký skily, který jim vlastně dokážou vytvořit takovýhle vlastně efekty, vlastnosti a pak jenom vlastně to UI, to, co my vidíme v tom cloud designu, tak vlastně jenom obaluje ty lokální složky, který vám zobrazuje.

Takže já si myslím, že to pak půjde propojit s nějakým třeba depozitářem nebo lokálníma souborama. md a podobný, kde mám popsáno, jak se k tomu brandu chovat, tak bych to vlastně mohl napojit na Cloud Design. Ten důvod, proč mi přijde fascinující to mít lokálně, je primárně ten, že Já se snažím všechny ty svoje data a báze stavět tzv. tool agnostic.

To znamená, abych nebyl závislej na nějakým nástroji a když třeba OpenAI nebo někdo jiný přijde vlastně s něčím lepším, tak abych mohl jednoduše přejít. A ve chvíli, kdy já bych vzal teďka všechny data, nalil je sem, tak si vlastně nejsem jistý, jak jednoduše se mi bude přecházet, takže tohle je něco, co třeba já teďka budu zkoumat a pokud to půjde, tak to za mě bude jednoznačný argument, proč cloud design používat. Já jsem jenom Filip Obrník z projektu AI s rozumem. Dejte mi vědět, co si o cloud design myslíte, jestli ho třeba už používáte, nebo jestli vám třeba tam něco nevyhovuje zkrátka, jak se na to díváte, jestli to vidíte jako opravdu velkou revoluci.

nebo jenom takový malý inkrementální vylepšení. Já v tom vidím extrémně chytrý využití klóda, klód kóda vlastně, struktury složek. Zkrátka, strašně se mi líbí, jak nad tím Anthropic přemýšlí. Díky moc, že jste se dívali, budu se nás těšit u dalšího videa, nebo u podcastu Coffee Break s Filipem, který najdete tady na YouTube nebo Spotify.

Případně u podcastu Deep Link Show, který najdete na YouTube, Spotify a dalších podcastových platformách pod názvem Deep Link Show. Odkazy pochopitelně dole v popisku videa. A nově se v Deep Link Show můžete těšit nejenom na mě a Jindřicha, ale taky i na hosty. A budou to velmi zajímavý hosti, který mají velký zkušenosti, nebo stavějí dokonce produkty, který stavějí díky AI, nebo obsahují AI.

Takže brzo se na ně můžete těšit na DeepLink Show. Takže pokud ještě neodebíráte DeepLink Show, to poručuji mrknout. No a já se na vás budu těšit u dalšího videa, nebo v naší komunitě AI s rozumem. Ještě jednou díky, že jste se dívali, mějte se krásně.