Strona bez szablonu z Claude Code i Refero DESIGN.md

Praktyczne materiały o pracy z projektami i modelami: dokumentacja Ailoot.

Dlaczego strony tworzone przez Claude Code wyglądają jak szablony Tailwind?#

W opisanym przykładzie ze stycznia powstawał niewielki projekt poboczny — dialer do sprzedaży na zimno. W pustym repozytorium poproszono Claude Code o zbudowanie strony głównej. Rezultat był generyczny: ciemne tło slate-950, akcent purple-500, pogrubiony bezszeryfowy nagłówek i trzy karty poniżej, każda z identycznym cieniem. Ten sam układ co w pierwszym wydaniu ChatGPT, pierwszym wydaniu Lovable i pierwszym wydaniu v0. Pięć edycji promptu z dodatkami „nowoczesny”, „premium” i „nie jak wszyscy inni” niczego nie zmieniło. Strona nadal wyglądała, jakby pochodziła z zestawu Tailwind UI Templates.

Claude nie „nie wie”, jak stworzyć coś pięknego. Wie, co robi większość, i odtwarza tę większość. Aby uzyskać wynik inny niż przeciętny, agent potrzebuje konkretnych ograniczeń: jakich kolorów i czcionek używać, jakie odstępy stosować oraz które komponenty traktować jako kanoniczne.

Właśnie tu system projektowy staje się kontekstem. Nie „zrób to pięknie”, lecz „zrób to w tym konkretnym stylu; oto jego parametry”.

Refero Styles wypełnia tę lukę gotowym artefaktem — plikiem DESIGN.md z parametrami zaczerpniętymi z prawdziwych produktów.

Czym jest Refero Styles?#

Strona główna styles.refero.design mówi wprost: „odkryj ponad 2 000 systemów projektowych z czołowych stron produktowych, czytelnych dla agentów AI”. Katalog obejmuje marki wyznaczające standard wizualny: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal i Duolingo. Nie są one wyodrębniane ręcznie — zespół Refero uruchamia skrypt analizujący rzeczywiste CSS i znaczniki strony, a wynik zapisuje w uporządkowanym Markdownie. Sama biblioteka styles.refero.design jest bezpłatna.

Kluczowe jest słowo „uporządkowanych”. Plik nie zawiera zrzutów ekranu ani opisów w rodzaju „w minimalistycznym stylu”. To Markdown z konkretnymi kolorami w formacie szesnastkowym, dokładnymi rozmiarami czcionek w pt, jednostkami odstępów i regułami dla komponentów. Agent AI czyta ten plik i korzysta z konkretów zamiast próbować opisywać gust słowami.

Na stronie ai-agents zespół Refero wymienia obsługiwane narzędzia: „Cursor, Claude Code, Codex, v0 i Lovable”. Innymi słowy, DESIGN.md jest uniwersalnym artefaktem — jednym plikiem pasującym do wszystkich głównych agentów AI do tworzenia oprogramowania.

Co zawiera DESIGN.md?#

Zespół Refero opisuje strukturę pliku na stronie design-md-template:

Struktura pliku zwykle wygląda więc tak:

Twórcy podkreślają też zasadę, która rozwiązuje 80% problemów z projektowaniem za pomocą AI:

Kod szesnastkowy #5E6AD2 jest więc bardziej precyzyjny niż „jak Linear”. Dokładna wartość font-size: 13px / line-height: 18px jest lepsza niż „kompaktowy tekst”. Konkret wygrywa z interpretacją.

DESIGN.md w repozytorium nie jest obrazkiem dla zespołu. To element trwałego kontekstu projektu: uporządkowana wiedza, którą AI czyta przy każdym zapytaniu.

Jak stworzyć stronę w stylu Linear w 4 krokach#

Te cztery kroki składają się na opisaną sekwencję rozpoczynania pracy nad nową stroną. To nie „cztery kroki ogólnie”, lecz konkretna sekwencja z jednym działaniem na każdy krok.

