Claude Design 2.0: Jak dobry faktycznie jest?

Clot Design, czyli narzędzie do projektowania stron, aplikacji, tworzenia animacji, dokumentów czy prezentacji, dostał właśnie jedną ze swoich większych aktualizacji. A dzisiaj w tym krótkim filmie przejdziemy przez wszystkie nowe funkcje. Co dokładnie tutaj można zrobić? Pokażę jakieś swoje ciekawe zastosowania, może was do czegoś zainspiruje i co i zapraszam.

Więc dostać się do Cloud Design najłatwiej jest bezpośrednio z aplikacji clot.ai. Wchodzimy pod design. Jak widzicie od razu jesteśmy, ale tak samo jeśli macie aplikację ściągniętą na komputer, teraz dodali funkcję, że możemy sobie tutaj pracować na naszym komputerze klikając jak widzicie tutaj design. Więc tak jak wolicie, to jest to samo.

Przede wszystkim to co się zmieniło od ostatniej wersji to jest nowy ten UI, nowy ten interfejs użytkownika, który jest no trochę przyjemniejszy niż ta poprzednia wersja, ale swoją drogą zawsze dziwi mnie to, że firma jak Antropic wyceniana na miliardy dolarów i tworząca produkt dla projektantów nie potrafi na przykład tutaj zobaczcie jak mało jest przestrzeni między górą a pierwszym nagłówkiem. To jest wiadomo, mogę się przyczepiać, ale przez jakiś czas byłem projektantem i po prostu strasznie to jest rażące. Tak, za mało tu jest przestrzeni, żeby oddychać, ale już nie przyczepiajmy się do tego, tylko zobaczmy jak funkcjonalność samego produktu może nam pomóc. Więc to by była pierwsza rzecz, czyli nowy interfejs, w którym współpracujemy.

A druga rzecz to fakt, że od tej pory użytkowanie tej aplikacji wchodzi w ogólny limit użytkowania naszej subskrypcji Cloda. Wcześniej natomiast było tak, że kredyty do korzystania z Cloud design były oddzielne, przez co jeśli ktoś chciał faktycznie coś zrobić, no to po prostu nie mógł, bo te kredyty były śmiesznie niskie i mało co można było zrobić, a teraz już można, jako że to wszystko wchodzi w skład in jednej subskrypcji, ale oczywiście przez to nam się szybciej zużywają limity w ogólnej subskrypcji Cloda.

Dobra, ale już do rzeczy, już do faktycznego korzystania z tej aplikacji. Pierwszą świetną funkcją, którą wprowadzili jest możliwość tworzenia design systemu. To już wam tłumaczę o co z tym chodzi. Zobaczcie, tutaj akurat już mam stworzony jakiś design system dla siebie, ale jeśli chcemy stworzyć nowy, tutaj klikamy plusik. I teraz już wam tutaj więcej tłumaczę.

A jeśli nie wiecie, czym jest taki design system, no to najprościej mówiąc, to jest po prostu system projektowy, tak żeby twoje wszystkie strony, podstrony wewnątrz danej strony, aplikacje, projekty, czy też prezentacje, czy dokumenty były w tym samym brandowym stylu. Jeśli chcemy w innym stylu, możemy stworzyć oddzielny design system, ale dzięki temu nie musimy raz po raz ciągle tłumaczyć tego, jak to ma finalnie wyglądać. Nie musimy załączać inspiracji, bo wszystko jest po prostu ustalone.

