Cum proiectezi o aplicație arătoasă cu AI

Ca să obții de la AI o aplicație bine proiectată, nu mai cere „fă-o să arate frumos”. Dă-i ce ar cere un designer: două sau trei referințe care îți plac, o direcție de design numită și reguli concrete pentru tipografie, culoare și spațiere. Apoi construiește un ecran, reglează-l până arată cum trebuie și cere AI-ului să aplice același sistem peste tot. Cea mai mare parte din „aspectul AI” vine din prompturi vagi care produc răspunsuri medii; un input specific produce un design specific.

De ce arată generic designul generat cu AI

Dacă ceri AI-ului „un dashboard SaaS modern și curat”, îți va da media statistică a tuturor dashboard-urilor pe care le-a văzut: același font sans-serif, un gradient mov-albastru, carduri rotunjite cu umbre moi, iconițe în cercuri și un hero centrat cu textul „Fluxul tău de lucru, simplificat”. Niciuna dintre alegeri nu e greșită în sine. Problema este că niciuna nu a fost aleasă pentru produsul tău.

Designul bun înseamnă în mare parte decizii. Rolul tău este să iei câteva decizii care dau aplicației un caracter și să lași AI-ul să facă miile de decizii mici, consecvent.

Pasul 1: Strânge referințe înainte să scrii promptul

Petrece douăzeci de minute strângând două până la patru referințe: aplicații sau site-uri al căror aspect se potrivește produsului tău. Surse bune sunt produsele pe care le folosește deja publicul tău, galeriile de design și site-urile companiilor din domenii apropiate.

Pentru fiecare, notează ce îți place, în cuvinte simple:

„Mult spațiu alb, conținut într-o coloană îngustă, etichete mici gri deasupra unor cifre mari.”
„Tabele dense cu separatoare subțiri, fără umbre la carduri, o singură culoare de accent pentru acțiuni.”
„Titluri serif mari, fundal crem, fotografii în loc de ilustrații.”

Apoi trimite aceste descrieri AI-ului și atașează capturi de ecran dacă unealta acceptă imagini. Inspiră-te din calități, nu din produs: copierea integrală a layout-ului, a brandingului sau a textelor unei alte companii este și un risc juridic, și un risc de credibilitate.

Pasul 2: Alege o direcție de design și numește-o

O direcție este o descriere scurtă a stilului. Ea îi oferă AI-ului un filtru pentru fiecare decizie. Câteva care funcționează bine:

Direcție	Alegeri tipice	Potrivită pentru
Calmă și minimalistă	Paletă neutră, spațiere generoasă, un singur accent, borduri subțiri	Instrumente de productivitate, finanțe, sănătate
Editorială	Titluri serif, contrast puternic de tipografie, imagini mari, coloane înguste de text	Portofolii, publicații, servicii premium
Densă și funcțională	Rânduri compacte, text mic, tabele, navigare de la tastatură	Unelte interne, dashboard-uri, panouri de administrare
Caldă și prietenoasă	Forme rotunjite, culori moi, ilustrații, ținte de atingere mai mari	Aplicații pentru consumatori, comunități, educație
Îndrăzneață și grafică	Contrast ridicat, text mare, blocuri de culoare plate	Evenimente, lansări, branduri creative

Pune-o în primul prompt, împreună cu cine folosește aplicația:

Construiește o aplicație de rezervări pentru un studio independent de yoga. Direcție de design: calmă și minimalistă, ca un orar tipărit al studioului. Fundal crem, text aproape negru, un verde-salvie discret pentru butoane și stările selectate. Un serif pentru titluri, un sans-serif curat pentru text. Spațiere generoasă, fără gradienți, fără umbre, fără emoji. Mobile-first.

Pasul 3: Stabilește regulile — tipografie, culoare și spațiere

Aceste trei elemente duc cea mai mare parte din calitatea vizuală. Să le spui explicit este cea mai mare îmbunătățire pe care o poți face.

Tipografie

Una sau două familii de fonturi. Un font pentru titluri și unul pentru text, sau o singură familie în mai multe greutăți.
O scară tipografică. Câteva dimensiuni folosite consecvent, de exemplu 14, 16, 20, 28 și 40 px, în loc să le aleagă fiecare componentă după cum vrea.
Text de citit. În jur de 16 px pe web, o înălțime de rând de aproximativ 1,5 și o lungime de linie de 60–75 de caractere pentru text lung.
Ierarhie prin greutate și dimensiune, nu prin culoare. Titlurile mai groase și mai mari; textul secundar mai mic și gri mai discret.

