← ← Înapoi la Idei AI

De la zero la aplicație live în 24 de ore: Ghid practic de Vibe Coding cu Cursor AI

Publicat februarie 2026

Publicat pe blogul TEN INVENT · Februarie 2026

Introducere

Ai o idee de aplicație. Poate un dashboard intern, poate un tool de productivitate, poate un MVP pe care vrei să-l testezi cu clienți reali. În mod normal, te-ai apuca de planificat arhitectura, de ales framework-uri, de configurat Docker, Kubernetes, microservicii — și trei săptămâni mai târziu încă n-ai o pagină funcțională.

Există o alternativă. Se numește vibe coding — un termen popularizat de Andrej Karpathy (co-fondator OpenAI) care descrie un stil de dezvoltare în care tu descrii ce vrei, iar AI-ul scrie codul. Tu ești regizorul, AI-ul este echipa de producție.

În acest articol îți arăt un workflow concret prin care poți trece de la idee la aplicație deployată în producție în 24 de ore. Nu teoretic. Practic. Cu pași clari, tool-uri concrete și lecții învățate din experiență directă.

Ora 0–1: Instalare și configurare Cursor

Ce este Cursor?

Cursor este un editor de cod bazat pe VS Code, dar construit de la zero pentru lucrul cu AI. Nu e un plugin adăugat pe deasupra — e un IDE în care AI-ul e cetățean de primă clasă. Poate citi întregul tău proiect, poate edita mai multe fișiere simultan, poate rula comenzi în terminal, și poate face refactoring pe tot codebase-ul.

Instalare

Mergi pe cursor.com și descarcă aplicația pentru sistemul tău de operare.
Instalează-l ca pe orice aplicație. Dacă ai folosit VS Code, te vei simți ca acasă — extensiile și setările se pot importa.

Abonament

Cursor are un plan gratuit (Hobby) cu funcționalitate limitată, dar pentru vibe coding serios ai nevoie de planul Pro ($20/lună). Ce primești:

Tab completions nelimitate — sugestii de cod în timp real
Auto mode nelimitat — AI-ul alege automat cel mai potrivit model pentru fiecare task
Agent mode — AI-ul poate edita mai multe fișiere, rula comenzi, și implementa funcționalități complete
Acces la modele de top — Claude, GPT, Gemini — tot ce e mai bun

Dacă descoperi că $20/lună nu-ți ajunge (lucru puțin probabil la început), poți trece pe Pro+ ($60/lună) sau Ultra ($200/lună) mai târziu.

Sfat: Începe cu Pro. Urmărește-ți consumul o săptămână. Upgradează doar dacă dai constant de limite.

Primii pași în Cursor

După instalare:

Deschide Cursor și conectează-ți contul GitHub.
Familiarizează-te cu cele trei moduri principale:
- Ask Mode (Ctrl/Cmd + L) — întrebi AI-ul, primești răspunsuri și sugestii fără modificări automate
- Agent Mode (Ctrl/Cmd + I) — AI-ul implementează autonom: creează fișiere, editează cod, rulează comenzi
- Tab completions — sugestii inline pe măsură ce tastezi, acceptă cu Tab
Configurează Cursor Rules — instrucțiuni permanente pe care AI-ul le respectă în proiectul tău. Creează un fișier .cursorrules în rădăcina proiectului.

Ora 1–3: Alege un tech stack simplu (și nu te complica!)

Regula de aur: monolitul bate microserviciile

Aceasta e probabil cea mai importantă decizie pe care o iei. Și greșeala cea mai frecventă a developerilor (și a AI-ului) e să supraîncerce arhitectura.

Nu ai nevoie de:

Docker (nu pentru un MVP)
Kubernetes (absolut deloc)
Microservicii (poate peste 2 ani)
Baze de date distribuite
Message queues
15 servicii care comunică între ele

Ai nevoie de:

Un framework full-stack
O bază de date
Un serviciu de hosting simplu

Stack-ul recomandat pentru vibe coding

Iată ce funcționează cel mai bine cu AI-ul — stack-uri pe care modelele le cunosc foarte bine din datele de antrenament:

Varianta 1: Next.js + Supabase (cea mai prietenoasă cu AI)

