O czym jest ten film
- Pojedynek w Syntax: Wes Bos, doświadczony frontendowiec, kontra Randy — producent kanału, który kod tworzy wyłącznie „rozmawiając” z AI (vibe coder).
- Zadanie: w 20 minut odtworzyć ozdobny przycisk z posta na X — niebieska mozaika, efekt 3D, rozjaśnianie pod kursorem i fala rozchodząca się po kliknięciu.
- Ocenia prowadzący (CJ): podobieństwo do oryginału oraz, z mniejszą wagą, jakość i skalowalność kodu. W połowie czasu szybki check-in.
- Wes pracuje w Claude CLI metodycznie: pipeta, paleta, zmienne CSS, ręczne dostrajanie transformacji. Randy używa Claude Desktop z agentem Fable i opisuje efekty własnymi słowami.
- Obaj dyktują prompty głosowo; pierwszy prompt Randy’ego już po ok. 4 minutach daje działający przycisk z podglądem na żywo w jego Chrome.
- Łatwa część kończy się szybko — reszta czasu to drobiazgi: poświata, szerokość i prędkość fali, przechył 3D, wewnętrzny cień, winieta. Randy nazywa to „piekłem iteracji”.
- Typowe wpadki AI: fiolet zamiast niebieskiego, szarpanie przy szybkim ruchu myszy, mozaika wstrzykiwana jako base64, efekt „embossed” wzięty dosłownie.
- Finałowy sprawdzian: w 5 minut wystawić publiczny link. Wes wdraża na Cloudflare (co AI częściowo psuje), Randy publikuje artefakt strony na claude.ai.
- Werdykt: Wes 3,5/5, Randy 4/5 — vibe coder wygrywa wyglądem, ale jego tło to ok. 660 elementów z inline style i pięć klatek na sekundę.
- Rachunek końcowy: Randy spalił tokeny za 7,45 USD — taniej niż godziny seniora, ale pokazuje, że „doklejanie” efektu promptami kosztuje i wymaga nadzoru.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Dyktuj prompty zamiast je pisać
Na czym polega: Obaj uczestnicy — senior i laik — pracują z agentem głosowo, przez zamianę mowy na tekst. Prowadzący wprost nazywa to największym przyspieszeniem całego workflow.
Jak stosować: Skonfiguruj dyktowanie w pracy z agentem kodującym, zwłaszcza przy zadaniach wizualnych, gdzie myślisz obrazami, a nie kodem. Utrzymuj jeden opisowy „styl” rozmowy z modelem.
Na co uważać: Rozmowa sprzyja improwizowaniu określeń — ten sam efekt nazywany raz „mocniejszym”, raz „szerszym” potrafi zmylić model. Ustal raz nazwę danego efektu i trzymaj się jej.
2.Już pierwszym promptem zażądaj podglądu na żywo
Na czym polega: Randy poprosił od razu, żeby aplikacja otwierała się w jego własnym Chrome z automatycznym odświeżaniem. Dzięki temu po ok. 4 minutach miał klikalny przycisk i mógł reagować na to, co widzi.
Jak stosować: W pierwszym poleceniu dopisz: „uruchom lokalny serwer z hot reload i otwórz wynik w mojej przeglądarce”. Potem każ poprawkę i obserwuj efekt w czasie rzeczywistym.
Na co uważać: Agent może przy każdym zadaniu budować aplikację od zera. Jak Wes — zaznacz wyraźnie: „serwer deweloperski już działa, nie buduj ponownie”.
3.Trzymaj wszystkie wartości w zmiennych
Na czym polega: Randy każąc generować mozaikę, zażądał zmiennych dla kolorów, rozmiaru kafla, odstępu i siatki — „żeby dało się je szybko podmieniać”. Wes analogicznie kazał wstrzyknąć kolory jako zmienne CSS.
Jak stosować: Przy każdym generowanym elemencie UI proś o nazwane stałe (paleta, wymiary, odstępy, czasy animacji). Wtedy dostrajanie to jednozdaniowy prompt, a nie przepisywanie logiki.
Na co uważać: Jeśli nie znasz kodu, poproś agenta o wypisanie zmiennych z krótkim opisem — inaczej stracisz stery nad własnym projektem.
4.Zdefiniuj paletę metodycznie
Na czym polega: Wes działał „po webdevowsku”: pipeta, dwa skrajne odcienie, spokojne dostrajanie. Randy zdefiniował niebieski nr 1 i nr 2 i kazał losować kolor każdego kafla między nimi — sędzia ocenił efekt rewelacyjnie.
Jak stosować: Wyciągnij z oryginału dwie wartości graniczne koloru i poproś o losowanie w tym zakresie. To proste polecenie dało najbardziej wiarygodny efekt mozaiki w całym pojedynku.
Na co uważać: Sprawdzaj odcień po każdej zmianie warstw — u Randy’ego nakładana warstwa „niebieska” wyszła fioletowa i trzeba było ją osobno poprawiać.
5.Odnoś agenta do oryginału, klatka po klatce
Na czym polega: Szablon startowy zawierał link do posta na X; Randy pozwalał AI sięgać do nagrania („zajrzyj do filmu”), a Wes przewijał materiał klatka po klatce, by rozgryźć przechył 3D i „eksplozję” po kliknięciu.
Jak stosować: Daj agentowi maksimum kontekstu wizualnego: zrzuty ekranu, film, konkretne klatki. Samo słowne opisanie subtelnej animacji jest dużo mniej skuteczne niż wskazanie jej w materiale.
Na co uważać: Nie każdy agent faktycznie „obejrzy” wideo. Zweryfikuj, czy model potrafi analizować klatki; w razie czego opisz klauzulę czasową sam („gdy kursor jest w prawym dolnym rogu, róg obraca się w dół”).
6.Rozbijaj efekt na pojedyncze właściwości i iteruj po kolei
Na czym polega: Druga połowa pojedynku to seria mikropoleceń: falę szerszą i „trochę słabszą”, przezroczystość na 60% obecnej wartości, cień podwójnej wielkości, winietę od góry środka, maksymalny obrót Y na 15. Randy podsumował to jako „piekło iteracji”.
Jak stosować: Nie pros o „popraw efekt hover”. Nazwij jedną właściwość, kierunek i skalę zmiany („zmniejsz do 60%”, „podwój”). Tak polecenia trafiają i nie rozwalają pozostałej pracy.
Na co uważać: Każda iteracja zjada czas i tokeny. W 20 minut obaj ledwo domknęli podstawy, a rachunek Randy’ego zamknął się kwotą 7,45 USD.
7.Mów językiem, na którym model był trenowany
Na czym polega: Randy wprost przyznał: jego słownictwo nie zawsze pokrywa się z tym, czego „szuka” Claude — model najlepiej rozumie słowa typowe dla programistów. Słowo „embossed” zostało wzięte dosłownie i dodało niechciany efekt.
Jak stosować: Nawet jako laik poznaj kilkanaście terminów z CSS/UI: gradient radialny, box-shadow (zewnętrzny i wewnętrzny), winieta, easing, przechył (transform, osie X/Y), squircle. Od razu będziesz precyzyjniejszy.
Na co uważać: Potoczne nazwy efektów model może zrealizować dosłownie. Po każdej takiej zmianie sprawdź wynik i w razie potrzeby cofnij polecenie.
8.Czekasz na agenta? Wtedy analizujesz oryginał albo odpalasz drugi wątek
Na czym polega: Wes kilka minut czekał na wykonanie jednego kroku i rozważał uruchomienie drugiego agenta do niezależnego zadania. Randy skomentował: „skoro agent robi całą ciężką robotę, ja będę dalej szlifować” — w przerwach analizował oryginalne nagranie.
Jak stosować: Traktuj czas „myślenia” agenta jako swój czas analityczny: wypisuj obserwacje o wzorcu i podawaj je kolejnymi poleceniami. Przy większych zadaniach rozdziel niezależne prace na równoległe wątki.
Na co uważać: Równoległe zmiany w tych samych plikach mogą się nawzajem nadpisywać — rozdzielaj zakresy i trzymaj kontrolę nad tym, co się dzieje w projekcie.
9.„Działa” to za mało — pilnuj wydajności generowanego kodu
Na czym polega: Mozaika wstrzykiwana jako base64 zaczęła powodować problemy z renderowaniem; Wes kazał wygenerować obraz na canvasie i wystawić jako blob-URL. Kod Randy’ego „wyglądał dobrze”, ale tło składało się z 660 elementów z inline style — pięć klatek na sekundę.
Jak stosować: Zlecaj agentowi audyt wydajności jako element zadania: licz elementy w DOM, unikaj stylów inline per kafel, testuj płynność animacji przy szybkim ruchu myszy.
Na co uważać: Kod z AI bywa „skalowalny tylko pozornie” — działa na jednym ekranie i w jednej sytuacji. Właśnie dlatego sędzia obiecał zajrzeć do kodu niezależnie od oceny wizualnej.
10.Końcowy test: czy ktokolwiek będzie mógł tego użyć?
Na czym polega: Ostatni sprawdzian polegał na wystawieniu publicznego linku w 5 minut. Wes zlevelował zadanie jednym promptem („wdroż na Cloudflare”), Randy skorzystał z wbudowanej publikacji artefaktów w Claude i udostępnił link przez menu.
Jak stosować: Włącz publikację w definicji zadania od początku — poproś agenta o „najszybszy publiczny link”. Jeśli pracujesz w ekosystemie Claude, publikacja artefaktu to ścieżka bez konfiguracji.
Na co uważać: Wdrożenie potrafi rozsypać działającą aplikację — u Wesa agent w trakcie deployu usunął część kodu i sędzia dostał nie ten wynik. Po opublikowaniu zawsze otwórz wersję na żywo i porównaj z lokalną.
Redakcyjne tłumaczenie
Wprowadzenie i zasady pojedynku
CJ: Czy vibe coder jest w stanie wyprogramować więcej niż senior? Dziś się przekonamy. Moimi gośćmi są Wes Bos oraz Randy, producent Syntax. Witajcie, panowie.
Wes i Randy: Dzięki. / Super być tutaj.
CJ: Dziś obaj będą odtwarzać przycisk, który znaleźliśmy na X. Wes może użyć wszystkiego, co chce — AI, vibe coding, cokolwiek. Randy jest w tej dziedzinie bardziej świeży. Randy, przedstaw się najpierw: kim jesteś?
Randy: Jestem Randy, producent. Odpowiadam za powstawanie filmów, montuję materiały na nasz kanał. Próbuję sprawić, żeby chłopaki dobrze na nich wychodzili.
CJ: Jakie masz doświadczenie z vibe codingiem? Budowałeś już jakieś aplikacje?
Randy: Głównie rzeczy związane z montażem wideo — odpalam skrypty w DaVinci Resolve. Dużo doświadczenia z Pythonem, ale nie z pisania go: raczej dyktuję po angielsku, co ma poprawić.
Wes: Randy to absolutnie „niebezpieczny” programista. Jak przynosi nam efekty i mówi „popatrzcie, co zbudowałem”, to my: „o rety, wymknął się spod kontroli. Pisze w Pythonie”. (Informacja dodatkowa: „vibe coding” to styl tworzenia oprogramowania, w którym aplikację buduje się, dyktując kolejne kroki modelowi AI, zamiast pisać kod samodzielnie.)
CJ: Zasady są następujące: macie 20 minut na zbudowanie przycisku. Po 10 minutach zrobimy szybki przegląd sytuacji, a na końcu was ocenię. Punkty najpierw za ogólny wygląd — jak blisko jesteście oryginału z filmiku. To będzie mniejsza część oceny, ale zajrzę też do kodu: sprawdzę, czy wygenerowany przez AI kod jest skalowalny, czy działa na różnych rozmiarach ekranu, czy wygląda przyzwoicie i czy chciałoby się w takiej bazie pracować. Gotowi?
Wes i Randy: Gotowy. / Robimy to.
Start: dwie filozofie pracy
CJ: Dwadzieścia minut. Start!
Wes: Patrzę teraz na ten przycisk i widzę kilka rzeczy: niebieskie mozaikowe tło, efekt 3D, rozjaśnianie otoczenia pod kursorem oraz okrąg rozchodzący się po kliknięciu. Nie wiem, jak chłopaki potrafią przy tym mówić i pracować — zobaczymy. Mnie zostanie sporo czasu na myślenie, bo ta maszyna będzie mielenia sama, a mam ustawione dyktowanie, więc tylko do niej mówię. Liczę, że to przyspieszy. Chcę stworzyć przycisk. Repozytorium w moim folderze już ci wskazałem.
CJ: Bardzo mnie ciekawi, jak Randy to pociągnie. Ma Claude Desktop — sam z niego nie korzystałem, ja siedzę w Claude CLI. Ma agenta otwartego w folderze ze szablonem startowym: jest HTML i bazowy plik CSS, z których będzie dalej korzystał. W HTML siedzi link do posta na X, więc model może robić zrzuty ekranu. Nie wiem, czy potrafi obejrzeć film — zobaczymy.
Randy: Monochromatyczny niebieski wzór w tle. Tak, to może… Nie, nie chcę tego wliczać. Chcę wygenerować tło proceduralnie w JavaScripcie.
Wes: Po to właśnie sięgam po AI bez przerwy. Ja zrobię to po webdevowsku: wyciągam pipetę, ustalam paletę, działam metodycznie. Randy patrzy na całość z lotu ptaka — po prostu opisuje. Choć szczerze: łatwiej byłoby dać modelowi sam zrzut ekranu przycisku.
Randy: Chcę, żeby to otwierało się w mojej instancji Chrome i miało hot reload — żebym mógł szybko coś zmienić i od razu zobaczyć efekt.
Wes: Podoba mi się to. Ciekawe, jak przekaże modelowi, że chce podglądu. Używa Fable — całkiem możliwe, że dostawi lokalny serwer deweloperski z automatycznym odświeżaniem.
Randy: Stwórz funkcję, która na HTML canvas wygeneruje mozaikę kafelków. Kolory losowe, pomiędzy zmienną blue1 i blue2. Kafel ma mieć rozmiar 20, odstęp 2 — zapisany jako zmienna squareGap. Kafle mają się układać w siatkę 13 na 50. Zrób zmienne dla wszystkich wartości, żeby dało się je błyskawicznie podmieniać. — Obstawiam, że szybko wyprzedzę Wesa, a potem utknę i to on mnie przegoni. Przy szlifowaniu pikseli właśnie ujawni się limit vibe codera. Ale coś na stronie zobaczę błyskawicznie.
Wes: Palimy tokeny. Dzięki, Sentry, za te darmowe tokeny. Nie są darmowe — płacimy za nie. Ten film jest sponsorowany przez Sentry.
CJ: Możemy teraz zobaczyć, jak senior promptuje AI. Ciekawostka: obaj używają zamiany mowy na tekst zamiast klepać z klawiatury — to naprawdę mocno podkręca tempo pracy. Przycisk Wesa wygląda na razie niemal jak Windows XP, ale dojdzie do siebie.
Wes: Ustaw czcionkę, powiększ. Szerokość sto procent, padding 50 pikseli, zaokrąglenie rogów. Wersaliki są zbędne. Już całkiem nieźle. Zróbmy osiemdziesiąt procent szerokości. Niech warstwy na siebie nachodzą.
CJ: Zgaduję, że kazał AI wygenerować funkcję dającą ten styl z gradientem.
Pierwsze efekty: przewaga vibe codera
Randy: Szuka portu, którego może użyć… chyba już znalazł. Powinno coś być na ekranie.
CJ: No dalej! Już sam pierwszy prompt dał mu bazowy przycisk.
Randy: Cztery minuty od startu, a to otwiera się w moim prawdziwym Chrome. Wes, możesz się pakować! Została nam poświata przy najechaniu i ten miły efekt po kliknięciu.
Wes: Zobaczymy, jak AI się za to weźmie.
Randy: Po najechaniu kursorem przycisk ma mieć delikatną białą poświatę na zewnątrz, a po kliknięciu — coś jak fala na wodzie, idąca od środka ku brzegom. Jedna fala, bez zanikania. Ruszamy — zobaczmy, co to da.
CJ: To wygląda naprawdę dobrze. Pięć minut i taki efekt? Robi wrażenie.
Wes: Dolna krawędź przycisku… Zrobię tak: wstrzyknij niebieskie wartości do body jako zmienne CSS, żebym mógł ich użyć w własnych stylach. — I tu mam problem: czekam już kilka minut na ten krok. Może otworzę drugiego agenta i każę mu robić coś innego, póki ten kończy to zadanie…
CJ: Klasyka vibe codera — zdumienie, że kod w ogóle działa.
Wes: Spróbujmy kliknąć… No i zrobił! Tylko nie pod kursorem — trzeba to przenieść pod kursor. Nie, nie będę się gryźć z tymi drobiazgami. Zawsze to robię, zawsze zaczynam przesadnie szlifować. Zajmiemy się śledzeniem myszy — bo przy tym przycisku za kursorem pójdą dwie rzeczy.
Randy: Widzisz tę siatkę między kaflami? Linie między nimi nie jaśnieją, gdy najezdżam. Świetna robota, poświata wygląda dobrze, ale ciemne linie siatki też muszą się rozjaśniać razem z nią.
Randy: Dobrze, to mamy z głowy. Efekt najechania zostawimy na koniec — to kołysanie na boki. Panning, tilt, yaw… Pewnie yaw.
CJ: Te subtelne interakcje — poświaty i im podobne — dużo trudniej wyrazić słowami. Ciekawe, co z tego wyjdzie u Randy’ego, ale mam wrażenie, że dobijamy do granicy tego, co da się AI po prostu opisać bez wiedzy, jak działa interfejs albo kod.
Wes: Wchodzimy w przycisk. Będą trzy elementy: tekst, span z poświatą i… jeszcze jeden. Jak przegnimy to nagranie klatka po klatce… Widzisz? Po kliknięciu jest taki wybuch. To będzie nasza eksplozja.
Randy: Eksplozja wygląda dobrze. Linie siatki już jaśnieją — świetnie. Tylko za mocno, trzeba odrobinę przyciemnić; w oryginale akcent po kliknięciu jest mniej wyrazisty.
CJ: Randy jest naprawdę blisko, ale musi jeszcze opisać rozpiętość tej fali — poświata ma być szersza, z większą kryjącą siłą.
Randy: Fala, którą stworzyłeś, jest świetna, ale sama fala ma być szersza i trochę słabsza.
Wes: Daj na to overflow hidden. Gdy najezdżam na przycisk, śledź pozycję kursora i przy każdym ruchu myszy wstrzykuj współrzędne X i Y jako zmienne na elemencie przycisku.
Randy: Fala ma przelatywać szybciej i być jeszcze mniej widoczna — bardziej przezroczysta. Zbijmy ją do sześćdziesięciu procent obecnej wartości.
Wes: Dzięki temu dostanę pozycję myszy jako zmienne CSS i będę mógł na ich podstawie modyfikować te elementy. Mógłbym sięgnąć po CSS anchor position, ale absolutne pozycjonowanie znam lepiej. Zmienne „mysz-X” i „mysz-Y”… Ruszam kursorem — i patrzcie na to!
Randy: Sprawdźmy… To wygląda o niebo lepiej! Timing prawie jak w oryginale. Uważaj, Wes.
CJ: U Randy’ego poświata przy najechaniu to raczej nieprzezroczysta biała plama, a nie zmiana barwy tła poszczególnych kafelków.
Wes: Zaokrąglenia mają być squircle. Zrobisz squircle zamiast zwykłego border-radius? (Informacja dodatkowa: squircle, czyli superelipsa — łagodniejsze zaokrąglenie narożników niż klasyczny border-radius, znane m.in. z designu Apple.) Halo, CJ dzwoni. Muszę na moment przerwać.
Check-in w dziesiątej minucie
CJ: Dziesięć minut za nami, szybki przegląd. Jak się czujecie?
Wes: Jestem znacznie dalej, niż zakładałem. Idzie mi fantastycznie, to naprawdę fajne ćwiczenie. Po prostu wiem, jak to ugryźć.
CJ: Świetnie. A ty, Randy?
Randy: Też czuję się dobrze, Wes, nie ukrywam. Jestem całkiem pewny siebie.
CJ: Bardzo ciekawie wygląda to zapisane zwykłym tekstem — słowami, których normalnie byśmy nie użyli — a AI i tak to rozszyfrowuje. Wracamy do roboty: zostało 10 minut. Zdążycie?
Wes: Będzie na styk. Zobaczymy, gdzie będziemy za dziesięć minut.
Randy: Myślę, że skończę jeszcze jednym promptem.
Wes: Co?! …No proszę. Chyba jednak jesteśmy skończeni, chłopacy.
Druga połowa: detale, jitter i trzeci wymiar
Wes: Poświata: box-shadow ma być wyraźnie mocniejszy… i potem mocno w dół. Nie rozprasza się tak ładnie. Może tutaj jest już za dużo.
Randy: Nie wiem, jak to się nazywa fachowo. Powiem „yaw i skew” i się tego trzymam. W efekcie najechania potrzebujemy sposobu, żeby przycisk kołysał się i pochylał jak w filmie — możesz zajrzeć do nagrania. Po najechaniu boki lekko się przechylają, niemal w przestrzeni 3D. Trochę przechylania w pionie, jak mi się wydaje. Powodzenia. Powodzenia, AI.
Randy: Ciekawe… robi się szarpane. Czemu jest szarpane? O nie, mam problemy z renderowaniem. Czemu to robi się kwadratowe?… Mamy za dużo miejsc po przecinku. Zaokrąglaj do pełnych pikseli.
Wes: Patrzcie na to. Jezu. Ruszyło, jedziemy.
Wes: Gdy ruszam myszą szybko, robi się nerwowo, a promień zaokrąglenia na chwilę prawie zbiega do kwadratu. Czemu tak się dzieje? No dobrze, sam to rozgryzieł. Bierzemy się za efekt 3D: na przycisku ustawiamy perspective, chcemy zachować trzeci wymiar — czyli preserve-3d na transform-style. Potem translateZ. Ileż to razy w karierze budowałem takie rzeczy.
Randy: A teraz spójrz: gdy kursor jest poza przyciskiem, wszystko jest znacznie stłumione. A gdy dochodzi do krawędzi, zobacz, co się dzieje z tej strony — jest ciemniej, jest taki cień po wewnętrznej stronie. Jak ja to teraz napiszę w prompcie?… Ma być leciutki wewnętrzny cień wzdłuż krawędzi, dający niemal efekt lekko wytłoczenia. A zanim najedziemy na przycisk, na wierzchu ma leżeć warstwa odrobinę ciemniejszego, pełnego niebieskiego, która delikatnie rozpuszcza się, gdy kursor dochodzi do krawędzi.
CJ: Dobry sposób opisania. Ja powiedziałbym, że każdy kafelek zmienia kolor, ale ten sam efekt uzyskasz, jeśli kafle od początku mają właściwe barwy, a wierzchnia warstwa rozpuszcza się pod myszą i odsłania to, co pod spodem.
Wes: Transform… nie, rotate. Jak nazywa się ten od „odwracania”? RotateZ? RotateX. Już jest.
CJ: Wes kombinatoruje z transformami, żeby złapać ten obrót — i przewija nagranie klatka po klatce, żeby dokładnie rozgryźć, jak działa to pochylanie.
Randy: No tak, z tym „jeszcze jednym promptem” to nie miałem racji. Zostały drobne poprawki.
CJ: Z tą niebieską warstwą na wierzchu u Randy’ego wygląda to już znacznie lepiej. Jeszcze niech AI dostraja mu krycie pod kursorem i może dopiąć swego.
Randy: Zerknijmy… U nich jest bardziej niebieskie, u mnie wychodzi fiolet. Ta warstwa, którą właśnie dodałeś, jest za fioletowa — ma być bardziej niebieska, jak oryginalne warstwy.
Wes: Gdy prowadzę mysz po przycisku, chcę subtelne 3D. W prawym dolnym narożniku ten róg ma być obrócony w dół, a gdy przenoszę kursor na kolejne narożniki, przycisk obraca się względem osi X i Y — delikatny efekt przestrzeni.
CJ: Wes najpierw próbował ręcznie, ale ostatecznie przesiadł się na promptowanie. Zostały nam jakieś cztery minuty.
Wes: Animacja i przejście po najechaniu mają być odrobinę bardziej płynne i ładniejsze. Zobaczymy. I słuchaj — nie buduj mi za każdym razem całej aplikacji. Serwer deweloperski mam uruchomiony gdzie indziej.
Wes: Stwórz dwie zmienne ograniczające X i Y… Właściwie podnieś obie trochę, potem dostroimy wartości.
Wes: O mój Boże — mozaika jest wstrzykiwana jako base64. To prosi się o kłopoty z renderowaniem. Lepiej użyć canvas.toBlob i podać wynik jako URL. — Teraz lepiej. Mniej fioletu. Idealnie. A jednak po najechaniu lekko fioletowieje. Usuńmy to… Może robot sam to ogarnie. Zobaczymy, co zrobi.
Wes: Jeszcze drobne poprawki: tego kołysania ma być trochę więcej — tego pochylania po najechaniu. I po najechaniu warstwy bazowe wciąż są lekko fioletowe. Niech całość będzie jednym monochromatycznym niebieskim. I patrz, jak pisze „color” po amerykańsku.
Wes: Skoro ten obraz jest już w pamięci, po prostu zrób z niego blob-URL. …I to akurat nie naprawiło mojego problemu. [śmiech] Dobra, wystarczająco blisko.
CJ: U Randy’ego teraz naprawdę dobrze wygląda. Chociaż poświata wciąż nie do końca trafia w oryginał.
Randy: Zobacz ten róg, gdy się odsłania — widać, jak zanika ten pełny kolor… A ich cień wewnętrzny sięga aż tutaj. To jest jakieś pięćdziesiąt pikseli, może sto. Muszę wyraźnie powiększyć cień; mój ma może… Powiedzmy: podwój cień. — Ech, wygląda gorzej. Dodaj delikatną niebieską poświatę na zewnątrz przycisku.
Randy: Dwie minuty! Dwadzieścia minut wydaje się dużo, ale człowieku, nie jest. Założę się, że doda najbrzydszą poświatę, jaką widziałeś… O, a to jest faktycznie przyzwoite.
CJ: Zostały dwie minuty. Zobaczmy, co wyciągną w ostatnich chwilach.
Randy: A ta piękna wewnętrzna poświata, którą zrobiłeś — ma być trochę mocniejsza i mniej więcej dwa razy większa.
Wes: Dodaj kolejny element: eksplozję przycisku. Podobny do poświaty, ale pokazuje się tylko po kliknięciu — rośnie i rozpryska się na zewnątrz. Wyobraź sobie świecący pierścień. Nie spodziewałem się tyle promptować; myślałem, że więcej będzie ręcznego kodowania. Ale dwadzieścia minut przeciwko producentowi Randy’emu to niewiele. Dostroję wartości: maksymalny obrót Y — dajmy piętnaście.
Randy: O, jest cień wzdłuż całego dolnego brzegu przycisku. Wes pewnie liczy, że tego nie zauważę — ale on na takich detalach zna się najlepiej, on to wyłapie pierwszy. Ten cień na całym dole wygląda na lekko radialny… Ja uzyskuję go cieniem zewnętrznym, a to raczej gradient radialny: najjaśniejsze jest tutaj, a ku brzegom ciemnieje — winieta. O nie, właśnie to zepsuł: zrobił krawędź mniejszą i mocniejszą.
CJ: Całkiem nieźle. Mamy klik! No i ten klik… Widać, że robot robił, co?
CJ: W ostatniej minucie dopina. Wygląda znacznie lepiej. Eksplozja po kliknięciu jeszcze nie zaskakuje — to taki pełny okrąg — ale interakcje po najechaniu wyglądają naprawdę dobrze.
Wes: Może dwadzieścia procent. To wciąż taki tandetny projekt z AI. Ma być lekka winieta ku brzegom, zaczynająca się u góry środka — właśnie to próbowałem uzyskać cieniem zewnętrznym. Zerknij na oryginalne klatki: cień musi być konkretnie na dole przycisku i w narożnikach. Najjaśniejszy punkt to góra środka. Box-shadow ma być też wewnętrzny. Pierścień jest zbyt ostry — ma świecić do środka i na zewnątrz. Dwadzieścia trzy sekundy.
Randy: Pif-paf, pif-paf. Widzicie? To jest piekło iteracji. Mówiłem „wzmocnij” — i o tym właśnie mówi CJ: moje słownictwo może nie zgadzać się z tym, czego szuka programista. A Claude najwyraźniej rozumie słowa, których użyłby developer. Wcześniej mówiłem „wytłoczenie” i chyba dosłownie je dodał… Jest! Dużo lepiej.
Wes: Wiecie co, nie zrobiłem też tej poświaty — gdy najeżdżasz na górę, to jakby…
Randy: …rozjaśniało i saturowało całe tło za przyciskiem…
Wes: …więc wracamy do… Może jeszcze wciśniemy mix-blend-mode.
CJ: Zbliża się koniec czasu. O, CJ już macha.
Wes: Zdążyłem z ostatnim promptem. Spokojnie.
CJ: Czas minął! Koniec czasu. Jak się czujecie po tych brutalnych dwudziestu minutach?
Wes: To było za mało czasu. I pokazuje, na czym polega różnica w pracy nad interfejsem: promptowałem znacznie więcej, niż myślałem, a to i tak jest jakaś słabsza wersja przycisku.
Randy: Jest tyle drobiazgów, które zrobił oryginalny projektant, a trudno je oddać słowami — chyba że usiądziesz i dostroisz każdy z osobna.
Finałowy sprawdzian: publiczny link
CJ: Ostatnie zadanie: muszę mieć możliwość użycia tego przycisku.
Randy: Ojej, nie wiem nawet, jak ci to wysłać.
CJ: Właśnie o to chodzi. Macie pięć minut, żeby wystawić publiczny adres, pod którym będę mógł poklikać wasz przycisk. Wes ogarnie to w trzy sekundy.
Wes: Bułka z masłem. Wdroż na Cloudflare.
Randy: Możesz to tak ustawić, żebym mógł im udostępnić ten przycisk do wypróbowania — w celach demonstracyjnych?… Tło przycisku — o nie, gradient radialny! Nie, nie, nie. Cofnij. Cofnij. Cofnij.
Wes: Mój ostatni prompt to dosłownie „wdroż na Cloudflare”. Skoro agent robi całą ciężką robotę, ja będę sobie dalej szlifować.
Randy: „Najszybszy publiczny link”… Publikujemy przycisk jako stronę artefaktów na claude.
CJ: O, Claude ma to dziś wszystko wbudowane. Skorzysta z ich strony artefaktów.
Randy: Publikuj. Rzucę jeszcze okiem na wersję na żywo, tylko sprawdzę, czy się renderuje. Ta poświata nie powinna być zewnętrznym box-shadow — powinna być gradientem radialnym.
Wes: Zatem tło ma być gradientem radialnym i nie potrzebujemy tu pozycji absolutnej — sam gradient ma się po prostu przesuwać. Poświata ma mieć pełną szerokość i wysokość, a radialny gradient ustawiamy jako obraz tła.
CJ: I ciekawostka: wyświetla mi się… coś, ale to nie jest przycisk Wesa. Nie spodziewałem się, że AI rozsypie samo wdrożenie — usunęło mu część kodu.
Wes: Pakiet buduje się lokalnie bez błędów… Kopiuję.
CJ: Wes lepiej niech już nie projektuje. Chyba wciąż projektuje, co?
CJ: Myślę, że Randy może to faktycznie zdążyć — Cloudflare pozwala dziś wdrażać bez zakładania konta, dokładnie pod taki przypadek: „nie wiem, co robię, chcę tylko, żeby to było w internecie”.
Randy: Użyj menu udostępniania na stronie artefaktu, żeby dać dostęp… Udostępniam, kopiuję link i przesyłam CJ-owi. Dobra, jesteśmy złoto.
Wes: Ten gradient radialny tła ma być biały.
CJ: On wciąż stroi wartości.
Wes: Niebieski! [śmiech] To mój program. Randy tu jest tylko producentem — robię, co chcę.
Randy: Nie wiedziałem, że nie wyłączyli mu mikrofonu. [śmiech]
CJ: Czas! Potrzebuję linku!
Randy: Moment, moment… Dobra.
CJ: O, wersja Randy’ego wygląda ślicznie.
Werdykt: 3,5 kontra 4
CJ: Czas na wyrok, chłopacy. Gratuluję wdrożenia. Zaczynam od Wesa. Od razu widać, że poświata nie znika po odjechaniu kursorem…
Wes: Po pierwsze — ty siedzisz na Firefoksie, który nie obsługuje squircle w zaokrągleniach.
CJ: Podoba mi się, że macie osadzony filmik w demie — ładny detal. To było w szablonie startowym?
Wes: U mnie został. Twój AI go usunął, Randy.
Randy: Dałem mu wolną rękę, nie pytając.
CJ: O mój Boże — tło Randy’ego to setki tagów „i” z inline style. [śmiech] Ale wracając do Wesa: gdy mysz odjeżdża, poświata nie osiada z powrotem na niebieskim. Przyciskowi brakuje też górnego fazowania — w oryginale biegnie taki niemal łuk od góry do dołu, a u Wesa jest płasko, nie wystaje z ekranu. Widzisz, o co mi chodzi?
Wes: Widzę. To te cienie w narożnikach.
CJ: Właśnie, cień. W oryginale siedzi za nim kilka box-shadow. Pochył jest z kolei trochę przesadzony — w oryginale na pewno jest easing i całość subtelniejsza. A gdy mysz odjeżdża, przycisk po prostu „strzela” z powrotem; wolałbym łagodniejszy powrót do stanu spoczynku. U ciebie poświata to w gruncie rzeczy biały prostokąt, zamiast zmiany kolorów albo prześwitywania przez wierzchnią warstwę. Ogółem: daję ci trzy i pół na dziesięć. To znaczy na pięć. [śmiech]
Wes: Aha, na pięć. OK.
CJ: Trzy i pół na pięć. Pomysł jest, ale brakuje wszystkich tych subtelności.
Wes: Całego wykończenia.
CJ: A teraz patrzę na Randy’ego i jestem w szoku, jak to jest dobre. Pytanie szybkie: skąd wziąłeś kolory? Pipetowałeś? Ustawiłeś górną i dolną wartość dla najjaśniejszych kafelków?
Randy: Ustawiłem niebieski jeden i niebieski dwa, a potem kazałem losować kolor każdego kafla pomiędzy nimi.
CJ: Po pierwsze — i to będą duże minusy — to nie jest squircle. AI użyło w twoim przypadku samego border-radius.
Randy: Nie, użyło. Otwórz w przeglądarce, która squircle obsługuje.
CJ: Dobra, w Firefoksie działa. [śmiech]
Randy: Podobają wam się instrukcje na dole? „Najedź, aby odkryć siatkę”.
CJ: To jest żenujące. Instrukcja obsługi przycisku! A tak w ogóle: sam przycisk w spoczynku jest znacznie bliżej oryginału niż u Wesa. Góra jest trochę za biała — powinna być ciemniejsza, ogólnie ciemniejsza warstwa. Ale dolny cień ci wyszedł, to wygląda dobrze.
Randy: No, widać te różnice na żywo.
CJ: Tam, gdzie jest mysz, jest za biało, a twój przycisk może być odrobinę zbyt pochylony — mówimy o bardzo subtelnych rzeczach. Ale podoba mi się to ciemnoniebieskie przykrycie, które robi się przezroczyste pod kursorem. Prawie myślę, że bieli nie powinno tam być wcale: wystarczyłaby warstwa bazowa z pełnymi kolorami i wierzchnia, która staje się przezroczysta pod myszą, zamiast rysować biały okrąg. Uwielbiam animację, gdy kursor odjeżdża. Randy dostaje ode mnie cztery na pięć. Wygrał z tobą o pół punktu. Vibe coderzy triumfują.
Komentarz do kodu i rachunek końcowy
Wes: Możemy jeszcze zobaczyć parę rzeczy? Tło Randy’ego. Kod to dosłownie sześćset sześćdziesiąt tagów „i”. To nie jest dziwne?
CJ: Z inline style. Włączyłem miernik klatek — renderuje się w pięć klatek na sekundę. Ale jest naprawdę dobry. Zrobiłeś to w Fable?
Randy: Fable 5.1. Zgadza się.
Wes: Człowieku… Era, w której to implementuje interfejsy tak blisko oryginału — moim zdaniem właśnie nadeszła. To jest bardzo, bardzo dobre. A ja mógłbym to wziąć i powiedzieć: „nie używaj sześciuset sześćdziesięciu tagów i”. Randy, wpisz „użycie” — ile cię to kosztowało?
Randy: Kosztowało mnie siedem dolarów czterdzieści pięć centów. [śmiech]
Wes: Za jeden przycisk.
Randy: To ładny przycisk. Zresztą w karierze płacili mi więcej niż siedem dolarów za zrobienie przycisku. [śmiech]
Wes: Fakt.