Możemy stworzyć to bezpośrednio korzystając z clot codea. Jeśli pracujemy nad jakimś projektem, to możemy wezwać tam taką komendę/cand design sync, co się wtedy synchronizuje, jeśli mamy odpowiednie komponenty i będziemy mieli gotowy ten system projektowy, ale możemy także stworzyć bezpośrednio. Ja też tak stworzyłem swoje, bo akurat w moim cloud codzie było odpowiednich komponentów, więc stworzyłem po prostu tutaj create here i wkleiłem swój link do GitHuba. Tak było po prostu najprościej. Tak swój projekt, którym jest Cloudmaster, do którego też was serdecznie zapraszam. Możecie sobie więcej poczytać, jak chcecie. Bardzo fajny projekt, bardzo fajne warsztaty. Mam to wgrane na swój GitHub, gdzie po prostu kopiuję sobie link, wracam do Cloud Design i go wklejam. Tutaj muszę być oczywiście połączony z GitHubem, ale to to nie jest nic trudnego. Na pewno sobie dacie radę.

Jeśli nigdy nie korzystacie z GitHuba, no to to jest po prostu taki najprościej mówiąc Google Drive dla osób, które tworzą swoje projekty z kodem. programistyczne, tak? Tutaj przechowujemy swoje pliki, projekty, repozytoria, żeby móc nimi łatwo się dzielić, żeby móc łatwo współpracować i łatwo śledzić zmiany. Więc tutaj wgrałem ten swój folder Cloudmaster, a tutaj jeszcze na samej górze opisałem czym to dokładnie jest, tak swoimi słowami, że to są warsztaty i kurs z klotką dla nieprogramistów, dla przedsiębiorców i tak dalej, i tak dalej. Już nie będę wam tej reklamy robił, po prostu opisałem swoimi słowami i przyszedłem dalej. Tutaj wpiszę może test i to wyłączymy później.

Przyszedłem do generowania tego i trwało to, no tutaj akurat sprzedają, że 5 minut, ale trwało nieco więcej, ale wygenerowało mi coś naprawdę świetnego. Pozwólcie, że wam pokażę. Mogę bezpośrednio to znaleźć tutaj pod Design Systems. I zobaczcie moi drodzy, na podstawie tylko czegoś takiego stworzyło mi pełen zestaw zasad projektowych odnośnie tego, tutaj akurat jest na razie tylko tekst, ale zaraz zobaczycie też na żywo, odnośnie tego jak moje komponenty, jak moja czcionka, jak moje kolory, jak cała moja strona ma wyglądać. I wzięło to wyłącznie z tego folderu, który mu wysłałem. W tym folderze jest no na przykład ta strona, tak? i on to sobie wyciągnął, wypisał reguły, przetłumaczył na swój język, dzięki czemu wszystkie przyszłe prezentacje, strony, aplikacje przestrzegają tych oto reguł i wyglądają w ten zacny sposób.

Więc jeśli macie jakiś swój określony styl, to na początku polecam wam po prostu go stworzyć. Tak, oczywiście nie trzeba tutaj załączać swojego linka do repozytorium na GitHubie. To nie jest obowiązkowe, ale po prostu łatwiej. Jeśli tutaj nigdy nie korzystacie z GitHuba, nie musicie tego robić, ale będzie naprawdę dużo, dużo łatwiej także do innych projektów, także do korzystania z CL Codea, więc polecam trochę zgłębić również temat GitHuba, jeśli to jest coś dla was nowego.

No dobra, więc tak jak widzicie, mamy już swój design system gotowy. Wybraliśmy go tutaj z dropdna, żeby był jako ten referencyjny styl. I teraz co możemy dalej zrobić? Możemy przede wszystkim wybrać jedną z gotowych szablonów, jedną z gotowych templatek, tak jak widzicie, prototyp, czyli po prostu strona, czyli po prostu coś, co można klikać. Możemy zrobić slajdy, czyli prezentację, dokument. No to wiecie co jest dokument? Wireframe to jest po prostu szkielet strony, w którym docelowo nie ma dużo designu, tylko sama funkcjonalność odnośnie tego, co gdzie jest, co gdzie się klika i animation, czyli animacja, czyli jakiś filmik na przykład sprzedażowy, na przykład dla swoich warsztatów, który też wam zaraz pokażę. Oczywiście stricte edukacyjnie w żaden sposób nie sprzedażował.