Next.js — framework React cu server-side rendering, API routes, și routing built-in
Supabase — bază de date PostgreSQL cu autentificare, storage, și API automat
Tailwind CSS — stilizare prin clase utilitare (AI-ul generează Tailwind excelent)
Vercel — deploy cu un click, gratuit pentru proiecte personale

Varianta 2: Laravel + Inertia.js + React (ideal dacă preferi PHP)

Laravel — framework PHP matur, documentație excelentă
Inertia.js — bridge între backend Laravel și frontend React/Vue
SQLite sau PostgreSQL — bază de date simplă
Laravel Forge sau Railway — deploy simplu

Varianta 3: SvelteKit + Prisma + SQLite (minimalist)

SvelteKit — framework modern, rapid, cod minimal
Prisma — ORM intuitiv pentru baze de date
SQLite — zero configurare pentru dezvoltare
Vercel sau Netlify — deploy automat

De ce contează simplitatea?

AI-ul generează cod mai bun când stack-ul e simplu. Cu cât ai mai puține dependențe și mai puține straturi de abstractizare, cu atât:

AI-ul face mai puține greșeli
Debugging-ul e mai rapid
Contextul din Cursor rămâne focusat
Poți livra mai repede

Regulă practică: Dacă nu poți explica stack-ul tău în 30 de secunde, e prea complicat pentru vibe coding.

Inițializarea proiectului

Deschide terminalul în Cursor și creează proiectul. Exemplu cu Next.js:

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
cd my-app

Inițializează Git imediat:

git init
git add .
git commit -m "initial setup"

Conectează la un repo GitHub:

gh repo create my-app --public --source=. --push

De la acest moment, fiecare progres semnificativ = un commit. Vei avea nevoie de acest istoric.

Ora 3–12: Scrie prompt-uri bune și împarte-le strategic

Aceasta e inima vibe coding-ului. Nu scrii cod — scrii instrucțiuni. Iar calitatea instrucțiunilor tale determină calitatea codului generat.

Principiul #1: Nu cere totul dintr-o dată

Cea mai mare greșeală:

❌ „Construiește-mi o aplicație de management al task-urilor cu autentificare, dashboard, CRUD complet, notificări, și export PDF."

Asta e „draw the rest of the owl". AI-ul va genera ceva, dar va fi fragil, plin de scurtături, și greu de debugat.

În schimb, împarte în pași mici și logici:

✅ Pasul 1: „Creează modelul de date pentru o aplicație de task management. Am nevoie de: User (name, email, password), Project (name, description, owner), Task (title, description, status, priority, assignee, project). Folosește Prisma ca ORM cu SQLite."

✅ Pasul 2: „Creează pagina de autentificare cu login și register, folosind NextAuth.js cu credentials provider. Stilizarea cu Tailwind, design minimal și curat."

✅ Pasul 3: „Creează un dashboard care afișează proiectele utilizatorului logat. Fiecare proiect e un card cu numele, descrierea scurtă, și numărul de task-uri. Adaugă un buton de 'Proiect nou'."

Fiecare pas trebuie să fie suficient de mic încât AI-ul să-l poată ține în context (contextul e limitat!) și suficient de clar încât să nu existe ambiguitate.

Principiul #2: Folosește Ask Mode pentru planificare, Agent Mode pentru execuție

Un workflow puternic:

Ask Mode — descrie ce vrei să construiești și cere AI-ului un plan pas cu pas
Revizuiește planul, ajustează dacă e necesar
Agent Mode — dă-i fiecare pas din plan, pe rând
Testează după fiecare pas
Commit după fiecare funcționalitate completă

Principiul #3: Oferă context explicit

AI-ul nu citește gânduri. Cu cât ești mai specific, cu atât rezultatul e mai bun. Tehnici concrete:

Referințe cu @:

@filename — referință la un fișier specific din proiect
@codebase — AI-ul analizează întregul proiect
@docs — referință la documentație externă

Structura unui prompt bun:

Context: Lucrez la o aplicație Next.js de task management. 
Am deja autentificarea funcțională și modelele de date configurate.

Task: Creează pagina de detalii pentru un proiect individual.

