Jak do tego doszłoHow it came about
Zaczęło się od prezentacji. Miałem deck „Vibe-coding finansów” z Mobile Trends Conference i dwa dni do meetupu I DESIGN × Mobile Trends. Poprosiłem Claude'a o recenzję — dostałem listę literówek, ocenę dramaturgii i dwa brakujące slajdy. Potem poszliśmy dalej: pełny redesign w duchu „liquid glass”, z natywnymi, edytowalnymi diagramami zamiast wygenerowanych obrazków. Plik schudł ze 100 do 17 MB. I wtedy przyszła myśl, która uruchomiła resztę: skoro opowiadam o interfejsach, które generują się same — moja prezentacja nie może być PDF-em w załączniku. Musi żyć w przeglądarce. It started with a presentation. I had my “Vibe-coding finance” deck from Mobile Trends Conference and two days until the I DESIGN × Mobile Trends meetup. I asked Claude for a review — I got a list of typos, a dramaturgy assessment and two missing slides. Then we went further: a full “liquid glass” redesign with native, editable diagrams instead of generated images. The file slimmed from 100 to 17 MB. And then came the thought that triggered everything else: if I talk about interfaces that generate themselves — my deck can't be a PDF attachment. It has to live in the browser.
Dalej potoczyła się kula śnieżna. Wskazałem dwie strony-referencje: hirotos.com (szwajcarski minimalizm strony głównej) i noth.in (edytorialne case studies) — Claude obejrzał je w mojej własnej przeglądarce i nazwał wzorce, z których złożyliśmy design system. Potem: moje portfolio PDF i 352-megabajtowy Keynote zamieniły się w siedem case studies z wideo-demami, doszły zdjęcia z gali WaysConf i sceny MTC, QR dla publiczności, obsługa klikera… aż po hosting i analitykę. Łącznie: kilka wieczorów pracy w dialogu — i ani jednej linii kodu napisanej ręcznie. Then the snowball rolled. I pointed at two reference sites: hirotos.com (Swiss-minimal homepage) and noth.in (editorial case studies) — Claude browsed them in my own browser and named the patterns we forged into a design system. Then my portfolio PDF and a 352-megabyte Keynote turned into seven case studies with video demos; WaysConf gala and MTC stage photos joined in, a QR code for the audience, presenter-clicker support… all the way to hosting and analytics. In total: a few evenings of dialogue — and not a single line of hand-written code.
Ewolucja: deck przed i poEvolution: the deck before and after
Podział pracy — kto co robiłDivision of labour — who did what
Proces w sześciu krokachThe process in six steps
Za kulisami: archeologia materiałówBehind the scenes: material archaeology
Najlepsze treści nie leżały na wierzchu. Plik Keynote to w środku zwykły ZIP — po rozpakowaniu wypadło z niego 635 plików: oryginalne zdjęcia w pełnej rozdzielczości, dema produktów, których PDF-owe portfolio tylko linkowało do YouTube'a, nawet wektorowe logo. Claude renderował arkusze kontaktowe, ja wskazywałem, co jest czym — i tak dema z Meksyku (47 MB) i OnePlace (96 MB) trafiły na stronę jako 2–3-megabajtowe wideo. Podobnie z PDF-em: zamiast zrzutów stron, pdfimages wyciągnęło osadzone oryginały — w tym moje zdjęcie w rozdzielczości 2380×3332 ze strony kontaktowej.
The best content wasn't lying on the surface. A Keynote file is a plain ZIP inside — unpacking it spilled out 635 files: full-resolution originals, product demos my PDF portfolio only linked on YouTube, even a vector logo. Claude rendered contact sheets, I identified what was what — and that's how the Mexico (47 MB) and OnePlace (96 MB) demos landed on the site as 2–3 MB videos. Same with the PDF: instead of page screenshots, pdfimages pulled out the embedded originals — including my 2380×3332 photo from the contact page.
Hosting: z WordPressa na czyste plikiHosting: from WordPress to plain files
Stara strona stała na WordPressie u SiteGround. Nowa to czyste pliki statyczne — bez bazy, panelu i wtyczek, czyli bez tego wszystkiego, co się zwykle hakuje i psuje. Podmiana zajęła kwadrans w menedżerze plików hostingu, według zasady, którą polecam każdemu: The old site ran WordPress on SiteGround. The new one is plain static files — no database, no admin panel, no plugins, i.e. none of the things that usually get hacked or break. The swap took fifteen minutes in the host's file manager, following a rule I'd recommend to anyone:
Z SiteGround korzystam sam — to na nim stoi strona, którą właśnie czytasz — i z czystym sumieniem polecam. Uczciwie: baner obok to link afiliacyjny. Jeśli kupisz przez niego hosting, zapłacisz dokładnie tyle samo, a mnie wesprzesz w drobny sposób — zwróci mi się koszt utrzymania tej strony. I use SiteGround myself — the site you're reading runs on it — and I recommend it with a clear conscience. Honestly: the banner is an affiliate link. If you buy hosting through it, you pay exactly the same, and you support me in a small way — it pays back the cost of keeping this site online.
Analityka bez nadużyćAnalytics without the creep factor
Chciałem wiedzieć, które projekty was ciekawią — bez śledzenia kogokolwiek na siłę. Google Analytics 4 ładuje się więc dopiero po kliknięciu „Zgadzam się” w banerze; „Nie teraz” oznacza dokładnie zero skryptów Google'a. Do tego anonimizacja IP, jawnie odmówione sygnały reklamowe i polityka bezpieczeństwa (CSP), która wpuszcza wyłącznie trzy domeny Google — żaden inny obcy kod nie ma prawa się wykonać. I wanted to know which projects interest you — without force-tracking anyone. So Google Analytics 4 loads only after you click “Accept” in the banner; “Not now” means exactly zero Google scripts. Add IP anonymisation, explicitly denied advertising signals, and a security policy (CSP) that allowlists just three Google domains — no other third-party code is allowed to run.
Mój ulubiony moment całego projektu: zamiast dyktować mi instrukcję, Claude sam wszedł do panelu Google Analytics w mojej przeglądarce, znalazł istniejącą usługę z czasów WordPressa, wyjął z niej Measurement ID i wpisał go w kod. A po wdrożeniu — wszedł na stronę, kliknął zgodę na banerze i pokazał mi raport czasu rzeczywistego z dwoma użytkownikami z Polski: nim i mną. Test przeszedł sam siebie. My favourite moment of the whole project: instead of dictating instructions, Claude walked into my Google Analytics panel in my own browser, found the WordPress-era property, pulled the Measurement ID and wired it into the code. After deployment it visited the site, accepted the consent banner and showed me the realtime report with two users from Poland: itself and me. The test passed itself.
Czego się nauczyłemWhat I learned
Zrób to sam — instruktażDo it yourself — the how-to
1. Zbierz materiały (portfolio, CV, zdjęcia) w jednym folderze i podepnij go do Claude'a (tryb Cowork lub Claude Code).
2. Znajdź 2–3 strony, które kochasz — i nazwij, co w nich lubisz.
3. Wystartuj promptem (do pobrania obok) albo zainstaluj skill — poprowadzi AI przez cały proces: od design systemu po wdrożenie.
4. Iteruj małymi krokami: jedna strona → feedback → reszta.
5. Testuj na telefonie i żywym adresie. Poprawki zgłaszaj zrzutami ekranu.
1. Gather your materials (portfolio, CV, photos) in one folder and connect it to Claude (Cowork or Claude Code).
2. Find 2–3 sites you love — and name what you love about them.
3. Start with the prompt (download alongside) or install the skill — it walks the AI through the whole process, design system to deployment.
4. Iterate in small steps: one page → feedback → the rest.
5. Test on a phone and the live URL. Report fixes with screenshots.
Nie potrzebujesz umieć programować — potrzebujesz umieć chcieć konkretnie: wiedzieć, jak ma być, poznać po wyniku, że jeszcze nie jest, i nazwać różnicę. To jest dokładnie warsztat projektanta. Kod okazał się najłatwiejszą częścią tego projektu. You don't need to know how to code — you need to know how to want precisely: to know how it should be, to recognise it isn't yet, and to name the difference. That is exactly a designer's craft. The code turned out to be the easiest part of this project.
Zabierz mój warsztat ze sobąTake my toolkit with you
Dwa pliki, które destylują wszystko powyżej — proces, pułapki i gotowe otwarcie rozmowy. Bierz, używaj, przerabiaj. Jeśli zbudujesz na tym swoją stronę, daj znać — chętnie zobaczę. Two files distilling everything above — the process, the pitfalls and a ready-made conversation opener. Take them, use them, remix them. If you build your site on top, let me know — I'd love to see it.
Instalacja skilla: Claude → Ustawienia → Capabilities → Skills. Plik .skill to zwykły zip z instrukcją SKILL.md w środku — możesz najpierw zajrzeć, co instalujesz (i tak właśnie należy robić z każdym skillem z internetu).Installing the skill: Claude → Settings → Capabilities → Skills. A .skill file is a plain zip with a SKILL.md inside — peek before you install (as you should with any skill from the internet).