Portfolio
Projekt własny · AI-Development · 2026

kacper.
design

Portfolio zaprojektowane i zakodowane w całości przez Claude AI. Astro 5, TypeScript, View Transitions, animacje canvas — bez napisania ani jednej linii kodu ręcznie.

Astro 5 Claude AI TypeScript Prompt Engineering 26 iteracji
100%
kod przez AI
26
iteracji
0
linii ręcznie
4tyg
od zera do live
Projekt
kacper.design
Portfolio własne
Moja rola
Prompt Engineer
UX Direction · Code Review
Technologia
Astro 5 · TypeScript
Netlify · GitHub
Czas realizacji
4 tygodnie
Ciągły rozwój
01 — Stack technologiczny

Narzędzia wybrane przez AI

Claude zaproponował i uzasadnił każdy wybór technologiczny. Astro dla performance, TypeScript dla bezpieczeństwa typów, Netlify dla automatycznego deploya.

🚀
Astro 5
Framework
Island architecture, View Transitions API, zero-JS by default. Claude uzasadnił wybór nad Next.js — lżejszy dla statycznego portfolio z kilkoma interaktywnymi wyspami.
🤖
Claude AI
Główny programista
100% kodu wygenerowane przez Claude Sonnet. Komponenty Astro, TypeScript, CSS tokens, animacje canvas, logika routing — wszystko przez prompt.
🎨
CSS Tokens
Design System
Globalny system tokenów dla dark/light mode. `var(--bg)`, `var(--fg)`, `var(--accent)` — jeden przełącznik zmienia cały wygląd strony bez JS w CSS.
⚡
Netlify + GitHub
Deploy Pipeline
Automatyczny deploy na każdy `git push`. Branch protection, preview deploys, Lighthouse monitoring. CI/CD skonfigurowane przez Claude w pierwszej sesji.
02 — Proces tworzenia

Od idei do działającej strony

Każdy krok procesu wymagał innego podejścia do promptowania. Architektura wymagała precyzji, komponenty iteracji, a debugowanie — opisywania efektów.

01
Architektura i setup projektu
Pierwszy prompt opisał pełen zakres: portfolio UX designera, dark/light mode, animowane tło, sekcje Hero/Portfolio/About/Contact/Cases. Claude wybrał Astro, zaproponował strukturę folderów i wygenerował kompletny `package.json` z zależnościami.
Prompt strategiczny
02
Design System — tokeny i typografia
Opisałem paletę kolorów i oczekiwany efekt dark/light mode. Claude wygenerował `tokens.css` z pełnym systemem zmiennych CSS oraz konfigurację `global.css` z responsywną typografią i utility classes.
Design tokens
03
Komponenty sekcji — Hero, Portfolio, Cases
Każdy komponent powstawał przez opis efektu końcowego i wskazanie wzorców (np. „karty portfolio jak Awwwards, ciemne tło z neonowym akcentem"). Claude generował Astro komponenty z TypeScript i scoped CSS.
Iteracyjny prompt
04
Animacja tła HeroBg — canvas API
Załączyłem specyfikację animacji (siatka, bloby, cząsteczki 4 typów, palety kolorów). Claude napisał 350 linii TypeScript z pętlą RAF, cleanup przy View Transitions i ResizeObserver. Poprawka po zgłoszeniu że animacja nie wznawia się po nawigacji — jedna wiadomość.
Canvas + TypeScript
05
Debugowanie — zrzuty ekranu jako prompt
Każdy bug był opisywany przez zrzut ekranu i opis zachowania. „Kursor znika po nawigacji między stronami" — Claude zidentyfikował problem z IIFE i View Transitions, zaproponował refactor do named function z `astro:after-swap`. Czas naprawy: jedna wiadomość.
Visual debugging
06
Deploy i CI/CD
Claude wygenerował instrukcję GitHub + Netlify, skrypt `autopush.ps1` dla Windows i pomógł rozwiązać konflikty merge między feature branch a main. Build error z duplikatem `</style>` — zidentyfikowany i naprawiony przez inspekcję pliku.
DevOps
03 — Przykład promptu

Jak rozmawiać z AI o kodzie

Skuteczne prompty do generowania kodu mają wspólny wzorzec: kontekst + cel + ograniczenia + przykład. Poniżej rzeczywisty prompt który wygenerował komponent HeroBg.

Rzeczywisty prompt — HeroBg.astro
Kontekst: Buduję portfolio w Astro. Sekcja Hero ma position:relative. Cel: Stwórz komponent HeroBg.astro który zajmuje 100% rodzica (position:absolute, inset:0) i rysuje na canvas: — siatkę linii z falującą animacją (30 kolumn, 18 wierszy) — 3 radial gradient blobs pulsujące powoli — 4 typy cząsteczek: cross, ring, dash, diamond — system palet kolorów który zmienia się co ~400 klatek Ograniczenia: — TypeScript (nie JS) — cleanup przy astro:before-swap (cancelAnimationFrame, ResizeObserver.disconnect) — ResizeObserver na canvas.parentElement — reinicjalizacja przy astro:after-swap Nie dodawaj: żadnych zewnętrznych bibliotek, tylko vanilla canvas API
Co działa
  • ✓ Opisuj efekt końcowy, nie implementację
  • ✓ Podaj ograniczenia techniczne jawnie
  • ✓ Jeden komponent = jeden prompt
  • ✓ Dołącz zrzut ekranu przy bugach
Co nie działa
  • ✗ „Napisz mi stronę portfolio" (za ogólne)
  • ✗ Brak kontekstu frameworka i wersji
  • ✗ Wiele funkcji w jednym prompcie
  • ✗ Opis jak (implementacja) zamiast co (efekt)
04 — Wyzwania

Gdzie AI potrzebuje pomocy

AI generuje kod szybko, ale bez kontekstu między sesjami i bez możliwości uruchomienia kodu lokalnie. To wymaga od promptera świadomości stanu projektu.

Wyzwanie 01
Brak pamięci między sesjami
Claude nie pamięta poprzednich rozmów. Po każdej sesji musiałem podsumować stan projektu — które pliki istnieją, jakie problemy zostały rozwiązane, jaka jest aktualna wersja.
→ Rozwiązanie: userMemories i regularne podsumowania stanu
Wyzwanie 02
Konflikty między patchami
Wiele patchów ZIP stosowanych ręcznie prowadziło do sytuacji gdzie stara wersja pliku trafiała na GitHub. Build error z duplikatem `</style>` był wynikiem merge feature brancha ze starą wersją.
→ Rozwiązanie: pełny ZIP zamiast patchów przy dużych zmianach
Wyzwanie 03
Dark/light mode — hardcoded kolory
Kilka komponentów (AutoClub) używało sztywnych kolorów `#1E293B` zamiast tokenów `var(--fg)`. Strona wyglądała dobrze w jasnym motywie, ale była nieczytelna w ciemnym.
→ Rozwiązanie: audyt CSS i systematyczna zamiana na tokeny
Wyzwanie 04
View Transitions i reinicjalizacja JS
Astro View Transitions podmienia DOM bez przeładowania strony. Każdy skrypt inicjowany przy `DOMContentLoaded` lub przez IIFE nie wznawiał się po nawigacji — kursor, animacja tła, liczniki.
→ Rozwiązanie: `astro:after-swap` listener na każdej funkcji init
05 — W liczbach

Skala projektu

26
sesji z Claude
4 200
linii kodu
38
plików źródłowych
4tyg
od zera do live
Chcesz zobaczyć szczegóły?
Pełne case study — prompty,
błędy i wnioski
Czytaj case study →