Cerințe:
- Ruta: /projects/[id]
- Afișează numele și descrierea proiectului
- Listează task-urile ca un board Kanban (coloane: To Do, In Progress, Done)
- Fiecare task e un card draggable între coloane
- Folosește @dnd-kit pentru drag and drop
- Stilizare cu Tailwind, design curat

Fișiere relevante: @schema.prisma @layout.tsx

Nu folosi librării suplimentare fără să mă întrebi.

Principiul #4: Când ceva nu merge, dă context la eroare

Nu spune doar „nu merge". Fă asta:

„Primesc această eroare când încerc să accesez /projects/1: [lipește eroarea completă]. Am verificat și proiectul cu id 1 există în baza de date. Cred că problema e la server component vs client component. Poți investiga?"

Dacă e o problemă vizuală, fă un screenshot și lipește-l direct în chat-ul Cursor (da, înțelege imagini).

Principiul #5: Configurează Cursor Rules

Creează un fișier .cursorrules în rădăcina proiectului:

Ești un developer senior specializat în Next.js 14+ cu App Router.

Reguli:
- Folosește TypeScript strict, nu any
- Componente server by default, client doar când e necesar
- Tailwind pentru stilizare, nu CSS separat
- Convenție de numire: camelCase pentru variabile, PascalCase pentru componente
- Gestionare erori cu try/catch în toate operațiile async
- Comentarii în limba română
- Commit messages în engleză, format conventional commits

Stack: Next.js 14, TypeScript, Tailwind CSS, Prisma, SQLite, NextAuth.js

Aceste reguli sunt incluse automat în fiecare prompt, asigurând consistență pe tot proiectul.

Principiul #6: Împarte sesiunile de lucru

Contextul AI-ului se degradează pe măsură ce conversația crește. La fiecare 15-20 de mesaje (sau când schimbi radical funcționalitatea), deschide un chat nou (Cmd/Ctrl + T). Cursor păstrează accesul la tot proiectul, dar conversația e proaspătă.

Ora 12–18: Iterare, testare, polishing

Ciclul de dezvoltare vibe coding

Acesta e ritmul natural:

Prompt → Generare → Testare → Feedback → Ajustare → Commit → Repeat

Câteva sfaturi pentru această fază:

Testează în browser după fiecare schimbare majoră. Nu lăsa AI-ul să genereze 5 funcționalități fără să verifici niciuna. Dacă nu funcționează, rollback-ul e dureros.

Folosește checkpoints. Cursor are un buton de „Restore checkpoint" lângă fiecare mesaj din chat. Dacă AI-ul a stricat ceva, poți reveni la starea anterioară cu un click.

Refactorizează pe parcurs. Periodic, cere AI-ului:

„Analizează codul curent din @codebase. Identifică duplicări, inconsistențe, sau pattern-uri care ar trebui refactorizate. Nu face modificări, doar listează-le."

Apoi adresează-le una câte una.

Nu ignora erorile. Dacă AI-ul generează cod care „merge dar cu warnings", rezolvă warning-urile acum. Ele devin bug-uri mai târziu.

Ora 18–24: Deploy cu GitHub și CI/CD

De ce GitHub + CI/CD?

Ai codul local, funcționează pe mașina ta. Acum trebuie să ajungă pe internet, accesibil oricui. Și nu vrei să faci asta manual de fiecare dată. Vrei un pipeline: push pe GitHub → testare automată → deploy automat.

Pasul 1: Structurează repo-ul pe GitHub

Dacă nu ai făcut deja, conectează proiectul la GitHub:

# Dacă nu ai creat repo-ul încă
gh repo create my-app --public --source=. --push

# Asigură-te că ai un .gitignore bun
# (Next.js îl creează automat, dar verifică)

Creează două branch-uri principale:

main — codul de producție, mereu stabil
develop — codul de development

git checkout -b develop
git push -u origin develop

Workflow-ul: lucrezi pe develop (sau pe feature branches), faci PR în main, la merge se deployază automat.

Pasul 2: Configurează deploy pe Vercel

Vercel e cea mai simplă opțiune pentru Next.js (dar funcționează și cu React, Svelte, etc.):

Mergi pe vercel.com și creează un cont cu GitHub.
Click „Import Project" și selectează repo-ul tău.
Vercel detectează automat framework-ul și configurează build-ul.
Click „Deploy". În 60 de secunde, aplicația ta e live pe internet.

