Sari la conținutul principal

De la brief confuz la UX/UI Partea 3 din 7

Fundațiile proiectului, în patru pași

~5 min de citit Actualizat 3 aug. 2026

Patru pași, câteva minute

Decizia e luată în partea 2: Next.js și shadcn/ui, montate împreună de modul Create. Aici se execută, iar la final ai un proiect care rulează pe calculatorul tău — creat și pornit de Claude Code, fără să deschizi vreodată terminalul.

Fă-o în timp ce citești: sunt patru pași și în niciunul nu trebuie să scrii cod. Comanda n-o scrii tu — ți-o compune pagina Create cu alegerile tale înăuntru — și nici n-o lansezi tu: o execută Claude Code. Terminalul rămâne închis.

1. Deschide pagina Create

ui.shadcn.com/create — e opțiunea Create din bara de sus a site-ului. Ce se deschide nu e un formular de completat: e o previzualizare vie cu controalele în stânga — temă, culori, font, raza colțurilor — și în dreapta o bucată de aplicație reală care se schimbă pe măsură ce atingi opțiunile.

Pașii 1 și 2 în întregime: pagina Create, Get Code, cele trei alegeri, Copy Command. Mai jos găsești aceiași pași în cuvinte, ca să-i urmezi în timp ce te uiți.
Rezistă tentației de a alege culorile acum

Se poate, și e distractiv. Dar culorile PawSoul nu se aleg cu ochiul de pe pagina asta: vin din direcția estetică stabilită cu clientul, iar asta e treaba părții 4. Acum lasă tema așa cum e și ia comanda.

2. Get Code: alegi, nu configurezi

Apasă Get Code și se deschide un panou deasupra previzualizării. Trei grupuri de alegeri, atât: pentru PawSoul Template → Next.js, Base → Base UI, iar comutatoarele le lași cum sunt.

Ce e «Base». Motorul invizibil de sub componente: gestionează tastatura, atingerea în afara panoului, blocarea derulării — cazurile care pe calculatorul tău nu apar niciodată și pe telefonul clientului da. Cele trei opțiuni — Base UI, React Aria, Radix UI — fac același lucru în moduri diferite. Base UI e deja selectată: las-o așa.

Comutatoarele. «Create a monorepo» și «Enable RTL support» sunt pentru proiecte pe care azi nu le faci. Lasă-le oprite.

În josul panoului e Copy Command. Comanda n-o scrii tu: au compus-o alegerile tale, iar acel --preset cu codul la final e tema pe care o porți cu tine.

3. Treci la Claude Code și alege folderul

Ai comanda în clipboard, iar terminalul nu-l deschizi: îl execută Claude Code pentru tine. Deschide-l, și înainte să lipești uită-te la chip-urile din partea de sus a ferestrei lui: spun unde lucrează.

Creează folderul care va conține proiectele, dacă nu-l ai deja: un folder oarecare, numește-l proiecte. Folderul PawSoul nu îl creezi tu: îl creează comanda, aici înăuntru.

Îndreaptă Claude Code spre el: din chip-ul folderului alege proiecte. E singurul control care contează — dacă chip-ul spune altceva, proiectul se naște în altă parte.

Acum lipește. La comandă adaugi doar cum se numește proiectul: întrebarea «What is your project named?» apare în timpul instalării, iar la ea răspunde el.

Comanda e cea pe care ai copiat-o la pasul 2 — al tău «--preset» va avea codul temei tale, nu acesta.

Rulează pnpm dlx shadcn@latest init --preset b313IbnLYe --template next și numește proiectul pawsoul

De aici nu mai atingi nimic pentru câteva minute. Când termină, Claude Code îți rezumă ce a fost creat: printre fișiere e components/ui/button.tsx. Fișierul acela e deja al tău — e prima piesă de mobilier, și de acum înainte îl schimbi doar cerându-i lui.

4. Pornește proiectul și privește-l

Folderul pawsoul acum există în proiecte. Cere-i lui Claude Code să intre în el și să pornească proiectul — nu e nevoie să-l redeschizi și nici să te muți manual.

Intră în folderul pawsoul, pornește serverul de dezvoltare și spune-mi la ce adresă să-l deschid

Îți răspunde cu adresa: localhost:3000, sau 3001 dacă 3000 e deja ocupat de altceva, ca aici. Deschide-o în browser.

Browser-ul pe localhost:3001: «Project ready! You may now add components and start building. We've already added the button component for you», cu un buton verde dedesubt și rândul «Press d to toggle dark mode».
Fundațiile, vii. Butonul verde e o componentă shadcn/ui, și e un fișier din proiectul tău.

Cei patru pași într-un singur rând, fără temă — ține-l pentru data viitoare.

Creează fundațiile proiectului în acest folder: rulează pnpm dlx shadcn@latest init --template next, numește proiectul pawsoul și lasă Base UI neschimbat. Apoi intră în el și pornește serverul de dezvoltare.

Fundațiile sunt puse, dar sunt încă cele standard: butonul e verde pentru că așa era tema implicită, nu pentru că am ales-o noi. În partea 4 dăm gustul: alegem direcția estetică și o scriem ca instrucțiuni, în loc s-o lăsăm pe seama agentului.

De la brief confuz la UX/UI complet Un brief confuz devine o aplicație funcțională. Spot de produs dintr-o singură poză O poză devine un spot animat, fără cod. Fă Claude să vizioneze videoclipurile tale Claude îți vede videoclipurile și le transformă în text. Higgsfield în Claude Code Generează imagini și video în timp ce programezi în Claude Code. De la o înregistrare Loom la o pagină web O înregistrare de ecran devine o pagină web, fără cod. Video Shorts cu NotebookLM Sursele tale devin un short vertical. Landing page de lux pe Lovable O landing page de lux dintr-un singur prompt. Excalidraw local, pe computerul tău Excalidraw gratis pe computerul tău, fără cod. Mistral OCR în fluxul tău de lucru Extrage text din documente cu Mistral OCR. Claude SEO în terminal 25 de skill-uri SEO gratuite în Claude Code. Google Search Console în Claude Code Datele Search Console direct în terminal. Rutine în Claude Code Claude lucrează singur, cu computerul oprit. Clonează o landing page în React cu v0 Clonează o landing page reală în cod React. Context economy cu Claude Lucrează ușor și nu-ți epuiza limitele lui Claude. De la prompt la skill auto-evolutiv Skill-uri Claude care învață din greșelile tale. De la NotebookLM la Canva: prezentări Slide-uri din NotebookLM, în sfârșit editabile în Canva. Harta pentru a înțelege orice tool AI 12 categorii pentru a încadra orice tool AI. PNG transparente cu ChatGPT PNG cu transparență reală, nu tabla de șah falsă. Infografice animate cu Gemini Infografice care se animă în buclă cu Gemini. Cercetare de piață cu Deep Research Deep Research ca analistul tău de piață. Cum să fii citat de motoarele AI (AEO) Devino o sursă pe care ChatGPT și Perplexity o citează.