1. Zainstaluj Claude Code

   Natywny instalator obsługiwany jednym poleceniem: curl -fsSL https://claude.ai/install.sh | bash (metoda zalecana w oficjalnej dokumentacji). W systemie macOS działa brew install --cask claude-code; w Windows — winget install Anthropic.ClaudeCode. Jeśli program jest już zainstalowany, sprawdź wersję: claude --version (wymagana jest wersja 2.1.178 lub nowsza — wprowadzono w niej uprawnienia Tool(param:value) i blokowanie niebezpiecznych poleceń git w trybie automatycznym). Zaloguj się na konto: uruchomienie claude otwiera kreator. Claude Code jest częścią subskrypcji Pro ($17 miesięcznie przy rozliczeniu rocznym lub $20 przy rozliczeniu miesięcznym).

2. Otwórz Refero Styles i wybierz markę

   Wejdź na https://styles.refero.design i otwórz katalog. Głównym kryterium wyboru jest dopasowanie do produktu, a nie to, czy „podoba ci się wygląd”. Tworzysz pulpit SaaS? Sprawdź Linear, Vercel i Notion. Tworzysz produkt fintechowy? Sprawdź Stripe, Mercury i Column. Tworzysz produkt dla członków? Sprawdź Duolingo. Otwórz kartę marki i kliknij „Copy DESIGN.md”.

3. Umieść DESIGN.md w projekcie jako kontekst

   Utwórz plik docs/DESIGN.md w katalogu głównym projektu i wklej skopiowaną zawartość. Następnie otwórz CLAUDE.md i dodaj jeden wiersz: @docs/DESIGN.md. To dyrektywa importu — Claude Code wczytuje zawartość do kontekstu po rozpoczęciu sesji. Więcej o importach w CLAUDE.md znajdziesz w przewodniku po jednym pliku instrukcji dla Claude Code, Codex i Cursor.

4. Poproś o konkretną stronę

   Nie pisz „zrób to pięknie”. Określ szczegóły: „Korzystając z DESIGN.md w kontekście, zbuduj stronę główną produktu SaaS do zarządzania zadaniami. Struktura: sekcja hero z nagłówkiem i podnagłówkiem, dwa przyciski CTA (główny i dodatkowy), niżej blok z 3 funkcjami i ikonami, a następnie blok z opiniami klientów. Użyj dokładnie kolorów i typografii z DESIGN.md; nie wymyślaj własnych”.

Po czwartym kroku Claude tworzy stronę. W opisanym doświadczeniu strona główna zajmuje średnio 8–12 minut i rzeczywiście przypomina styl wybranej marki. To nie kopia idealna co do piksela, ale rozpoznawalna estetyka: te same czcionki, ta sama paleta, ten sam rytm odstępów i te same drobne decyzje dotyczące przycisków.

Twórcy Refero opisują tę samą zasadę trzech kroków nieco krócej na stronie ai-agents/design-resources:

Ta sekwencja czterech kroków opiera się na tej samej logice i dodaje jawne kroki instalacji Claude Code oraz importu pliku do CLAUDE.md.

Jaki styl wybrać dla swojego produktu?#

Twórcy Refero udzielają tej rady już w pierwszym kroku swojego przewodnika: wybieraj wzorzec nie tylko na podstawie nazwy marki, ale także gęstości informacji, tonu i odbiorców.

Kolory, typografia, hierarchia i powściągliwy ruch inspirowane Apple mogą pasować do dashboardu SaaS, choć szerokie odstępy konkretnej strony marketingowej nie muszą. Oceniaj konkretną referencję, nie nazwę marki. W pulpicie księgowym jawnie ustaw zwarte wysokości wierszy, odstępy i gęstość informacji, zachowując czytelne liczby i kontrolki; nie kopiuj przestronnej prezentacji bez zmian.

Prosty przewodnik doboru stylu według rodzaju produktu:

Jeśli nadal masz wątpliwości, wybierz Linear. Ma najbardziej uniwersalne podstawy: neutralną paletę, czytelną typografię (Inter / Söhne) i stonowane odstępy. Strona oparta na Linear będzie wyglądała profesjonalnie w 9 na 10 rodzajów produktów.