Więc myślę, że na nasze potrzeby możemy wybrać sobie prototyp, jako że pokażę wam po prostu ciekawy jakiś sposób odnośnie tego, jak jak z tego samemu korzystałem. No bo jeju, tyle widzę tych filmów na YouTubie, gdzie ktoś tworzy jakąś stronę dla fikcyjnej kawiarni. No to jest tak oderwane od rzeczywistości, że aż mi się troszkę przykro robi. Więc wybieram prototypem, jako że klasyfikuje się jako regularny użytkownik Cloud Code i większość rzeczy robię w Cloud Codzie. I tak się zastanawiałem, co mogę fajnego w tym designie zrobić. Mianowicie mogę sobie fajnie robić wariacje różnych rzeczy, a nie za każdym razem robić to tylko w Cloud Codzie i tam sobie to mieszać. Tutaj sobie testuję kilkanaście różnych propozycji odnośnie tego, jak jedna sekcja na mojej stronie mogłaby wyglądać, a później tą najlepszą kopiuję i wdrażam w clotzie. To jest bardzo, przynajmniej dla mnie fajne zastosowanie. Tak.

I oprócz tego jeszcze tutaj jak pracuję to wybieram zwykle ten to swoje repozytorium na GitHubie, żeby na pewno odnosił się stricte do tej strony. I co? I po prostu wysyłam mu prom. Go oczywiście wcześniej przygotowałem. To jest kwestia tego, tak jak wam mówiłem, że chcę cztery wariacje nowej odsłony mojej sekcji Hero. Sekcja Hero to jest ta pierwsza sekcja na stronie, którą widzimy z nagłówkiem, z przyciskiem, z jakimś podtytułem. I tutaj mu tłumaczę jak myślę, że to mogłoby wyglądać i proszę go, żeby mi wygenerował. Na końcu oczywiście można sobie wybrać model, z którego chcemy skorzystać. Możemy wybrać Fable 5, który jutro już znika przynajmniej w momencie, w którym nagrywam, więc jak to oglądacie, to może już go nie być. Opus 4 i8, Sonet. Zwykle korzystam albo z Sonet, albo Opus 4, jako że o dziwo tutaj akurat w Cloud Designie Sonet sobie bardzo przyzwoicie radzi, więc zostajmy w tym przypadku z Sonetem i okej. I możemy to wysłać.

Ale tutaj jeszcze jedna ważna uwaga, taka podfunkcja, może nawet nie podfunkcja, może dla niektórych będzie bardzo przydatna, czyli fakt, że teraz w desajnie możemy tak samo wybrać sobie narzędzia, te konektory, z którymi się łączymy. Czyli na przykład jakbyśmy chcieli już stworzyć jakieś dedykowane zdjęcia czy filmy, które będą na tej stronie, to możemy się połączyć na przykład z Hixfield czy z jakimś innym rozwiązaniem, które tworzy te zdjęcia i filmy, jako że Clot samemu ich nie tworzy i dzięki temu one będą już bezpośrednio osadzone na naszej stronie i bardzo to po prostu fajnie działa. Widziałem poradniki innych. Samemu akurat z Hixfielda niespecjalnie obecnie korzystam, ale działa to w ten oto sposób i można sobie tak połączyć.