De acum, fiecare push pe main deployază automat în producție. Fiecare PR primește un preview deployment cu URL unic — perfect pentru a testa înainte de merge.

Pasul 3: Adaugă GitHub Actions pentru CI

Chiar și cu Vercel care face deploy automat, vrei un layer de CI care verifică codul înainte de deploy. Creează fișierul .github/workflows/ci.yml:

name: CI Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  quality-check:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Type check
        run: npx tsc --noEmit

      - name: Build
        run: npm run build

Ce face acest workflow:

La fiecare push pe main sau develop, și la fiecare Pull Request:
- Instalează dependențele
- Rulează linter-ul (verifică stilul codului)
- Verifică tipurile TypeScript
- Încearcă un build complet

Dacă oricare din acești pași eșuează, PR-ul e marcat cu ❌ și nu se deployază.

Pasul 4: Workflow-ul complet

Iată cum arată fluxul de lucru de la commit la producție:

Tu scrii cod în Cursor
       ↓
git add . && git commit -m "feat: add task board"
       ↓
git push origin develop
       ↓
GitHub Actions rulează CI (lint, types, build)
       ↓
Creezi Pull Request: develop → main
       ↓
Vercel creează Preview Deployment (URL unic pentru testare)
       ↓
Verifici preview-ul, merge PR
       ↓
Vercel deployază automat în producție
       ↓
Aplicația e live! 🚀

Bonus: Variabile de mediu

Dacă aplicația ta folosește chei API, credențiale de bază de date, sau alte secrete:

Local: fișier .env.local (adăugat în .gitignore, nu se urcă pe GitHub)
Vercel: Settings → Environment Variables → adaugi fiecare variabilă
GitHub Actions: Settings → Secrets and variables → Actions → adaugi secretele necesare

Important: Nu pune niciodată chei API sau parole direct în cod. Folosește întotdeauna variabile de mediu.

Recapitulare: Timeline de 24 de ore

| Interval | Activitate | Output | |----------|-----------|--------| | Ora 0–1 | Instalare Cursor, abonament Pro, familiarizare | IDE configurat, cont activ | | Ora 1–3 | Alegere tech stack, inițializare proiect, GitHub repo | Proiect funcțional local, repo conectat | | Ora 3–12 | Dezvoltare cu prompt-uri strategice (modelele de date → autentificare → UI → logică) | Funcționalitățile principale implementate | | Ora 12–18 | Iterare, debugging, polishing, refactoring | Aplicație stabilă și testată local | | Ora 18–24 | Configurare CI/CD, deploy Vercel, testare producție | Aplicație live pe internet cu deploy automat |

Lecții finale

Vibe coding nu înseamnă cod slab. Înseamnă cod generat inteligent, ghidat de un dezvoltator care știe ce vrea. AI-ul scrie, tu gândești, revizuiești și decizi.

Prompt-urile mici bat prompt-urile mari. Un prompt de 3 rânduri care cere o funcționalitate clară produce cod mai bun decât un prompt de 30 de rânduri care cere o aplicație completă.

Commit des, testează des. Git este plasa ta de siguranță. Fiecare funcționalitate care merge = un commit. Nu accumula 4 ore de muncă fără commit.

Nu te atașa de cod. Dacă AI-ul a generat ceva care nu funcționează după 2-3 încercări de fix, dă rollback și reformulează prompt-ul. E mai rapid decât să repari la infinit.

Stack-ul simplu câștigă. Un monolit pe Next.js cu Supabase sau SQLite bate o arhitectură de microservicii în orice zi a săptămânii — cel puțin pentru un MVP. Poți complica mai târziu, când ai utilizatori reali și probleme reale de scalare.

AI-ul e asistentul tău, nu șeful tău. Revizuiește codul generat. Întreabă de ce a făcut anumite alegeri. Învață din ce generează. Cel mai bun vibe coder nu e cel care acceptă orbește, ci cel care ghidează inteligent.

Acest articol a fost scris ca parte a seriei de publicații tehnice de pe blogul TEN INVENT. Dacă ai o idee de aplicație și vrei să o transformi în realitate, hai să vorbim.