Dlaczego DESIGN.md powinien być częścią trwałego kontekstu projektu?#

W opisanej praktyce DESIGN.md jest przechowywany obok CLAUDE.md w każdym projekcie zarządzanym za pomocą agentów AI. Nie jest traktowany jako „tymczasowy na jedno zadanie”. To trwały kanon, do którego odwołują się wszystkie przyszłe sesje. Za miesiąc możesz poprosić Claude’a o dodanie nowej strony do projektu — otworzy ten sam DESIGN.md i utworzy ją w tym samym stylu. Za sześć miesięcy możesz przekazać projekt innej osobie z zespołu — ona także może uruchomić Claude’a i uzyskać spójny wynik, ponieważ DESIGN.md znajduje się w repozytorium.

W projektowaniu ta zasada działa tak: raz podejmuje się decyzję dotyczącą palety, typografii i rytmu odstępów. Od tej pory każdy agent AI przyjmuje ją jako obowiązującą.

Oznacza to, że projekt istnieje jako kod (Markdown jest kodem), a nie jako plik Figma, którego AI nie potrafi odczytać. Gdy projekt jest plikiem w repozytorium, czytają go Claude Code, Codex i każde przyszłe narzędzie. Gdy znajduje się w Figma, żyje w osobnej przestrzeni i trzeba go ręcznie tłumaczyć dla każdej sesji.

W opisanych projektach pobocznych użyto takiej struktury:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

Te trzy pliki to jeden ze sposobów uporządkowania trwałego kontekstu projektu. DESIGN.md odpowiada za wygląd, ARCHITECTURE.md za strukturę, a BRAND.md za sposób komunikacji. Każdy agent AI mający dostęp do repozytorium otrzymuje wszystkie trzy pliki jako kontekst.

Czym są Refero MCP i refero_skill?#

Refero Styles to warstwa podstawowa (DESIGN.md jako plik). Kolejny etap to integracje zapewniające agentom AI „natywny” dostęp do biblioteki.

Refero MCP (oficjalne). To serwer API pod adresem https://api.refero.design/mcp, z którym Claude Code łączy się za pomocą tokenu bearer. Agent uzyskuje wtedy dostęp do ponad 150 000 ekranów i ponad 6 000 przepływów użytkowników z prawdziwych produktów. Można go zainstalować za pomocą umiejętności:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Po instalacji Claude rozpoczyna każdą sesję od „researchu projektowego”, który jest obowiązkowym pierwszym krokiem: sprawdza, które decyzje wizualne pasują do zadania, a w razie potrzeby proponuje trzy kierunki powiązane z wybranym wzorcem. Na 23 czerwca 2026 repozytorium refero_skill ma 67 commitów i 135 gwiazdek. To nowy produkt, który jest aktywnie rozwijany.

Opisana praktyka korzysta z prostego podejścia: ręcznie otworzyć stronę, skopiować DESIGN.md i umieścić go w pliku. MCP przydaje się, gdy praca z systemami projektowymi staje się rutyną — na przykład przy zarządzaniu kilkoma projektami klientów i codziennym przełączaniu się między różnymi kanonami wizualnymi. Więcej o podłączaniu serwerów MCP do Claude Code znajdziesz w przewodniku po NotebookLM i MCP.

Jakie 4 błędy psują ten proces?#

Te cztery błędy powtarzają się w opisanym doświadczeniu pracy z kontekstem projektowym. Każdy z osobna wydaje się niegroźny, ale każdy sprowadza wynik z powrotem do standardowego szablonu Tailwind.

Błąd 1. Prompt „zrób to nowocześnie”. To najczęstszy schemat błędu. Ludzie otwierają Claude Code i piszą: „zrób mi stronę SaaS, nowoczesny styl, wygląd premium”. Otrzymują ciemne tło i fioletowy akcent. W danych treningowych słowo „nowoczesny” wiąże się ze wszystkimi stronami docelowymi z lat 2022–2024 zbudowanymi na tym samym szablonie. Bez dokładnych parametrów z DESIGN.md „nowoczesny” oznacza „przeciętny”.

