De ce site-urile făcute cu AI seamănă toate între ele
Dacă nu alegi tu gustul, îl alege Claude Code — și alege exact ce a ales deja pentru toți ceilalți:
-
Inter, și un degrade albastru-violet. Colțuri rotunjite la 12px peste tot.
-
Umbre moi sub fiecare card, carduri în interiorul altor carduri.
-
Spații identice peste tot, titluri generice, iconițe Lucide standard.
Este aspectul pe care îl recunoști de la distanță ca «făcut cu AI», și nu cad în capcană doar cei fără gust: cât timp motivele tale rămân în capul tău, agentul nu le poate citi și pune el pe ale sale. Gustul trebuie scris — asta e ideea lui Emil Kowalski, design engineer la Linear: nu e magie, sunt motive care se pot pune în scris.
Punctul 7 din docs/ux-ui.md amânase asta intenționat — «stilul vizual NU este ales în acest document», iar în locul lui, patru teste. Se închide acum.
Opt direcții cu un nume
Nu se inventează: se ia o direcție care există deja și are un nume. Acestea sunt cele opt la care revenim cel mai des în practică.
Deschide o fișă ca să-i vezi detaliile.
Fiecare carte ține împreună cinci lucruri — culoare, font, colțuri, umbre, mișcare: o direcție nu e o culoare. Și fiecare are propriul mod de a se strica, pe ultimul rând: neo-brutalism-ul devine zgomot, luxury-ul se golește pe telefon, claymorphism-ul alunecă spre infantil.
Alegerea pentru PawSoul
Direcția nu se alege după gust: se alege din ce a spus deja clientul. Brief-ul din partea 1 are un grup întreg pe tema asta — stil vizual, paletă, referințe, emoții de transmis, elemente de evitat — și pentru PawSoul spune: vesel dar nu infantil, Duolingo ca ton, Tinder doar ca funcționare; de evitat aplicațiile bancare, griurile, textele mici.
Apoi cele patru teste de la punctul 7 taie din listă. Servesc să excludă, nu să confirme: claymorphism-ul cade la al doilea (pasteluri plus cățeluși = aplicație pentru copii), swiss-ul cade tot la al doilea, din partea opusă (adult, niciodată vesel), luxury-ul cade la al treilea (trăiește din fotografii procesate, iar aici sunt câini fotografați cu telefonul), modern dark cade la primul (e hainele a jumătate din internet). Rămâne una.
Neo-brutalism
Crem în loc de alb, negru plin pentru text și borduri, roșu și galben ca și culori de acțiune, umbre dure fără estompare, colțuri vii, tipografie grea. Nu e Tinder dintr-o privire, e vesel fără să fie infantil, încadrează fotografiile în loc să le proceseze, iar la 390px rămâne el însuși — bordura, umbra și culoarea plină ocupă același spațiu pe fiecare ecran.
De la direcție la instrucțiuni: docs/ui.md
Numele direcției singur nu-i ajunge agentului. Devine un fișier, ca documentul din partea 1: docs/ui.md, făcut din valori verificabile în loc de adjective. «Modern și curat» agentul îl traduce în propriul lui implicit; «fundal #FFFDF5, bordură neagră 4px, umbră 8px fără estompare» se verifică uitându-te la ecran.
# Direcția estetică — PawSoul
Direcția aleasă: neo-brutalism.
Zgomotul stă la suprafață, niciodată în structură: grilă regulată, spații
constante, un singur buton principal pe ecran.
## Culoare
- Fundal: #FFFDF5 (crem, niciodată alb pur).
- Cerneală: #000000 pentru text, borduri și umbre. Fără gri: niciodată #333, niciodată #666.
- Acțiune: #FF6B6B. Secundar: #FFD93D. Al treilea: #C4B5FD pentru secțiunile alternante.
- Fiecare text trece testul de contrast AA pe propriul fundal.
## Tipografie
- Un singur font: Space Grotesk. Grosimi 700 și 900; nimic sub 500.
- Titluri cu majuscule, corp cu minuscule, corp la 18px și niciodată sub 16px.
## Formă
- Rază 0 peste tot. Singura excepție: pilulă plină pentru filtre și etichete.
- Bordură neagră de 4px pe fiecare element: carduri, butoane, câmpuri, bară.
- Fără degrade-uri, fără transparențe, fără sticlă mată.
## Profunzime
- Umbră dură, neagră, fără estompare: 4px pe butoane, 8px pe carduri, mereu
jos-dreapta. La apăsare elementul coboară cu 4px și umbra dispare.
## Mișcare
- Tranziții de la 100 la 200ms, ease-out. Fără fade-uri lungi.
- Glisarea cardului urmărește degetul 1:1.
## Fotografiile animalelor
- Nu se ating: niciun filtru, nicio voalare deasupra, nicio decupare rotundă.
- Cadru cu bordură neagră și umbră dură, cel puțin jumătate din card.
## Interzis
- Gri, degrade-uri, estompări, umbre moi.
- Colțuri rotunjite intermediare (8-16px): ori vii, ori pilulă plină.
- Texte sub 16px și rânduri mai late de 70 de caractere.
- Emoji în locul iconițelor.Ultima secțiune, «interzis», e cea mai scurtă și cea mai utilă: sunt semnele aspectului AI de la început — griuri, umbre moi, colțuri la 12px — scrise ca interdicții. Fără secțiunea aceea revin câte un ecran o dată, și nimeni nu observă până nu sunt toate zece.
Acum cele trei fișiere spun totul: ce se construiește (docs/ux-ui.md, partea 1), cu ce (Next.js și shadcn/ui, părțile 2 și 3) și ce aspect are (docs/ui.md, aceasta). În partea 5 se pun într-un singur prompt și se generează cele zece ecrane.