Fă AI-ul să Proiecteze cu GustFă AI-ul să Proiecteze cu GustFă AI-ul să Proiecteze cu Gust

Cere unui AI să construiască o landing page și poți ghici ce se întoarce: un titlu centrat, un subtitlu, trei carduri identice cu iconițe rotunjite și un buton cu gradient. Este competent și complet uitabil. Lumea dă vina pe model că nu are gust. Este diagnosticul greșit. Modelul a văzut fiecare interfață frumoasă lansată vreodată; ce îi lipsește este un sistem în care să construiască. Lăsat cu div-uri brute și fără constrângeri, regresează spre media datelor sale de antrenament, iar media internetului este un șablon.

Remediul nu este un prompt mai bun. Sunt unelte mai bune. Dă agentului o bază reală de componente, un vocabular de mișcare și un mod de a vedea ce face, iar output-ul își schimbă caracterul complet. Cinci proiecte open source acoperă întregul lanț: baza, efectele gata de folosit, o bibliotecă de mișcare, un editor vizual și prompt-to-app. Iată fiecare și unde se potrivește.

De ce UI-ul generat de AI arată generic

Un model care generează UI din nimic trebuie să inventeze fiecare decizie deodată: spațiere, scară tipografică, culoare, elevație, mișcare. Fără un sistem la care să se raporteze, fiecare decizie cade pe opțiunea cea mai sigură și mai comună, iar sigur-ori-cinci este șablonul pe care l-ai văzut de o mie de ori. Designerul uman experimentat nu ia mai multe decizii decât modelul; ia mai puține, pentru că un design system le-a luat deja pe majoritatea. Aceasta este piesa lipsă. Dă agentului sistemul și elimini deciziile care produc neglijență.

1. Baza de componente: shadcn/ui

shadcn/ui (github.com/shadcn-ui/ui) a schimbat cum funcționează totul refuzând să fie o bibliotecă. Nu îl instalezi ca să imporți componente cutie-neagră. Rulezi un CLI și codul sursă al fiecărei componente aterizează în repository-ul tău, construit pe primitive Radix pentru accesibilitate și stilizat cu Tailwind. Este al tău. Exact această proprietate este ce îi trebuie unui agent AI: poate citi butonul, îl poate modifica și extinde, pentru că butonul este un fișier în proiect, nu o dependență pe care trebuie să o reconstituie.

# shadcn/ui is not a dependency you install and import. You run a CLI and
# the component SOURCE lands in your repo, yours to read and edit.
npx shadcn@latest init
npx shadcn@latest add button card dialog input

# components/ui/button.tsx now lives in YOUR project.
# The agent edits this file directly. Nothing is hidden in node_modules,
# nothing is a black box it has to fight.

2. Efecte animate gata de folosit: Magic UI

Magic UI (github.com/magicuidesign/magicui) este companionul pe care majoritatea îl asociază cu shadcn/ui. Sunt peste 150 de componente animate (butoane shimmer, marquee-uri, fascicule animate, contoare numerice, grile bento) construite cu React, TypeScript, Tailwind și Motion. Se instalează la fel: sursa în repo-ul tău. Pentru un agent, asta transformă mișcarea din ceva ce trebuie să scrie keyframe cu keyframe în ceva ce selectează. Animația este deja corectă; agentul doar o așază.

// Magic UI and React Bits install the same way: source into your repo.
npx shadcn@latest add "https://magicui.design/r/shimmer-button"

// Then it is just a component. Compose, do not hand-roll the animation:
import { ShimmerButton } from "@/components/ui/shimmer-button";

export function CTA() {
  return (
    <ShimmerButton className="px-6 py-3 text-base font-medium">
      Start a project
    </ShimmerButton>
  );
}

3. Biblioteca de mișcare: React Bits

