De ce designerii ar trebui să învețe vibe coding (și de unde să înceapă)

Anul trecut, una dintre cele mai bune designere cu care am lucrat mi-a trimis un Figma cu 47 de ecrane. Era un produs SaaS de management proiecte. Frumos, atent, fiecare hover state gândit.

L-am dat unei echipe de 3 developeri ca să-l construiască. Au scos prima versiune în 8 săptămâni. La testarea cu utilizatori reali, am descoperit că: cinci ecrane lipseau (designerul nu le anticipase fiindcă n-a folosit niciodată produsul în context), trei flow-uri erau imposibile (interacțiuni care arătau bine în Figma dar nu funcționau cu real data), și jumătate din animații nu se traduceau în CSS funcțional.

Am rescris jumătate din designs. Total cost: ~30,000$ în salarii arse pe muncă pierdută.

Soluția? Nu să avem mai puțini designeri. Să avem designeri care prototip-ează în cod, nu doar în Figma.

Diferența între design "static" și design funcțional

Design-ul în Figma e o aproximare. Arată ce poate fi un produs. Nu poți:

• Să-l scrolezi cu 1000 itemi din date reale
• Să simulezi un drag-and-drop care interacționează cu logica de business
• Să-l testezi pe mobil cu thumb-ul tău, nu doar pe responsive frame
• Să-l dai unui user și să vezi unde se blochează
• Să-i schimbi 5 lucruri în 10 minute, nu 5 zile

Vibe coding-ul îți dă toate astea. Nu trebuie să devii engineer. Trebuie să poți spune unui agent AI: "fă-mi pagina asta funcțională cu date reale" — și să iese.

Ce câștigi concret ca designer

1. Pitch-uri mai puternice

Compari două scenarii:

Designer "Figma-only": "Iată mockup-urile pentru noua versiune a dashboard-ului. Aici ai grafic, aici filtre, aici acțiuni rapide."

Designer "vibe coding": "Iată dashboard-ul live, cu date demo. Click pe Filtre — vedeți cum se actualizează în 200ms. Comparativ cu versiunea actuală care îl ia 3 secunde."

Care ia decizia mai repede? Care convinge un investitor sau un client mai bine?

2. Înțelegerea constraint-urilor tehnice = design mai bun

Dacă ai construit cu mâna ta o pagină cu 50 de carduri, înțelegi de ce performance-ul contează. Dacă ai conectat un formular la o bază de date, înțelegi de ce validarea trebuie făcută corect. Asta se traduce în design-uri care nu cer luni de "asta nu se poate face din motive tehnice".

3. Independență față de developeri pentru side projects

Câți designeri cunoști care au o idee de SaaS sau o resursă pe care vor să o construiască, dar care a rămas în Figma fiindcă "îmi trebuie un developer cu care să fac echipă"? Vibe coding-ul rezolvă asta. Construiești singur până la MVP. Dacă merge, găsești co-fondator. Dacă nu, ai pierdut un weekend, nu un an.

4. Carriere expandate (design engineer)

Rolul de "design engineer" — designer care scrie cod de production în React/Vue/Svelte — e printre cele mai bine plătite roluri de design în 2026. Salarii la Vercel, Linear, Figma, Stripe pentru design engineers: 180-260k$/an în Europa de Vest. În MD/RO, design engineers buni câștigă 3-5x față de designeri tradiționali.

Tranziția de la "designer" la "design engineer" nu mai cere bootcamp de 6 luni. Cu vibe coding, durează 2-3 luni de practică serioasă.

Ce NU ai nevoie să înveți

Frica numărul 1: "trebuie să învăț JavaScript ca un engineer real". Nu.

Ai nevoie să înțelegi:

• Ce e un component (cam ca un "instance" în Figma)
• Ce e o variabilă (orice valoare salvată — text, număr, listă)
• Ce e o funcție (un mic block care primește input și dă output)
• Ce e o bază de date (Excel cu super-puteri)

Asta e tot. Restul ți-l explică Claude Code pe parcurs. Sintaxa const x = (...) => { ... } e detaliu — Claude o scrie, tu citești și înțelegi ce face.

Stack-ul recomandat pentru designeri

Începe cu cel mai simplu posibil:

1. Editor: Cursor sau Claude Code în terminal (Claude Code e mai potent, dar Cursor are UI mai familiar pentru cineva care vine din Figma)
2. Framework: Next.js cu Tailwind CSS (Tailwind = utility classes, foarte similar cu Auto Layout din Figma)
3. Backend: Supabase (tot din UI, fără să scrii SQL)
4. Hosting: Vercel sau aihost.md (vezi comparația)
5. Tools de design: rămâi în Figma pentru concepte. Codul e pentru prototip funcțional, nu pentru exploring vizual.

Drumul concret în 90 de zile

Luna 1: Citește și replica.

• Săptămâna 1-2: Tutorialul oficial Next.js (în engleză, dar Claude îți traduce dacă ai nevoie). Construiești blog-ul exemplu pas cu pas.
• Săptămâna 3-4: Replicezi un design al tău din Figma în Next.js. Doar UI, fără date. Învață Tailwind făcând.

Luna 2: Construiește ceva real.

• Alege un proiect mic — landing page pentru un client, portfolio personal, tracker pentru ceva ce faci tu zilnic
• Adaugă o bază de date (Supabase). Salvează ceva. Citește ceva.
• Deploy live. Primește feedback de la 5 oameni.

Luna 3: Iterează rapid.

• Construiește 3-4 prototip-uri mici (1-2 zile fiecare) pe idei diferite
• Învață să-i ceri lui Claude eficient — vezi cum gândește Claude Code
• Începe să incorporezi vibe coding în munca de zi cu zi: în loc de "îi explic developerului", construiești singur prototip funcțional

O confesiune onestă

Va fi dificil primele 4-6 săptămâni. Vei da peste erori care n-au sens. Vei renunța la jumătate de proiect fiindcă "nu pricep ce face acest cod". E normal. Persistă.

După prima proiect terminat și deployat, va deveni adictiv. După al treilea, vei înțelege de ce designerii care fac asta câștigă atât.

Concluzie

Designerii care învață vibe coding în 2026 vor fi designerii care domină în 2028. Nu e despre a deveni "developer". E despre a-ți tripla output-ul și a deveni de neînlocuit într-o piață în care AI-ul desenează automat 80% din mockup-uri tradiționale.

Nu aștepta să fii forțat de piață. Începe acum, alege un weekend, primul tău prototip cu Claude Code.

Începe pe aihost.md cu Claude Code preinstalat →