Case Studies
Case Study · AI-Development · 2026

kacper.
design

Jak zaprojektowałem i zakodowałem portfolio w całości przez Claude AI — bez napisania ani jednej linii kodu ręcznie. 26 sesji, 4 200 linii kodu, 4 tygodnie.

Prompt Engineering Astro 5 AI-First Development TypeScript
100%
kod przez AI
26
sesji
4200
linii kodu
4tyg
realizacja
Projekt
kacper.design
Portfolio własne
Moja rola
Prompt Engineer
Direction · QA · Deploy
AI partner
Claude Sonnet
Architektura · Kod · Debug
Czas
4 tygodnie
Marzec 2026
00 — Kontekst

Hipoteza: AI jako programista

Chciałem sprawdzić czy możliwe jest stworzenie produkcyjnej strony internetowej bez pisania kodu — wyłącznie przez dialog z modelem językowym. Portfolio designera, które samo w sobie jest dowodem tezy.

0
Linii kodu napisanych ręcznie
Każda linia — od `package.json` przez komponenty Astro po animacje canvas — powstała jako odpowiedź Claude na prompt. Moja rola: direction, QA i deploy.
26
Sesji konwersacyjnych
Każda sesja skupiała się na jednym obszarze: nowym komponencie, naprawie błędu lub dodaniu funkcji. Kontekst projektu przekazywany przez userMemories i podsumowania.
4tyg
Od zera do produkcji
Setup Astro, design system, wszystkie komponenty, 2 projekty z case studies, CI/CD na Netlify — w 4 tygodnie pracy wieczorami, bez background w front-end developmencie.
„Nie piszesz kodu — opisujesz efekt końcowy, ograniczenia i kontekst. To wymaga innego rodzaju precyzji niż programowanie, ale jest w zasięgu każdego designera."
— Kacper Stolarczyk, po 4 tygodniach pracy z Claude
01 — Architektura

Decyzje techniczne podjęte przez AI

Pierwsza sesja była strategiczna — opisałem cel i ograniczenia, Claude zaproponował i uzasadnił każdy wybór. Żaden nie był przypadkowy.

Prompt #1 — kick-off
# Kontekst Jestem UX/UI designerem. Chcę zbudować portfolio które: - Pokazuje moje projekty z opisem procesu - Ma dark/light mode z przełącznikiem - Animowane tło w sekcji hero (canvas) - Szybkie ładowanie, SEO, deploy na Netlify # Pytanie Zaproponuj stack technologiczny i uzasadnij każdy wybór. Następnie wygeneruj kompletną strukturę projektu.
Odpowiedź Claude — fragment uzasadnienia
Astro 5 zamiast Next.js — Portfolio jest głównie statyczne. Astro generuje zero JS dla stron bez interakcji, ładuje React/TypeScript tylko tam gdzie potrzeba (ThemeToggle, ContactForm). View Transitions API daje płynne animacje między stronami bez routera JS. CSS Custom Properties zamiast Tailwind tokens — Dark/light mode działa przez zmianę :root variables, bez dodatkowego JS. Jeden `[data-theme="light"]` w CSS nadpisuje wszystkie kolory globalnie.
02 — Przebieg prac

26 sesji, jeden projekt

Każda sesja skupiała się na konkretnym zadaniu. Kontekst projektu był przekazywany przez userMemories — Claude wiedział co już istnieje i co zostało rozwiązane.

01–03
Setup projektu + design system
Astro 5, struktura folderów, tokens.css z dark/light mode, typografia, BaseLayout z meta tags i View Transitions.
Architektura
04–07
Komponenty sekcji głównych
Hero z animowanym tłem canvas, Portfolio z kartami projektów, About, Process, Contact z formularzem React.
Komponenty
08–10
System treści (Content Collections)
Astro Content Collections dla projektów, schemat TypeScript, dynamiczny routing `[slug].astro`, SEO meta per-strona.
CMS
11–14
Projekt QL&Joy — strona i case study
Pełna strona projektu z hero na zdjęciu, iteracje brandingu, paleta kolorów, sekcja e-commerce. Case study z 7 sekcjami.
Treść
15–19
Projekt AutoClub — od HTML do Astro
Konwersja dwóch stron HTML (index.html, model.html, booking.html) na Astro. Interaktywny kalendarz rezerwacji z kalkulatorem ceny.
Konwersja
20–23
Bugfixing — kursor, animacje, routing
Kursor znikający po View Transitions (IIFE → named function), routing /projects vs /cases, dark mode w AutoClub (hardcoded colors → tokens).
Debug
24–26
Deploy, CI/CD, build error
Konfiguracja Netlify, skrypt autopush.ps1, rozwiązanie konfliktu merge feature/main, naprawa duplikatu </style> który powodował build failure.
DevOps
03 — Prompt Engineering

Anatomia skutecznego promptu

Po 26 sesjach wyłonił się wzorzec. Prompty które generowały użyteczny kod za pierwszym razem miały 4 elementy.

1. Kontekst projektu
„Buduję portfolio w Astro 5 z TypeScript. Pliki CSS używają tokenów `var(--fg)`, `var(--bg)`, `var(--accent)`."
Bez tego Claude generuje kod który nie pasuje do istniejącego systemu.
2. Cel (co, nie jak)
„Chcę kartę projektu która po hover pokazuje strzałkę i przyciemnia tło."
Opisuj efekt końcowy. Implementację pozostaw Claude — i tak zrobi to lepiej.
3. Ograniczenia
„Bez zewnętrznych bibliotek. Tylko vanilla CSS i TypeScript. Responsive od 320px."
Claude bez ograniczeń instaluje niepotrzebne paczki i pisze zbyt skomplikowany kod.
4. Zrzut ekranu przy bugach
Dołączałem screenshot z opisem „to działa źle, powinno działać tak".
Wizualny kontekst redukuje liczbę pytań zwrotnych o połowę.
04 — Refleksja

Co zmieniłem w myśleniu o AI

Zaskoczenia pozytywne
  • Claude samodzielnie proponował lepsze rozwiązania niż to co opisałem — np. CSS tokens zamiast hardcoded kolorów przy pierwszym prompcie o dark mode
  • Debugowanie przez zrzut ekranu działało zadziwiająco dobrze — opis wizualny był często wystarczający do zlokalizowania błędu
  • Kod był czytelny i dobrze skomentowany — łatwiej go czytać niż kod który sam bym napisał
  • Refactoring istniejącego kodu (zamiana hardcoded colors na tokeny) był szybszy niż ręczne szukanie i zastępowanie
Najtrudniejsze momenty
  • Brak pamięci między sesjami — każda rozmowa zaczynała się od zera, musiałem odtwarzać kontekst projektu
  • Konflikty między patchami — stosowanie wielu małych ZIP-ów zamiast jednego pełnego prowadziło do niespójności w repo
  • Claude nie może uruchomić kodu lokalnie — błędy widoczne dopiero po buildzie (jak duplikat znacznika style) są trudniejsze do przewidzenia
  • Czasem AI „wymyślało" rozwiązania które wyglądały sensownie ale nie działały — potrzebna była weryfikacja po każdej większej zmianie
05 — Wyniki

Portfolio działa na produkcji

kacper.design jest live na Netlify od marca 2026. Wszystkie funkcje działają — dark/light mode, animacje, routing, formularze, interaktywny kalendarz.

100%
kod przez AI
4 200
linii kodu
38
plików .astro / .ts
Live
na Netlify
Chcesz porozmawiać o AI w designie?
Napisz do mnie — chętnie powiem więcej
Porozmawiajmy →