React Bits (github.com/DavidHDev/react-bits) este cea mai amplă dintre cele trei: o colecție vastă de text animat, fundaluri animate și componente interactive, fiecare un snippet de sine stătător pe care îl copiezi înăuntru. Acolo unde shadcn/ui este baza structurală și Magic UI este setul rafinat de efecte, React Bits este banca adâncă pe care o jefuiești când o secțiune are nevoie de o mișcare anume: dezvăluiri de text fragmentat, mesh-uri de gradient, butoane magnetice, contoare conduse de scroll. Amploarea este ideea; agentul are opțiuni în loc să inventeze una.

4. Editorul vizual AI: Onlook

Onlook (github.com/onlook-dev/onlook) închide bucla pe care celelalte patru nu o pot închide: vederea. Este un editor vizual open source pentru React, deseori descris ca un instrument de design pentru cod. Îți vezi aplicația care rulează, selectezi un element, îl tragi, îl restilizezi, iar Onlook scrie modificarea înapoi în sursa ta. Pentru munca cu AI asta contează pentru că agentul este altfel orb; modifică codul și speră. Onlook îi dă unui om un strat de manipulare directă peste același cod pe care îl scrie agentul, așa că intenția de design și sursa rămân într-un singur loc în loc să se îndepărteze.

5. De la prompt la aplicație: bolt.new

bolt.new (github.com/stackblitz/bolt.new) este ușa din față: descrii o aplicație în limbaj simplu și construiește și rulează un proiect full-stack în browser, alimentat de WebContainers de la StackBlitz, deci fără niciun setup local. Este cea mai rapidă cale de la idee la un lucru funcțional pe care poți da click. Capcana este cea despre care vorbește tot acest articol: prompt-to-app fără un design system dedesubt doar generează genericul mai repede. Folosirea corectă este să faci scaffold cu bolt.new, apoi să aduci rezultatul pe o bază reală.

Gustul este în sistem

Puse împreună, aceste cinci încetează să fie o listă de unelte și devin un pipeline pentru gust. Trucul este să faci agentul conștient de ele. Fac asta în același mod în care fixez stack-ul pentru orice proiect: îl scriu în AGENTS.md, fișierul pe care agentul îl citește înainte să atingă o linie de cod. A numi design system-ul ca regulă fermă este ceea ce ține agentul să compună în loc să regreseze.

## Design system (do NOT hand-roll UI)

- Primitives: shadcn/ui in components/ui/. Compose these. Never raw div soup.
- Motion and effects: Magic UI and React Bits. Reach for an existing
  animated component before writing a new keyframe.
- Tokens: color, spacing, radius and shadow come from tailwind.config only.
  No magic numbers, no one-off hex values.
- Type scale is 1.25. Max one accent color per view.
- Never ship the default browser focus ring; style focus-visible explicitly.
- When unsure how something should look, generate a reference image first,
  then build to it. Do not improvise layout.

1. 01Fă scaffold rapid cu bolt.new când ai nevoie de o formă funcțională la care să reacționezi.
2. 02Așază baza pe shadcn/ui, deținută ca sursă în components/ui/.
3. 03Ia mișcarea din Magic UI și React Bits în loc să scrii keyframe-uri.
4. 04Dirijează-o din ochi în Onlook, așa că modificările de design aterizează înapoi în același cod.
5. 05Codifică totul în AGENTS.md, așa că fiecare sesiune începe în interiorul sistemului.

Modelului nu i-a lipsit niciodată gustul. I-a lipsit un sistem în care să aibă gust. Dă-i unul și neglijența dispare.

UI-ul generic de AI este o problemă de unelte deghizată în problemă de talent. Dă agentului o bază pe care o deține, un vocabular de mișcare din care să aleagă și un mod de a vedea ce construiește, iar reflexul hero-centrat-trei-carduri dispare de la sine. Aceasta este diferența dintre o interfață care arată făcută de AI și una care arată făcută. Dacă vrei acea diferență construită în produsul tău, este ceea ce fac.