Dobra, więc po prostu wysyłamy. No i co? I tak jak widzicie na takim otwartym płótnie, które możemy sobie śmiało scrollować, mamy cztery różne wersje tej sekcji Hero, czyli tej pierwszej sekcji na stronie. Tak? No okej, no jakoś wyglądają. Już tutaj nie będziemy wchodzili czy są fajne, czy nie, ale załóżmy, że coś mi się nie podoba. Może dajmy na to w tej sekcji, tak? Więc wtedy też nowa funkcjonalność. Klikam edit. I moi drodzy, tak jak widzicie, możemy teraz po prostu dużo więcej sobie bezpośrednio edytować. Jakby starali się trochę nadgryźć rynku Figmie, czyli oprogramowaniu właśnie do projektowania. My możemy tutaj to samo. Oczywiście Figma jest jeszcze bardziej zaawansowana, ale możemy sporo sami tu już wyklikać, czyli nie musimy wysyłać prompta. Czy na przykład nie podoba mi się guzik freelancerzy, chcę żeby był taki i taki, zmień to. Tak, możemy to zrobić po prostu ręcznie. Mamy tutaj po lewej stronie zakładki Simple Pro i też kod, że możemy bezpośrednio w kodzie coś zmienić. Możemy na ten moment poruszać się w simple, bo to chyba da nam wszystkie funkcjonalności. W Pro jest jeszcze więcej odnośnie tego, jak to wszystko wygląda. Jeśli robiliście kiedyś strony, to będziecie wiedzieli o co chodzi. Możemy tutaj bezpośrednio sobie monitorować divy, które są divy, które są osadzane wewnątrz siebie. Ale w tym momencie zostajemy przy simple i wybierzmy sobie na przykład zmianę koloru tła. Tak, moglibyśmy tutaj sobie zmienić na coś bardziej na przykład białego takiego. Niech będzie. Nie jest najgorzej tutaj trochę przezroczystość zmienić. Tak, widzicie, drobna zmiana, ale troszkę daje takiego klimatu. Możemy na przykład te rzeczy zmienić border, czyli żeby nie było w ogóle oprogramowania. Chciałem powiedzieć obramowania. I co? I jakoś to wygląda. No mówię, nie dyskutujemy dzisiaj, czy to jest fajne, czy nie, ale możemy to robić tutaj sobie bezpośrednio, później zapisujemy i jest okej. I mamy to i i zmieniliśmy to ręcznie, nie musieliśmy promptować i tłumaczyć mu dokładnie tego, co chcieliśmy zrobić. Oczywiście możemy tak samo zmieniać tekst, możemy naprawdę dużo, tak jak widzicie już oczywiście nie przejdę przez wszystko, ale możemy naprawdę sporo, ale to też jeszcze nie wszystko, bo oprócz tego możemy sobie tutaj dodawać komentarze. Tak, no nie jest to żadne wow, ale też pokażę wam fajny myk, bo dajmy na to, że nie podoba nam się coś większego, tak? Coś co byśmy sami nie zmienili, to na przykład nie wiem, to przeskakujące nam się nie podoba. I dajmy na to, chcę, żeby ta animacja, te przeskoki były bardziej smooth, bardziej gładkie. I możemy teraz mu wysłać bezpośrednio do Cloda, ale możemy po prostu dodać komentarz, okej? I zobaczyć, czy coś nam się jeszcze przypadkiem nie podoba. Na przykład ten guzik, to klikamy tutaj i tutaj chciałbym, żeby guzik był koloru niebieskiego. Wysyłam mu addom. I teraz możemy mu powiedzieć, jak już dodamy te komentarze, żeby zastosuj wszystkie zmiany, które zostawiłem ci w komentarzach. I on wtedy on widzi te komentarze i przechodzi przez je wszystkie na raz, a nie tylko pojedynczo, przez co za każdym razem musi generować stronę od nowa i palić nam kredyty. Więc też taki fajny myczek. Można sobie śmiało z tego skorzystać. Tu jest jeszcze zakładka Twix. Jeśli nie potrafimy wyrazić tego, co chcemy otrzymać, to możemy go poprosić o jakieś szalone pomysły, ale nie wiem. Ja wolę raczej opisywać bardziej dokładnie to, co chciałbym otrzymać. I okej.

