Documentul nu îți spune cu ce să-l construiești
docs/ux-ui.md îți spune ce să construiești: zece ecrane, fluxul, stările. Nu spune cu ce. Iar întrebarea de la care pornești decide cât timp îți ia.
«Care e cea mai bună tehnologie?» — întrebare fără răspuns. Depinde de lucruri pe care le vei descoperi peste șase luni.
«Cu care ajung la o demo navigabilă în două săptămâni?» — la asta există un răspuns, și e unul singur.
E criteriul întregii părți: de la 0 la 1. Zero e nimic. Unu e ceva ce se deschide, se navighează și se arată cuiva.
Nu înseamnă să iei primul lucru care funcționează. Îți trebuie o tehnologie matură, pe care agentul știe deja s-o folosească și care merge online fără muncă în plus. Pentru că, dacă clientul spune da, acea demo devine produsul — și în acel moment a o lua de la capăt costă mai mult decât tot timpul economisit.
Instrumente care trec aceste trei filtre sunt mai multe, și aici nu deschidem comparația: alegem două, îți spun de ce, și la finalul părții știi ce urmează să instalezi.
Alegerile sunt două, nu una
Construirea unei aplicații seamănă cu mobilarea unei case, iar piesele de ales sunt două — diferite între ele, și neinterschimbabile.
- La struttura Unde stă fiecare lucru și cum treci de la un ecran la altul. Asta ți-o dă Next.js.
- I mobili Piesele care intră înăuntru, deja montate. Astea ți le dă biblioteca de componente.
Cine începe se pierde aici, și nu pentru că opțiunile sunt multe: pentru că cele două alegeri par a fi aceeași. Sunt două întrebări separate, și în următoarele două secțiuni li se răspunde pe rând.
Structura: Next.js
Pentru structură, decizia e deja luată: Next.js (care folosește React sub capotă). Răspândit și matur, deci exemple și răspunsuri peste tot. Și gândit să lucreze cu agenții: echipa care îl dezvoltă publică skill-uri deja gata pentru Claude Code.
Ce îți dă, în lucruri care se văd
Ecranele au fiecare o adresă. Fiecare ecran din document devine o pagină accesibilă: /fise, /match, /profil. Nu trebuie să decizi tu cum se organizează.
Trecerea de la un ecran la altul e deja rezolvată. Apeși un buton și ecranul se schimbă, butonul „înapoi” funcționează, link-ul poate fi trimis cuiva. Sunt primele lucruri pe care le încearcă clientul.
Merge online fără muncă în plus. Odată terminată demo-ul, proiectul se publică conectându-l la un serviciu de hosting — e munca din partea 7, și e vorba de minute pentru că e deja în forma potrivită.
Și nu e o alegere de proiect mic: pe el rulează produse pe care le folosești deja.
Mobila: shadcn/ui
Mobila e shadcn/ui: butoane, câmpuri, ferestre, meniuri, tabele, calendare. Valoarea nu e că sunt multe — e că sunt întreținute de oameni care fac asta ca meserie. Funcționează cu degetul și cu tastatura, se comportă la fel pe Chrome și pe Safari, rezistă pe ecranul mic și cu textul mărit, și continuă s-o facă în timp ce browserele se schimbă sub ele. Sunt piesele pe care tu nu le controlezi și care nu ți se rup în mână în fața clientului.
Apoi e diferența față de celelalte biblioteci: nu o instalezi, o copiezi. O comandă, și fișierul componentei apare în components/ui/ în proiectul tău. Pornești de la o piesă solidă făcută de alții, iar de acolo e a ta: o deschizi și o schimbi.
De ce contează exact acum: când peste două zile îi vei cere lui Claude Code să schimbe forma unui buton în toată aplicația, modificarea aia atinge un fișier din proiectul tău — un fișier care pornește deja corect. Cu o bibliotecă instalată, în schimb, stilul vine din afară și se luptă din excepție în excepție.
Create: combo-ul care se montează singur
Până aici sunt două alegeri separate, și de obicei acum începe munca plictisitoare: să pui framework-ul, CSS-ul și biblioteca să vorbească între ele. Sunt orele care se ard înainte să poți scrie primul ecran.
Lucrul care face această pereche greu de bătut atunci când trebuie să mergi repede e că munca aia nu o faci: shadcn nu îți dă doar componentele, îți montează proiectul. Se numește Create, e o pagină de pe site-ul lor, și de acolo iese o singură comandă care ridică Next.js și shadcn/ui deja cablate împreună.
- Un proiect Next.js complet, cu propria structură de foldere
- Tailwind instalat și configurat — instrumentul cu care scrii stilul
- Culorile temei ca variabile, într-un singur loc: le schimbi de acolo
- Primul component shadcn/ui deja în proiect, ca fișier al tău
Câteva minute, și proiectul rulează pe calculatorul tău. Asta înțeleg prin «tehnologia care te duce la 1»: nu cea mai bună în absolut, cea care te pune pe drum în timp ce alții încă aleg.
Decizia e închisă și nu se mai discută. În partea 3 se face: patru pași, o comandă de copiat, și la final Claude Code deschis în folderul proiectului.