Błąd 2. Wklejenie DESIGN.md do czatu jako wiadomości. Czasem ktoś kopiuje DESIGN.md do okna czatu Claude Code i mówi: „oto styl, użyj go”. Działa to tylko do końca sesji. Po rozpoczęciu nowej sesji (albo przejściu do innego zadania i użyciu /clear) kontekst znika. Jeśli styl ma się utrzymać, plik musi znaleźć się w repozytorium i być zaimportowany w CLAUDE.md. Więcej o tym, dlaczego CLAUDE.md zapewnia trwały kontekst, znajdziesz w przewodniku po pamięci Claude’a.

Błąd 3. Wybór stylu, bo „mi się podoba”. Przestronna referencja marketingowa Apple może źle pasować bez zmian do pulpitu nieruchomości z 30 ofertami na ekranie. Nie wyklucza to typografii, palety ani hierarchii Apple: dostosuj odstępy i gęstość wierszy, potem sprawdź faktycznie widoczne informacje przy docelowym rozmiarze ekranu. Wybieraj konkretną referencję według gęstości, tonu i odbiorców, nie tylko marki.

Błąd 4. Brak wzmianki o DESIGN.md w samym prompcie. DESIGN.md może znajdować się w repozytorium, być zaimportowany przez CLAUDE.md i widoczny dla agenta. Ale jeśli prompt mówi tylko „zbuduj stronę internetową”, Claude może wybrać standardowe rozwiązanie, nie odwołując się wyraźnie do pliku. W każdym prompcie projektowym przydatny jest taki wiersz: „Użyj dokładnie kolorów, czcionek i odstępów z docs/DESIGN.md. Nie wymyślaj własnych wartości — weź je z pliku”. Dzięki temu agent korzysta z DESIGN.md zamiast go omijać.

Dokładne tokeny to kody szesnastkowe, rozmiary czcionek w pt i jednostki odstępów z DESIGN.md. Język naturalny to „nowoczesny”, „premium”, „czysty” lub „jak Apple”. Dokładne tokeny działają; dowolne określenia — nie.

Co zrobić dalej?#

Masz już podstawowy proces: Claude Code + DESIGN.md z Refero + 4 kroki = strona bez szablonu. Pokrywa to 70% potrzeb. Pozostałe 30% dotyczy sytuacji, gdy potrzebujesz większej precyzji, większej szybkości lub weryfikacji.

Po opanowaniu podstaw warto rozwijać trzy kierunki:

1. Frontend Design Skill. Oficjalna umiejętność Claude Code, która dodaje wizualną informację zwrotną. Agent robi zrzut ekranu złożonej strony za pomocą Puppeteer, ogląda go swoimi „oczami” (modelem wizyjnym), porównuje z DESIGN.md i sam proponuje poprawki. To zautomatyzowana pętla „prompt → kod → zrzut ekranu → krytyka → prompt”. Przydaje się, gdy strona jest złożona i nie da się jej dobrze wykonać w jednej iteracji.

2. Refero MCP w trybie produkcyjnym. Przy równoległym zarządzaniu 3–5 projektami ręczne dodawanie DESIGN.md do każdego z nich staje się uciążliwe. Refero MCP potrafi na podstawie opisu projektu znaleźć 3 odpowiednie style i pozwala wybrać jeden. Skraca to rozpoczęcie nowego projektu z 30 minut do 3.

3. Połączenie z inżynierią kontekstu. DESIGN.md to jeden z artefaktów kontekstu. Zwykle obok niego znajdują się ARCHITECTURE.md (struktura projektu), BRAND.md (ton komunikacji) i business/audience.md (grupa docelowa). Wszystkie są importowane w CLAUDE.md. Budując stronę, Claude uwzględnia wygląd, odbiorców i strukturę produktu. W istocie jest to inżynieria kontekstu — systematyczna praca nad tym, co przekazujesz agentowi przed wysłaniem prośby.

Praktyczne materiały: dokumentacja Ailoot.

Praktyczne materiały: dokumentacja Ailoot.

Więcej materiałów i narzędzi: Ailoot.