I tutaj jeszcze bardzo ważna rzecz, która też jest bardzo fajną funkcją, czyli możliwość eksportowania tego bezpośrednio do projektu, do folderu ZIP albo do clota, do Canvy, do wielu innych rzeczy, jak na przykład Lable, Gamma, Miro, Replit, gdzie moglibyśmy dalej sobie vibe codować. Tak, tutaj zaczynamy coś tworzyć, korzystamy z tej naszej subskrypcji Cloda, a później jak już osiągniemy coś, co ma ręce i nogi, to przenosimy do jakiegoś lowabla, żeby tam stworzyć, nie wiem, bazę danych, żeby tam stworzyć całą funkcjonalną aplikację, bo tutaj sobie tylko tak okorzystaliśmy, a w Lovablu już wdrażamy na przykład bezpośrednio. No wiecie, możliwości jest naprawdę sporo. Fajnie jest jak tworzymy swoją prezentację to możemy ją na przykład do Canvy przenieść albo jak współpracujemy z Cloud Codem to możemy to do Cloud Code przenieść, ale chyba łatwiej jest mimo wszystko wyeksportować to do folderu zip a później możemy to odpalić również w Clockcodzie, ale również w kodeksie, w Hermesie czy gdzie tam sobie pracujemy. Więc no takie są opcje.

Oprócz tego, tak jak wam wspominałem, możemy tworzyć swoje animacje i tak jak zobaczcie tutaj wam pokażę taką animację też sobie stworzyłem. Tutaj jest jedna, tutaj jest druga. Pokażę wam na szybko. Prompt był bardzo prosty. Zobaczymy, czy mi się teraz załaduje. Niestety nie, ale tak samo po prostu dodałem swoją stronę, dodałem fakt, że chcę porównania kursów i warsztatów. I tutaj akurat Sonet przygotował mi taką animację. Trochę, tak jak widzicie, trochę nie dało rady. Tutaj na dole się ucinała, więc taka drobna różnica między opusem, który przygotował mi już dużo lepszą po prostu animację. Zobaczcie jak to wszystko fajnie wygląda. Oczywiście można tutaj dodać swoje zdjęcia, można dodać jakiegoś lektora, można ściągnąć to i dowolnie sobie edytować. A tak jak widzicie kurczę, no na podstawie jednego polecenia tak, stwórz mi animację omawiającą czym są warsztaty plus kurs, a czym sam kurs z naszej strony, zrób to w naszym stylu. No to jak na taki prymitywne polecenie, no to naprawdę jest przyzwoity wynik. Więc, więc tak to wygląda. Animacje są również bardzo fajne.

No i tak samo clot code jest przyzwoitym miejscem. żeby zacząć z prezentacją, tak? Możemy poprosić go o jakiś szablon prezentacji, możemy go poprosić o jakiś zarys tematów, a później sobie to po prostu wyeksportować do kanwy. Tak, tutaj wrócimy sobie do jakiegoś z moich projektów. Możemy tutaj pod share kliknąć send to i wysłać do kanwy. Oczywiście no z prezentacją to będzie najlepiej działało i tam możemy w kanwie już sobie coś tam te drobne zmiany takie jak i tak byśmy wprowadzili. Możemy zrobić to ręcznie bezpośrednio w kanwie.

Więc co moi drodzy, myślę, że tak podsumowując jest to na pewno ciekawe narzędzie, na pewno jakaś alternatywa. Nie mówię, że to jest game changer, że to wszystko zmienia, że to już designerzy mogą się żegnać i iść pod most. Nie, absolutnie nie. Chciałem po prostu pokazać wam przez ten film, co jest możliwego, co się zmieniło. Może gdzieś tam jakąś żarówkę pobudziłem, może gdzieś tam wam się przyda do waszego przepływu pracy. Można to fajnie na pewno połączyć z Cloud codem, tak jak ja robię. I co? Myślę, że warto obserwować to narzędzie. Myślę, że warto obserwować mnie, subskrybować ten kanał. Zaproszę jeszcze do cloudmasterc.pl na warsztaty i kurs z Cloud Coda. Tutaj do 14 lipca jest przedsprzedaż, więc zapraszam serdecznie i jeszcze do darmowego newslettera mikoajabramczuk.subsa.com. Dzięki wielkie za dzisiaj i do zobaczenia. Yeah.