O czym jest ten film
- Kimi K3 to według autora obecnie najlepszy model do projektowania front-endu — wygrywa ślepe testy w Design Arena, wyprzedzając Fable 5, GLM 5.2 i Opus 5.
- Kluczowy argument: Kimi K3 kosztuje około 30% ceny Fable 5, więc daje najlepszy stosunek jakości do ceny w zadaniach wizualnych.
- Autor pokazuje cały proces w trzech poziomach trudności: piękna strona desktop, wersja mobilna i strona spersonalizowana pod markę klienta.
- Do budowy potrzebne są trzy rzeczy: model AI (tu Kimi K3), źródło mediów (Higgsfield) i hosting (Vercel).
- Kimi K3 uruchamia się w Claude Code przez klucz z OpenRouter — dzięki temu działa w tym samym środowisku i korzysta ze wszystkich funkcji Claude Code.
- Poziom pierwszy: efektowna, „jednoprzewijkowa” strona z animacją (przykład — miód spływający do słoika).
- Poziom drugi: ta sama historia przełożona na wersję mobilną z płynnym przełączaniem wideo pion/poziom przy punkcie granicznym (breakpoint).
- Poziom trzeci: personalizacja pod istniejącą markę — pobranie logo, palety i typografii ze strony klienta (przez Firecrawl) i zbudowanie strony 3D w jej stylu (przykład — Fritz Cola).
- Higgsfield służy jako mniej awaryjne źródło generacji obrazów i wideo (Seedance, Veo, Kling, Nano Banana itd.), a drugi model (np. GPT 5.6) pełni rolę sędziego weryfikującego jakość.
- Autor sprzedaje własny płatny „skill” i masterclass, ale sam workflow i narzędzia są odtwarzalne.
Redakcyjne tłumaczenie
Kimi K3 — nowy numer jeden w projektowaniu
Kimi K3 buduje piękne, robiące wrażenie strony — ale 97% z nich wygląda źle, i nie jest to twoja wina. Wystarczy dać modelowi właściwy prompt. W tym materiale pokazuję system, dzięki któremu zbudujesz strony na poziomie tych najlepszych 3%: jak sprawić, żeby wyglądały świetnie za każdym razem, i jakich kosztownych błędów unikać. Cały system udostępniam za darmo, żebyś mógł go pobrać i robić wszystko razem ze mną — nawet jeśli jesteś kompletnym początkującym.
Nauczysz się budować strony, które wyglądają naprawdę pięknie. Mówię to jako ktoś, kto sprzedawał strony za tysiące dolarów. Porozmawiajmy więc o Kimi K3. To nowy numer jeden. Król w świecie AI zmienia się częściej niż w „Grze o tron”, ale w tej chwili to Kimi K3 jest najlepszym modelem.
Kimi K3 bije Fable 5 na front-endzie. To nie tylko nasz prywatny test — jest to udokumentowane w Design Arenie, gdzie ludzie w ślepych testach porównują modele. W skrócie: to obecnie najlepszy model projektowy na świecie. A tym, co czyni go wyjątkowym, jest cena — kosztuje mniej więcej 30% tego, co Fable 5.
(Informacja dodatkowa: „Design Arena” / „front-end code arena” to platformy, na których użytkownicy porównują wygenerowane przez modele interfejsy w ślepych pojedynkach i głosują na lepszy — stąd ranking nie opiera się na deklaracji autora, tylko na zbiorczych ocenach.)
Przejdziemy przez to na trzech poziomach trudności. Każdy kolejny jest ważniejszy od poprzedniego, a przy poziomie trzecim będziesz mieć coś naprawdę spektakularnego.
Uruchomienie Kimi K3 w Claude Code
Poziom pierwszy to efektowna strona: jedna historia, jedno przewinięcie i piękna, przyciągająca wzrok animacja.
Najpierw pobierz mój gotowy system („skill”) — link znajdziesz pod filmem, jest w 100% za darmo. Poświęciłem na dopracowanie go mnóstwo godzin i pieniędzy; ty możesz po prostu z niego skorzystać i oszczędzić sobie wszystkich błędów, które ja popełniłem.
Następnie trzeba dać Kimi K3 ten kod. Normalnie w Claude Code rozmawialibyśmy z Fable 5 albo Opus 5, ale Kimi wykorzystamy nieco inaczej. Są dwa główne sposoby. Pierwszy: uruchamiasz Kimi K3 w terminalu. Kopiujesz cały skill, wklejasz go do Claude Code i mówisz: „Podążaj za tym skillem i otwórz mi Kimi K3 w terminalu”. Jedyne, czego potrzebujesz, to klucz z openrouter.com, który daje dostęp do każdego modelu.
(Informacja dodatkowa: OpenRouter to pośrednik API — jednym kluczem można wywoływać modele wielu dostawców, m.in. Kimi K3 od Moonshot AI. Uruchomienie modelu „wewnątrz Claude Code” oznacza, że zewnętrzny model korzysta ze środowiska (harnessu) Claude Code — komend typu /compact, skilli itd.)
Ja w tym materiale używam „agentowego systemu operacyjnego” Claude Code. Jego zaletą jest to, że mogę rozmawiać z dowolnym modelem — wybieram Kimi K3, ustawiam poziom wysiłku (effort) na bardzo wysoki i pytam: „Który to model?”. Odpowiada: „Cześć, jestem Kimi K3, model Moonshot AI, działający przez OpenRouter”. Wszystko dzieje się w harnessie Claude Code, więc mam dostęp do komend i wszystkich swoich skilli, przy jednoczesnej możliwości podmiany modelu.
Trzy składniki dobrej strony: model, media, hosting
Zanim zbudujemy stronę z tymi immersyjnymi historiami, trzeba zrozumieć, co się na nią składa. Potrzebne są tylko trzy rzeczy:
- Model AI, który ją zbuduje — coś inteligentnego, np. Fable 5 albo Kimi K3 (u nas Kimi, bo jest świetny).
- Źródło mediów — miejsce, z którego weźmiemy piękne obrazy i wideo.
- Hosting — miejsce, w którym stronę opublikujemy, żeby inni mogli ją zobaczyć.
Do mediów podłączymy Higgsfield — stronę, która pozwala generować obrazy i wideo i daje dostęp do wielu modeli: Seedance, Veo, Kling 3.0, Nano Banana i innych. Wystarczy podłączyć się do jej CLI: kopiujesz instrukcję i mówisz Claude: „Chcę połączyć się z Higgsfield CLI, wykonaj te instrukcje i zaloguj mnie”. Otworzy się nowe okno przeglądarki, zatwierdzasz logowanie i od tej chwili możesz tworzyć dowolne obrazy i wideo bez wychodzenia z rozmowy.
(Informacja dodatkowa: CLI (interfejs wiersza poleceń) danej usługi pozwala agentowi wywoływać ją samodzielnie, bez ręcznego klikania w przeglądarce — dlatego integracja przez CLI jest tu kluczowa.)
Poziom 1 — efektowna strona na desktop
Otwieramy nowe okno z Kimi K3, ustawiamy wysoki poziom wysiłku i mówimy: „Chcę zbudować stronę. Zapoznaj się z tym skillem i podążaj za instrukcjami”. Załączasz skill (albo mówisz, że to ostatni pobrany plik). Model wróci z pytaniami — ma listę kontroli wstępnej (pre-flight): sprawdza Higgsfield CLI, opcjonalny drugi model do weryfikacji krzyżowej oraz logowanie do Vercela.
(Informacja dodatkowa: weryfikacja krzyżowa polega na tym, że drugi model — może to być kolejna instancja Kimi K3 lub np. GPT — ocenia i poprawia efekt pracy pierwszego modelu, pełniąc rolę sędziego.)
Odpowiadamy: dla pierwszej karty chcemy silnik mediów z Higgsfield (nie samego kodu, tylko piękne wideo i grafikę), jako sędziego dołączamy GPT 5.6 (jeśli go nie masz, wystarczy Claude albo cokolwiek innego), i prosimy o rachunek kosztów. Jako pomysł wybieram coś z miodem: pszczoły, prawdziwy plaster, podróż od dzikiej natury aż do gotowego produktu. Nie mam żadnych własnych zasobów, więc proszę model, żeby użył wyobraźni i zrobił to najbardziej epicko, jak się da.
Na dole widać zużycie tokenów, okno kontekstu (kompaktuje się przy 891 000 tokenów) oraz koszt rozmowy z modelem.
Efekt: miód spływa, wpada do słoika, napełnia go — i to jest naprawdę piękne. Dalej mamy resztę strony: sekcje, informacje o produktach, słoik z możliwością zakupu i ładną animacją, logo Honey Drop, cały proces oraz zielony błysk przechodzący po elemencie — wszystko bardzo płynne. Ta konkretna strona nie miała żadnej referencji projektowej. A trzeba wiedzieć, że jeśli podasz Kimi K3 referencję designu, model jest wyjątkowo dobry w jej wiernym odwzorowaniu. W Design Arenie zajmuje pierwsze miejsce — powyżej Fable 5, GLM 5.2, a nawet Opus 5.
Poziom 2 — projekt mobilny
Jest jeden duży problem: większość stron świetnie wygląda na desktopie, ale użytkownicy są głównie na telefonach. Pytanie brzmi więc: jak przenieść tę samą magię na mobile?
W skill wbudowałem obsługę tego przypadku — spędziłem mnóstwo czasu i pieniędzy na testach generacji 3D, więc większość problemów już rozwiązałem. Mamy dwie opcje: przeprojektować stronę bez ponownej generacji wideo albo poprosić Kimi K3, żeby ten sam projekt przerobił na format mobilny. To rzadkość — mało kto robi wersję mobilną dynamicznie. Prosimy więc o „przekręcenie ujęcia” pod inny format. Zasada: jeden pomysł na jeden ekran, ale zachowujemy ten sam szkielet historii („story spine”).
Mówię modelowi: „Właśnie zbudowaliśmy piękną stronę na desktop, teraz przejdź ten sam proces, ale zbuduj wersję zoptymalizowaną pod mobile. Użyj tej samej skali. Chcę, żeby po osiągnięciu określonego punktu granicznego (breakpoint) wideo płynnie zmieniało się z pionowego na poziome”. Wynik jest zoptymalizowany pod telefon — i to bez żadnej dodatkowej pracy nad typografią czy resztą designu, które można potem podnieść na jeszcze wyższy poziom.
Rekomendacja: po prostu przetestuj, gdzie są punkty graniczne, sprawdź, czy ci odpowiadają, i doprecyzuj to z modelem. Nawet jeśli — ze względu na koszt generacji — nie chcesz wideo także na mobile, kluczowe jest, żebyś w ogóle pomyślał o projekcie mobilnym. Z mojego poprzedniego startupu, gdzie na stronę wchodziło około 50 000 unikalnych osób miesięcznie i sam robiłem SEO, wiem z danych, jak wielu ludzi ogląda serwis na telefonie. Zadbaj o to, żeby ta ścieżka też była piękna.
Poziom 3 — personalizacja pod markę
To rozwiązuje jeden z największych problemów i jest sposobem, w jaki naprawdę zarabia się na tym pieniądze. Nie tworzymy stron w izolacji — robimy strony spersonalizowane. Klient mówi: „To jest nasza marka, chcemy nową stronę”. Ma już tożsamość wizualną, paletę kolorów, określony klimat i przekaz.
Idea poziomu trzeciego: budujemy piękne strony 3D (nie musi być 3D, ale wygląda świetnie i mocno angażuje — robiłem też wersję z osadzonym wideo w pętli u góry, które nadawało premium’owy charakter marce z wyższej półki). Personalizacja polega na tym, że w jednym promptcie każemy modelowi wejść na stronę, wyciągnąć logo i tożsamość marki i zbudować z tego całość.
Proces to trzy proste kroki: pobierz paletę, dopilnuj fontów, zbuduj coś świetnie wyglądającego. Jako przykład wybieram markę w stylu Fritz Cola — biało-czarno-czerwona paleta, czyste logo. Mówię Kimi K3: „Użyj ostatniego pobranego skilla i zbuduj mi piękną stronę 3D, biorąc tożsamość marki Fritz Cola. Wykorzystaj Firecrawl do wyciągnięcia tożsamości: logo, typografii, a potem zbuduj wszystko, zadając mi właściwe pytania i korzystając z Higgsfield CLI”.
Higgsfield jest według mnie mniej awaryjny przy generacji wideo — wydałem na te testy setki dolarów. Bardzo ważny jest też Firecrawl i tego kroku nie należy pomijać. Można kazać modelowi robić wyszukiwania w sieci, ale gdy proszę go o samodzielne scrapowanie stron i pobranie tożsamości marki, model często się gubi — kręci się w kółko, chyba że jesteś bardzo precyzyjny. A Kimi K3 kosztuje (jest w podobnej półce co Opus 5 — taniej niż Fable 5, ale nie za darmo). Dlatego narzędzia takie jak Firecrawl, które nie zwracają bezużytecznego HTML-a (tagi H1, H2 itd.), tylko czystą informację, są bardzo cenne. Wyszukiwanie w sieci nie jest zbudowane dla agentów; narzędzia jak Firecrawl to umożliwiają.
(Informacja dodatkowa: Firecrawl to usługa, która przetwarza strony WWW na czysty tekst/markdown przygotowany pod modele AI, pomijając zbędny kod — dzięki temu agent dostaje samą treść, a nie surowy HTML.)
Jeśli model coś namiesza, możesz porozmawiać z samym Claude Code — działa to i w agentowym systemie operacyjnym, i w terminalu. Mówisz np.: „Buduję to w terminalu, pomóż mi się w tym połapać” albo „nie rozumiem, co robi ten model” — a Claude potrafi za ciebie pośredniczyć w rozmowie z modelem, gdy trafisz na ścianę. Każdy błąd, jaki znalazłem, wbudowywałem potem w skill („zapisz to tak, żeby już nikomu się nie zdarzyło”), żeby doświadczenie było bezawaryjne.
Efekt dla marki coli: logo zaciągnięte automatycznie, hasła w stylu „obudź się, zostań czujny, dużo kofeiny, żadnych kompromisów”, „szklana butelka, kapsel, dwóch przyjaciół, jeden pomysł”, „mniej cukru, więcej kofeiny, niezależni od 2003” — z animacją napełniania i płynnym przejściem do reszty strony. Jedyny drobiazg do poprawki: kursor stał się czerwoną kropką zamiast standardowego wskaźnika.
Hosting na Vercel
Do publikacji strony używamy vercel.com. Wszystkie strony, które pokazuję, są tam hostowane. Zakładasz konto na vercel.com, a potem mówisz Claude: „Połącz się z Vercelem przez CLI”. To wszystko — Claude otworzy nową przeglądarkę, zalogujesz się, a od tej pory Claude może hostować strony w twoim imieniu.
Teraz umiemy już budować te piękne strony z Kimi K3. Kolejnym krokiem jest nauczenie się, jak w pełni wykorzystać system operacyjny, który ułatwia takie budowanie z dowolnym modelem — i to omówię w następnym materiale.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Do zadań wizualnych wybieraj model najlepszy w designie, nie najdroższy
Na czym polega: Autor twierdzi, że Kimi K3 zajmuje pierwsze miejsce w ślepych testach projektowych (Design Arena), wyprzedzając Fable 5 i Opus 5, przy koszcie rzędu 30% ceny Fable 5.
Jak stosować: Do generowania front-endu i layoutów testuj Kimi K3 zamiast domyślnie sięgać po najdroższy model; sprawdzaj bieżące rankingi na arenach porównawczych, bo lider zmienia się co kilka tygodni.
Na co uważać: Rankingi z aren i deklaracje twórcy sponsorującego dany workflow to nie to samo co twój przypadek — porównaj wyniki na własnym zadaniu. Kimi K3 nadal nie jest darmowy (koszt zbliżony do Opus 5).
2.Uruchamiaj obce modele w środowisku Claude Code przez OpenRouter
Na czym polega: Przez jeden klucz OpenRouter można wywołać Kimi K3 wewnątrz harnessu Claude Code i zachować komendy, skille oraz podgląd kosztów.
Jak stosować: Załóż klucz na openrouter.com, poproś Claude Code o otwarcie wybranego modelu w terminalu i ustaw poziom wysiłku (effort) na wysoki dla zadań projektowych.
Na co uważać: Płacisz za tokeny modelu przez OpenRouter niezależnie od subskrypcji Claude — pilnuj licznika kosztów i punktu kompaktowania kontekstu.
3.Każdą stronę rozłóż na trzy składniki: model, media, hosting
Na czym polega: Cały workflow sprowadza się do modelu AI (Kimi K3), źródła mediów (Higgsfield) i hostingu (Vercel).
Jak stosować: Zanim zaczniesz, upewnij się, że masz podłączone wszystkie trzy — brak któregokolwiek zablokuje cię w połowie drogi.
Na co uważać: To stack złożony z płatnych usług zewnętrznych. Policz łączny koszt (model + generacje wideo + hosting) przed obietnicą złożoną klientowi.
4.Zawsze projektuj osobno wersję mobilną, zachowując ten sam szkielet historii
Na czym polega: Ta sama „opowieść” strony zostaje przełożona na mobile z płynnym przełączaniem wideo (pion/poziom) przy punkcie granicznym, przy zasadzie „jeden pomysł na ekran”.
Jak stosować: Po zbudowaniu desktopu poproś model o wersję mobilną z tą samą skalą i story spine; przetestuj breakpointy i dopracuj je iteracyjnie.
Na co uważać: Generacja osobnego wideo na mobile kosztuje. Jeśli budżet jest ciasny, zrezygnuj z wideo, ale nie z samego przemyślenia układu mobilnego — większość ruchu bywa z telefonów.
5.Do brandingu klienta używaj scrapera dla agentów (Firecrawl), nie web searcha
Na czym polega: Firecrawl zwraca czystą treść marki (logo, kolory, typografię) bez zbędnego HTML, dzięki czemu model nie kręci się w kółko przy pobieraniu tożsamości ze strony.
Jak stosować: W promptcie personalizacyjnym każ modelowi użyć Firecrawl do wyciągnięcia palety, logo i fontów, a dopiero potem budować stronę w stylu marki.
Na co uważać: Firecrawl to dodatkowa płatna usługa. Zawsze zweryfikuj, czy pobrane kolory i logo faktycznie zgadzają się z oryginałem marki — automat potrafi się pomylić.
6.Wprowadź drugi model jako sędziego jakości
Na czym polega: Weryfikacja krzyżowa: drugi model (np. GPT 5.6 lub kolejna instancja Kimi K3) ocenia i poprawia efekt pierwszego.
Jak stosować: W konfiguracji zadania włącz sędziego i poproś o rachunek kosztów, żeby świadomie kontrolować wydatek na dodatkową weryfikację.
Na co uważać: Sędzia zwiększa jakość, ale i koszt oraz czas. Przy prostych stronach może być zbędny — używaj go tam, gdzie stawką jest projekt dla klienta.
7.Preferuj integracje przez CLI, żeby agent działał samodzielnie
Na czym polega: Higgsfield i Vercel podłącza się przez CLI, dzięki czemu Claude/Kimi wywołuje je bez ręcznego klikania.
Jak stosować: Poproś Claude o połączenie z usługą „przez CLI”; zatwierdź logowanie w oknie przeglądarki, które się otworzy.
Na co uważać: Nadajesz agentowi realny dostęp do kont, które mogą generować koszty i publikować treści. Trzymaj się zaufanych usług i miej kontrolę nad tym, co agent uruchamia.
8.Referencja projektowa mocno podnosi jakość Kimi K3
Na czym polega: Model jest wyjątkowo dobry w wiernym odwzorowaniu podanego designu — bez referencji efekt bywa losowy (autor mówi, że „97% wygląda źle”).
Jak stosować: Zawsze dołączaj referencję wizualną (zrzut, layout, przykładową stronę), gdy zależy ci na konkretnym stylu.
Na co uważać: Odwzorowanie cudzego designu 1:1 rodzi ryzyko naruszenia praw i „zerżnięcia” cudzej identyfikacji — używaj referencji jako inspiracji, nie kopii komercyjnej marki.
9.Traktuj Claude jako warstwę ratunkową nad kapryśnym modelem
Na czym polega: Gdy Kimi K3 się myli, można poprosić Claude o pomoc w nawigacji i pośredniczenie w rozmowie z modelem.
Jak stosować: Przy błędzie opisz Claude, co budujesz i co się dzieje; niech pomoże zdiagnozować i przeformułować polecenie do modelu.
Na co uważać: To obejście, nie gwarancja. Powtarzalne błędy lepiej zapisać na stałe w instrukcji/skillu, żeby nie wracały.
10.Iteruj przez dokolejkowywanie poleceń i domykaj proces hostingiem
Na czym polega: W trakcie pracy modelu można dorzucać wiadomości sterujące, które trafią do kolejki i zostaną uwzględnione po zakończeniu zadania; gotową stronę publikuje się na Vercelu.
Jak stosować: Steruj efektem drobnymi doprecyzowaniami (np. „trzymaj się dokładnie palety i typografii”), a na końcu poproś Claude o hosting przez Vercel CLI.
Na co uważać: Dokolejkowane instrukcje działają dopiero po zakończeniu bieżącego zadania, nie natychmiast. Po publikacji sprawdź drobiazgi (autorowi kursor zmienił się w czerwoną kropkę) — automat zostawia takie usterki.