# Strona bez szablonu z Claude Code i Refero DESIGN.md > Kontekst projektowy Refero Styles: struktura DESIGN.md, wybór systemu wizualnego, import do CLAUDE.md, cztery kroki tworzenia strony oraz częste błędy. Source: https://ailoot.ai/blog/pl/claude-code-refero-design-md/ Canonical: https://ailoot.ai/blog/pl/claude-code-refero-design-md/ Language: pl Publisher: Ailoot (https://ailoot.ai/) Translation: guide-205 Revision: sha256-55f34419e0fc123e3a2b01204bcc8bede64728ca6f5eb93fef95b53421e5376f
Najważniejsze informacje Strony internetowe tworzone przez Claude Code „od ręki” wyglądają tak samo: ciemne tło, fioletowy gradient, bezszeryfowa czcionka i domyślne karty shadcn. Pokażemy, jak pobrać gotowy plik DESIGN.md od Apple, Linear, Stripe lub ElevenLabs (w bibliotece jest ponad 2 000 systemów), dodać go do projektu i sprawić, by Claude pisał w tym stylu. Gotowa strona przestaje wyglądać jak szablon AI.
Praktyczne materiały o pracy z projektami i modelami: [dokumentacja Ailoot](https://ailoot.ai/docs/). ## Dlaczego strony tworzone przez Claude Code wyglądają jak szablony Tailwind?
Najważniejsze informacje Bez systemu projektowego Claude Code rysuje przeciętny interfejs na podstawie danych treningowych. A te dane to cały internet pełen Tailwind, shadcn/ui i tysięcy identycznych stron docelowych. Bez wyraźnych informacji o kolorach, czcionkach i odstępach agent tworzy „średnią arytmetyczną wszystkich szablonów”.
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?
Najważniejsze informacje Refero Styles to biblioteka ponad 2 000 systemów projektowych wyodrębnionych z prawdziwych stron internetowych i zapisanych w plikach `DESIGN.md`. Każdy system reprezentuje markę: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor i inne. Wchodzisz na styles.refero.design, wybierasz markę, kopiujesz jej plik Markdown i dodajesz go do projektu jako kontekst dla Claude Code, Cursor, Codex, v0 lub Lovable.
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?
Najważniejsze informacje Jeden plik zawiera wszystkie podstawowe warstwy systemu projektowego: paletę kolorów w formacie szesnastkowym (tryb ciemny i jasny), typografię (czcionkę, skalę rozmiarów, grubości, wysokość wiersza), reguły odstępów (siatkę 8px lub inny rytm), opisy komponentów (przyciski, karty, formularze), reguły animacji (ruch, easing) oraz „głos marki” (ton komunikatów). Plik ma od 100 do 400 wierszy Markdown.
Zespół Refero opisuje strukturę pliku na stronie design-md-template:

Zacznij od tonu produktu i zasad projektowania, a następnie określ kolory, typografię, odstępy, komponenty, układ, ruch, dostępność oraz reguły dotyczące tego, czego nie używać.

— Zespół Refero Styles, https://styles.refero.design/design-md/design-md-template
Struktura pliku zwykle wygląda więc tak: | Sekcja | Zawartość | Dlaczego agent jej potrzebuje | |----|----|----| | **Ton produktu** | 2–3 zdania o brzmieniu interfejsu | wyznacza kierunek dla mikrotreści | | **Zasady projektowania** | 4–6 reguł, na przykład „minimalizm bez poświęcania czytelności” | pomaga agentowi wybierać między równie dobrymi opcjami | | **Kolory** | paleta szesnastkowa z nazwami (primary, secondary, accent, surface, text) + tryb ciemny/jasny | agent używa dokładnych kodów zamiast je wymyślać | | **Typografia** | czcionka (nazwa i stos zapasowy), skala rozmiarów (10–12 stopni), grubości (regular, medium, bold), wysokość wiersza | zapobiega zmianie całej strony w jeden Inter 16px | | **Odstępy** | jednostka bazowa (4px, 8px, 16px) i skala jej wielokrotności | paddingi i marginesy przestają „wędrować” | | **Komponenty** | reguły dotyczące przycisków, kart, formularzy i nawigacji — rozmiary, stany, warianty | agent nie wymyśla nowych wariantów | | **Układ** | siatka, breakpointy, maksymalne szerokości kontenerów | wszystkie strony witryny korzystają z jednej siatki | | **Ruch** | czas trwania, easing, dozwolone przejścia | animacje pozostają powściągliwe, a nie w stylu Bootstrap-2010 | | **Głos i ton** | przykładowe teksty przycisków, nagłówków i błędów | teksty na stronie brzmią jak marka | | **Nie używać** | lista zakazów (np. „nie używaj `box-shadow: 0 10px 30px`”) | agent nie wraca do rozwiązań szablonowych | Twórcy podkreślają też zasadę, która rozwiązuje 80% problemów z projektowaniem za pomocą AI:

Konkretny kontekst działa lepiej niż przymiotniki opisujące gust.

— Zespół Refero Styles, https://styles.refero.design/ai-agents/design-md-examples
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
Najważniejsze informacje Proces jest krótki: zainstaluj Claude Code, otwórz styles.refero.design, wybierz markę (na przykład Linear), skopiuj DESIGN.md do `docs/DESIGN.md` lub `.claude/DESIGN.md`, dodaj wiersz dotyczący tego pliku do `CLAUDE.md` i poproś Claude o zbudowanie strony. W praktyce przejście od pustego projektu do działającej strony głównej zajmuje 30 minut.
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 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](https://ailoot.ai/blog/pl/agents-md-claude-md-one-instruction-file/). 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:

Wybierz zadanie, otwórz odpowiedni zasób i daj agentowi kontekst: umieść DESIGN.md w kontekście agenta, wyjaśnij, czym jest produkt, i poproś o konkretny ekran.

— Zespół Refero Styles, https://styles.refero.design/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?
Najważniejsze informacje Wybieraj według gęstości informacji i tonu, a nie marki. Zespołowe narzędzie SaaS (gęsty interfejs, dużo danych) — Linear lub Vercel. Produkt finansowy (zaufanie, precyzja) — Stripe, Mercury, Column. Produkt konsumencki (ciepło, emocje) — Duolingo, Notion dla zespołów, Airbnb. Narzędzie AI/deweloperskie (minimalizm, ciemny motyw) — ElevenLabs, xAI, Modal. Produkt dla członków (dostępność, czytelność) — Duolingo. W razie wątpliwości wybierz Linear jako bezpieczną opcję do wielu zastosowań.
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: | Rodzaj produktu | Odpowiednie style Refero | Co je łączy | |----|----|----| | Zespołowy pulpit SaaS | Linear, Vercel, Notion, PostHog; tokeny Apple z dostosowanym zwartym układem | czytelny gęsty interfejs, jasna hierarchia, zwięzła typografia | | Produkt finansowy | Stripe, Mercury, Column | budząca zaufanie paleta, czytelna typografia, czcionka o stałej szerokości dla liczb | | Narzędzie AI/deweloperskie | ElevenLabs, xAI, Modal, Anthropic | ciemny motyw, stonowane akcenty, monochromatyczność z jednym jaskrawym kolorem | | Produkt konsumencki | Duolingo, Airbnb, Notion | ciepła paleta, wyraziste ilustracje, przyjazny ton | | Strona marketingowa | Linear, Vercel, Stripe (strony główne) | duże nagłówki, wyraźna hierarchia, spokojne tło | | Minimalistyczne portfolio | Apple, Mercury, Modal | maksymalna ilość pustej przestrzeni, bezszeryfowe czcionki, stonowane akcenty | 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?
Najważniejsze informacje DESIGN.md nie jest jednorazowym artefaktem. To część trwałego kontekstu projektu, tak jak `CLAUDE.md` i folder `business/`. Gdy plik znajduje się w repozytorium, każda sesja Claude’a, każdy członek zespołu i każdy nowy agent AI (Codex, Cursor, Gemini CLI) ma dostęp do tego samego kanonu wizualnego. Wiedza jest porządkowana raz, a potem wykorzystywana bez końca.
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?
Najważniejsze informacje Refero MCP to serwer pod adresem api.refero.design/mcp, który zapewnia Claude Code bezpośredni dostęp z czatu do ponad 150 000 ekranów z prawdziwych aplikacji i ponad 6 000 przepływów użytkowników. Refero_skill to oficjalna umiejętność dla Claude Code (`npx skills add`), która opakowuje MCP i wymaga „researchu projektowego” jako pierwszego kroku przed pisaniem kodu.
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: ```bash 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?
Najważniejsze informacje Po pierwsze, używanie promptu „niech wygląda nowocześnie” bez dołączonego DESIGN.md (agent wraca do średniej z danych treningowych). Po drugie, wklejanie DESIGN.md do czatu jako wiadomości zamiast umieszczenia go w repozytorium (kontekst nie przetrwa między sesjami). Po trzecie, wybieranie według marki zamiast konkretnego ekranu i gęstości, np. kopiowanie przestronnego marketingu do pulpitu księgowego. Po czwarte, brak wyraźnej wzmianki o DESIGN.md w prompcie (agent ignoruje plik, nawet jeśli ma go w kontekście).
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](https://ailoot.ai/blog/pl/claude-memory-claude-md-auto-memory/). **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?
Najważniejsze informacje DESIGN.md to pierwszy element kanonu wizualnego, ale nie jedyny. Są trzy kierunki dalszego rozwoju: Frontend Design Skill w Claude Code, zapewniający informację zwrotną na podstawie zrzutów ekranu; Refero MCP do regularnej pracy z różnymi stylami; oraz połączenie DESIGN.md z inżynierią kontekstu — agent najpierw czyta kanon wizualny, potem buduje stronę, a następnie sam sprawdza wynik na zrzucie ekranu.
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](https://ailoot.ai/blog/pl/context-engineering/) — systematyczna praca nad tym, co przekazujesz agentowi przed wysłaniem prośby. Praktyczne materiały: [dokumentacja Ailoot](https://ailoot.ai/docs/).
### Źródła - [Refero Styles - strona główna](https://styles.refero.design/) - [Refero Styles - przykłady DESIGN.md](https://styles.refero.design/ai-agents/design-md-examples) - [Refero Styles - design-resources](https://styles.refero.design/ai-agents/design-resources) - [Refero Skill w serwisie GitHub](https://github.com/referodesign/refero_skill) - [Claude Code Docs - oficjalna dokumentacja](https://code.claude.com/docs/en/overview) - [Claude Code Quickstart - oficjalne instrukcje instalacji](https://code.claude.com/docs/en/quickstart)
Praktyczne materiały: [dokumentacja Ailoot](https://ailoot.ai/docs/). Więcej materiałów i narzędzi: [Ailoot](https://ailoot.ai/). ## Pytania i odpowiedzi ### Czy referencja Apple pasuje do gęstego dashboardu SaaS? Tak, po dostosowaniu do zadania. Użyj odpowiedniej palety, typografii, hierarchii i powściągliwego ruchu, ale jawnie ustaw zwarte wiersze, odstępy i gęstość zamiast kopiować przestronny marketing. ### Dlaczego zapisany DESIGN.md nadal nie wpływa na nową stronę? Sprawdź obecność w repozytorium, import z CLAUDE.md i jawne wskazanie w zadaniu projektowym. Poproś o faktyczne kolory, fonty i odstępy, potem porównaj wyrenderowaną stronę z referencją. ## Ailoot · Firma i jej portfel projektów Ailoot opiera się na zgromadzonym doświadczeniu operacyjnym, szerokiej bazie klientów, stabilnej usłudze i stałej kontroli KPI. Firma i jej portfel projektów: miliony klientów; miesięczna sprzedaż liczona w miliardach. Ailoot wykorzystuje to doświadczenie operacyjne, zapewniając dostęp przez API do funkcji AI w produktach klientów, agentach, aplikacjach i automatyzacjach.