--- name: oczyszczalnia-ai description: Buduje strony internetowe i aplikacje web (HTML/CSS/Tailwind/React), które NIE wyglądają jak wygenerowane przez AI — świadome decyzje w 20 elementach designu plus twarda bramka (linter kodu). Use when użytkownik prosi "zbuduj stronę", "zrób landing", "stwórz stronę www", "UI aplikacji", "front bez AI-slopu", "żeby nie wyglądało jak AI", "unslop", "przerób ten UI żeby nie był generyczny" — ORAZ przy każdym budowaniu/przeglądzie frontendu web. --- # Design bez AI — strony i apki, które nie wyglądają jak wygenerowane Cel: front, który NIE wygląda jak „AI slop". Rdzeń: AI defaultuje do matematycznej średniej internetu 2015–2020 (Inter, gradient fiolet→niebieski, `rounded-xl` 16px, triada `#010102`/`#f7f8f8`/`#5e6ad2`, Lucide, glassmorphism). Wygrywasz **intencją per element** + **twardą bramką**. Wiedza z 163 źródeł (Reddit + web). ## Kiedy się włącza Za każdym razem gdy budujesz LUB przeglądasz stronę/apkę web (landing, UI, komponent) — nie tylko na wyraźne hasło. Jeśli tworzysz kod front-endu, przejdź 3 fazy poniżej. ## 20 elementów (kręgosłup) — routing do wiedzy PRYMITYWY (jak coś wygląda) → **[references/prymitywy.md](references/prymitywy.md)**: P1 kolor · P2 typografia · P3 spacing · P4 kształt/promień · P5 cień · P6 ikony · P7 obraz/tło · P8 ruch · P9 obramowania. KOMPONENTY (z czego zbudowana strona) → **[references/komponenty.md](references/komponenty.md)**: K1 nav · K2 hero · K3 przyciski · K4 karty · K5 formularze · K6 cennik/tabele · K7 opinie · K8 stopka · K9 modale · K10 zakładki/stany · K11 stany puste/ładowania/błędu. **28 odrębnych STYLÓW** (żeby strony były RÓŻNE, nie jeden look): MENU/dobór → **[references/style-library.md](references/style-library.md)**; GŁĘBOKI opis per styl (13 sekcji, oźródłowany: palety, fonty, przepisy per komponent, anti-slop) → `references/styles/NN-slug/STYLE.md`. Buildery (v0/Lovable/Bolt/Framer/Wix) i jak nadpisać → **[references/builder-defaults.md](references/builder-defaults.md)**. Co NIE jest dowodem AI (nie nadkoryguj) → **[references/falszywe-alarmy.md](references/falszywe-alarmy.md)**. --- ## FAZA 0 — Intencja + WYBÓR STYLU (zanim napiszesz kod) Nie pozwól modelowi (sobie) zgadywać: 1. **Marka / odbiorca / nastrój** — 1–2 zdania. Bez tego → slop (patrz builder-defaults „Dlaczego"). 2. **WYBÓR STYLU (obowiązkowy, PRZED kolorami/fontami).** Przeczytaj MENU (28 stylów) w **[references/style-library.md](references/style-library.md)**, użyj macierzy **FIT + TWARDE WYKLUCZENIA**: z wiersza briefu weź „Fit", **skreśl kolumnę „NIE proponuj"** (np. playful/retro/clay/zine NIE do poważnego/pro/tech). Dobierz **2-3 WYRAŹNIE różne** kandydatów i **przedstaw użytkownikowi do wyboru** (AskUserQuestion, krótkie porównania). „Zaskocz mnie" → styl NAJDAWNIEJ użyty wg `state/last-styles.json` (ale wciąż z „Fit", nigdy z wykluczeń). Po wyborze **dopisz styl do `state/last-styles.json`** i **NIE powtarzaj** stylu z poprzedniej strony. 🚫 **NIE defaultuj do warm-neutral + zielony akcent + grotesk — to slop-v2 tego skilla.** Gdy ostatnie 1-2 strony były „ciepłe/editorial", proponuj kontrast (S3 neo-brutalist / S4 mono / S6 Bauhaus / S7 maximalist / S8 retro / S11 type-driven). 3. **Tokeny Z WYBRANEGO STYLU — z GŁĘBOKIEGO opisu (13 sekcji).** Po wyborze SNN przeczytaj `references/styles/NN-slug/STYLE.md` (slug wg `state/last-styles.json` → `all_styles`, NN zero-pad 01–28). Stamtąd bierz paletę (hexy light/dark), parę fontów, promień, spacing, ruch ORAZ **przepisy per komponent** (nav/hero/przyciski/karty/formularze/cennik/tabele/opinie/stopka/stany) i sekcję anti-slop — NIE ze stałej listy. `style-library.md` = tylko MENU/dobór. Jest realny produkt/logo → dostrój akcent/kolory do niego W RAMACH stylu. 4. **Config.** Skopiuj **[assets/DESIGN.md](assets/DESIGN.md)**, wypełnij wartościami WYBRANEGO stylu + marki. To kontrakt na Fazę 1. > Jeśli budujesz w v0/Lovable/Bolt/Framer/Wix → przeczytaj builder-defaults.md (sygnatura + co dokładnie nadpisać: `tailwind.config.ts`, `globals.css`, pole „Knowledge"). ## FAZA 1 — Budowa (element po elemencie) Dla każdego elementu, którego dotykasz, zastosuj fix z references (nie domyślne narzędzia). Skrót decyzji: - **P1 kolor:** jeden akcent semantyczny; kolor z UI; ZERO fiolet→niebieski, ZERO `#010102`/`#f7f8f8`/`#5e6ad2`, ZERO gradientu na tekście. - **P2 typo:** dwa kroje, skala 1.25, negatywny tracking na H1, left-align domyślnie. **Strona po polsku → fonty display MUSZĄ mieć `latin-ext` (ą ę ł ó ś ż ź ć ń), inaczej diakrytyki lecą na fallback/tofu.** Sprawdź `bin/check-fonts-pl.py plik.html`. Znane bez PL: Permanent Marker, UnifrakturCook, Rock Salt → zamienniki z PL: Grenze Gotisch, Rubik Marker Hatch, Caveat. - **P3 spacing:** skala 4/8/16/24/32/48/64; asymetria; biała przestrzeń jako materiał. - **P4 kształt:** promień z hierarchii (np. 8px CTA / 16px karta / ostre sekcje) — NIE jeden wszędzie. - **P5 cień:** Reduction — usuń glow/glass/wielki cień bez funkcji; max jeden subtelny. - **P6 ikony:** dostrój stroke; usuń zbędne; ZERO emoji-punktorów. - **P7 obraz:** realne zrzuty/foto/SVG zamiast blobów/Memphisa/stocku. Realne foto stock → `bin/fetch-stock.py "krótka fraza EN" --out img/DIR --n N --orientation wide|tall` (Unsplash, klucz w Keychain `unsplash-access-key`; Openverse fallback; `--batch plan.json` dla wielu slotów). Fraza 2-3 słowa (długie → 0 wyników). Nie wszystkie style chcą foto (swiss/mono/brutalist/type-driven = celowo bez). - **P8 ruch:** tylko stan/uwaga/charakter; konkretny easing; ZERO uniwersalnego fade/marquee. - **P9 obramowania:** separuj odstępem nie paskiem; nie lewy border na każdym boxie. - **K1–K11:** wzorce w komponenty.md (hero lewostronny + realny zrzut; jeden styl przycisku; karty o różnej wadze; formularz semantyczny; cennik bez emoji-checków; realne opinie; empatyczny microcopy w stanach błędu). Reguła nadrzędna: buduj w JEDNYM wybranym stylu **do końca** (nie mieszaj stylów), tokeny ze `style-library.md`. To **punkt wyjścia, nie nowy uniform** — kotwicz w realnej marce. ## FAZA 2 — BRAMKA (obowiązkowo przed „gotowe") 1. Uruchom linter na wygenerowanym kodzie (skrypt `bin/audit-ai-tells.py` leży w katalogu tego skilla — w Claude Code zwykle `~/.claude/skills/oczyszczalnia-ai/bin/`): ``` python3 /bin/audit-ai-tells.py ``` - **Twarde (🔴 HARD) = 0.** Każdy napraw wg wskazówki fixa. To warunek „gotowe". - **Miękkie (🟡 SOFT)** = trend nadużywany przez AI. Dla każdego świadoma decyzja: służy pracy → zostaw i uzasadnij; służy tylko ozdobie → wytnij (falszywe-alarmy.md). Nie zamieniaj jednej monokultury na drugą. - Tryby: `--strict` (miękkie też blokują), `--soft` (tylko raport), `--json` (do potoku). Uwaga: linter czyta surowy tekst, więc trafi też hexy w komentarzach — to lint-hint, oceń kontekst. 2. **Oko (czego kod nie złapie):** obraz/typografia/hierarchia realnie ludzkie? Empatyczny microcopy w błędach/pustych stanach? A11y (kontrast, alt, focus)? Mobile breakpointy nie „mess"? 3. Dopiero po 0 twardych + świadomych miękkich → „gotowe". ## Self-audit (szybka checklista) - [ ] Faza 0: marka + WYBRANY styl z biblioteki (≠ poprzedni, ≠ warm-neutral+green) + tokeny z tego stylu + DESIGN.md - [ ] Kolor: jeden akcent, ZERO purple-blue / triady dark-SaaS / gradientu na tekście - [ ] Kształt/spacing: skala odstępów + hierarchia promieni (nie uniform 16/24) - [ ] Ikony/obraz: bez emoji-punktorów, bez blobów; realne wizualia + SVG - [ ] Ruch: celowy, nie uniwersalny fade/bounce/marquee - [ ] Bramka: `audit-ai-tells.py` = 0 twardych; miękkie rozpatrzone - [ ] Oko: hierarchia, microcopy, a11y, mobile ## Poza zakresem (świadomie) Generowanie grafik/logo (→ inne skille: generate-image, agent-fotograf). Teksty/copy marketingowe (→ pisz-jak-ja/ads-text) — tu tylko tyle, ile zdradza layout. Głębsze warstwy tylko sygnalizowane (a11y, dataviz, haptyka, lokalizacja) → dług z research X11. ## Uwaga o utrzymaniu Wartości „twarde" w linterze (hexy, klasy) są zweryfikowane zbieżnością 20+ zapytań do e-LM + raportu + nazwanych źródeł (The New Yorker/Kyle Chayka, The Algorithmic Vernacular, wątki Reddit). Gdy trend się przesunie (np. inny domyślny akcent buildera), dopisz regułę w `bin/audit-ai-tells.py` (sekcje LINE_RULES / AGG_RULES, otagowane per element).