Culoare

În mare parte neutre. Fundalurile, suprafețele, bordurile și nuanțele de gri pentru text fac cea mai mare parte a muncii.
O culoare de accent pentru acțiuni și stările selectate. A doua doar dacă are un rol clar.
Culori semantice pentru succes, avertisment și eroare, folosite doar pentru acestea.
Contrast. WCAG 2 cere un raport de contrast de cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare. Textul gri deschis pe alb nu trece adesea; cere AI-ului să verifice.
Modul întunecat, dacă îl vrei, proiectat deliberat, nu inversat automat.

Spațiere și layout

O scară de spațiere, de exemplu 4, 8, 12, 16, 24, 32, 48, 64 px. Totul se aliniază pe ea.
Aliniere. Marginile se potrivesc; conținutul stă pe o grilă sau într-o coloană cu lățime maximă constantă.
Proximitate. Lucrurile înrudite stau aproape, cele neînrudite mai departe. Doar această regulă rezolvă majoritatea ecranelor aglomerate.
Mai puține containere. Nu orice are nevoie de un card. Bordurile, separatoarele și spațiul alb grupează conținutul mai discret.

Un prompt care configurează sistemul o singură dată:

Înainte să construiești mai multe ecrane, configurează un mic sistem de design și folosește-l peste tot: o scară tipografică de 14/16/20/28/40 px, înălțime de rând 1,5 pentru text, o scară de spațiere de 4/8/12/16/24/32/48 px, nuanțe neutre de la aproape alb la aproape negru, o singură culoare de accent (#3F6B5A) doar pentru acțiunile principale și roșu doar pentru erori. Butoanele, câmpurile și cardurile trebuie să aibă aceeași rază a colțurilor. Verifică ca tot textul să respecte contrastul WCAG AA.

Dacă lucrezi cu un constructor care înțelege codul, acestea devin de obicei token-uri de design, variabile CSS sau o temă Tailwind, ceea ce înseamnă că schimbările ulterioare se fac într-un singur loc.

Pasul 4: Construiește mai întâi un ecran bine făcut

Nu genera doisprezece ecrane și apoi încerca să le repari pe toate. Alege ecranul pe care utilizatorii îl văd cel mai des, de obicei dashboard-ul sau lista principală, și iterează până e corect. Apoi:

Folosește dashboard-ul ca referință pentru toate celelalte pagini: același antet, aceeași spațiere, aceleași dimensiuni de text, aceleași stiluri de butoane și de tabel. Actualizează paginile Setări și Rezervări ca să se potrivească.

Un ecran de referință finalizat comunică gustul tău mult mai bine decât orice adjectiv.

Pasul 5: Iterează cu cereri specifice și mici

Feedback-ul pentru AI funcționează ca feedback-ul pentru un designer junior: concret, pe o zonă o dată și clar în privința a ceea ce rămâne.

Vag	Specific
„Fă-o mai frumoasă.”	„Mărește spațiul dintre secțiuni la 64 px, fă titlul paginii de 40 px și înmoaie textul secundar spre un gri mediu.”
„Pare aglomerat.”	„Scoate bordurile cardurilor din rândul de statistici, aliniază cifrele la stânga și pune etichetele deasupra, în majuscule mici.”
„Fă-o să iasă în evidență.”	„Folosește culoarea de accent doar pentru butonul principal. Butoanele secundare să fie cu contur.”
„Îmbunătățește varianta de mobil.”	„Pe lățimi de telefon, filtrele să stea într-un panou care se deschide dintr-un buton Filtre, iar rândurile de tabel să devină carduri.”

Spune întotdeauna și ce să păstreze, de exemplu „păstrează toate rutele, textele și funcțiile la fel”, ca o trecere vizuală să nu elimine discret funcționalități. Verifică fiecare schimbare pe un ecran de telefon înainte să ceri următoarea; vezi cum construiești o aplicație web prietenoasă cu mobilul pentru cum arată un design bun pe ecrane mici.

Pasul 6: Detaliile care despart un design bun de unul generic

Odată ce structura e corectă, aceste lucruri mici fac o aplicație să pară finisată:

Stările goale. Ce vede un utilizator nou fără date: o explicație scurtă și o acțiune clară, nu un tabel gol.
Stările de încărcare. Schelete cu forma conținutului, nu spinnere peste tot.
Stările de eroare. Mesaje în limbaj simplu, lângă câmpul care le-a provocat.
Stări la hover, focus și apăsare pentru fiecare element interactiv. Inelele de focus contează pentru utilizatorii de tastatură.
Conținut real. Înlocuiește „Lorem ipsum” și „Ion Popescu” cu text și date realiste; conținutul de umplutură ascunde problemele de layout.
Iconițe dintr-un singur set, la una sau două dimensiuni, cu grosime de contur constantă.
Imagini cu un scop. Fotografiile reale ale produsului, locului sau oamenilor bat stock-ul generic. Dacă folosești imagini stock sau generate, păstrează un stil constant.
Text de copy. Etichete scurte și concrete („Rezervă clasa”, nu „Trimite”) contribuie la impresia de calitate la fel de mult ca orice nuanță de culoare.

Greșeli frecvente

Reproiectarea totală dintr-un singur prompt. Rescrierile mari introduc regresii. Mergi pagină cu pagină.
Prea multe culori de accent. Dacă totul e evidențiat, nimic nu mai iese în evidență.
Centrarea a tot. Textul centrat e greu de parcurs dincolo de un titlu; aliniază la stânga cea mai mare parte a conținutului.
Text mic, cu contrast slab, care arată elegant pe un monitor mare și e ilizibil pe un telefon în lumina soarelui.
Decor în loc de ierarhie. Gradienții și umbrele nu pot repara un ecran în care acțiunea cea mai importantă nu e evidentă.
Ignorarea paginii de start. Pentru multe produse, ea este prima impresie; vezi cum construiești o pagină de start care convertește.

Pentru mai multe modele de prompt, dincolo de design, citește cum scrii prompturi pentru constructoarele de aplicații cu AI. Dacă produsul tău este chiar lucrarea ta, de exemplu un portofoliu de design sau de fotografie, cum construiești un site de portofoliu merge mai departe în partea de prezentare.

Cum lucrezi cu design în Mythex

În Mythex descrii designul în chat, îl vezi în previzualizarea live și verifici cadrul de telefon înainte de următoarea schimbare. Documentația are scurte modele pentru asta: prompturi pentru design și UI, despre cum spui ce să schimbi și ce să păstrezi, și redesenarea interfeței, pentru a reîmprospăta câte o pagină fără să pierzi funcții. Mythex poate, de asemenea, să caute fotografii stock sau să genereze o imagine în chat, de exemplu o imagine principală, un fundal sau o imagine de partajare, și să o plaseze în aplicație când îi ceri. Dacă o trecere iese prost, revino la punctul de control de dinainte. Răsfoiește șabloanele dacă preferi să pornești de la un design existent și să-l ajustezi.

Întrebări

De ce arată toate aplicațiile proiectate cu AI la fel?

Pentru că un prompt vag primește cel mai mediu răspuns posibil: aceleași fonturi, gradienți, carduri rotunjite și un hero centrat. Dă AI-ului referințe, o direcție de design numită și reguli concrete pentru tipografie, culoare și spațiere, iar rezultatul nu mai arată generic.

Pot să dau AI-ului o captură de ecran ca să copieze un stil?

Multe constructoare de aplicații acceptă imagini atașate, iar o captură de ecran este una dintre cele mai clare modalități de a arăta un stil. Descrie ce îți place la ea: spațierea, tipografia, modul în care sunt folosite culorile. Nu cere o copie a produsului altcuiva.

Am nevoie de un designer dacă construiesc cu AI?

Nu pentru o primă versiune. Un designer aduce cel mai mult când ai o marcă de protejat sau un produs complex, unde deciziile de layout influențează cât de ușor poate fi folosită aplicația. Până atunci, referințele clare și iterațiile mici îți oferă o interfață curată și utilizabilă.

Ce face o aplicație să pară profesionistă?

Consecvența mai mult decât decorul: o scară tipografică unică, o paletă mică de culori folosită cu rost, spațiere pe o scară fixă, margini aliniate și o ierarhie clară, astfel încât lucrul cel mai important de pe fiecare ecran să fie evident.