Aceasta este lectia in care vibe coding-ul prinde cu adevarat viata. Vei construi o pagina de prezentare cu aspect profesional fara sa scrii o singura linie de cod manual. In schimb, vei descrie ce vrei in limba naturala, iar Claude Code o va construi pentru tine.
Arta promptingului
Calitatea promptului tau determina direct calitatea rezultatului. Iata progresia:
Prompt slab:
"Fa o pagina de prezentare."
Claude va construi ceva, dar nu va fi ceea ce ti-ai imaginat. Prea vag.
Prompt bun:
"Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle explaining we're building something new, and a centered email signup form with a blue submit button. Use a clean, modern design with lots of whitespace."
Mai bine — Claude stie structura, continutul si estetica generala.
Prompt excelent:
"Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle 'We're building something special. Join the waitlist and be among the first to get access.' Centered email signup form with a navy blue (#1e3a5f) submit button. Use the Inter font from Google Fonts. The color scheme is navy blue (#1e3a5f) and white. Fully responsive. Clean, modern SaaS design with generous whitespace."
Acum Claude are culori, fonturi, text si directie de design. Rezultatul va fi foarte aproape de ce vrei.
Concept
Promptingul este o abilitate, nu un talent. Devii mai bun cu practica. Cheia este specificitatea: fii clar in privinta a ceea ce vrei, include detalii vizuale (culori, dimensiuni, layout) si descrie senzatia pe care o urmaresti.Construirea sectiunii hero
Hai sa incepem sa construim. Deschide Claude Code in folderul proiectului:
Incearca
In Claude Code, tasteaza acest prompt:"Replace the content of app/page.tsx with a landing page for Waitlist Wizard. Create a hero section with: - A headline: 'Be the First to Know' - A subtitle: 'We're building something special. Join the waitlist and be among the first to get access when we launch.' - A centered email signup form with an input field and a navy blue submit button - Clean, modern SaaS design with generous whitespace - Use navy blue (#1e3a5f) as the primary color and white background - The page should be fully responsive"
Claude va genera codul si il va scrie in app/page.tsx. Verifica browserul la localhost:3000 — ar trebui sa vezi pagina ta de prezentare!
Adaugarea mai multor sectiuni
O pagina de prezentare excelenta are mai mult decat un hero. Hai sa adaugam functionalitati si dovada sociala:
Incearca
"Add a features section below the hero with 3 cards in a row. Each card should have an icon, a title, and a short description. The three features are: 1. 'Lightning Fast' — 'Get notified instantly when we launch. No spam, ever.' 2. 'Early Access' — 'Be among the first to try new features before anyone else.' 3. 'Free Forever' — 'The waitlist is free. No credit card required.' Use subtle icons and keep the design consistent with the hero."Apoi adauga dovada sociala:
Add a simple social proof section below features. Show "Join 2,000+ people
already on the waitlist" with a row of small avatar circles (use colored
circles as placeholders). Keep it minimal and trust-building.
Si un footer:
Add a simple footer with "Built by Waitlist Wizard" on the left and links
to "Privacy Policy" and "Terms of Service" on the right. Use a subtle
border-top to separate it from the content.
Crearea unui design responsive
"Responsive" inseamna ca pagina ta arata bine pe telefoane, tablete si desktop-uri. Deoarece folosim Tailwind CSS, Claude gestioneaza deja cea mai mare parte din asta — dar hai sa verificam si sa corectam orice nu arata bine.
Incearca
In browser, deschide Developer Tools (F12 sau Cmd+Option+I pe Mac). Apasa pe iconita de comutare dispozitive (arata ca un telefon si o tableta) pentru a previzualiza modul mobil. Daca ceva nu arata bine, spune-i lui Claude: "The features cards overlap on mobile. Make them stack vertically on screens smaller than 768px."Iterarea cu Claude
Acesta este ciclul de baza al vibe coding-ului: descrie, revizuieste, rafineaza. Incearca aceste ajustari:
- "Make the headline bigger — 48px on desktop, 32px on mobile"
- "Change the submit button color to a gradient from #1e3a5f to #2d5a8e"
- "Add a subtle gradient to the hero background — white to light blue (#f0f7ff)"
- "The spacing between sections feels too tight. Add more padding — at least 80px between each section."
De fiecare data, Claude modifica codul, iar browserul se actualizeaza instant. Acest du-te-vino este rapid, distractiv si surprinzator de productiv.
Pro Tip
Daca Claude face o modificare care nu iti place, spune-i: "Undo that last change" sau "Go back to how it was before." Poti folosi si Git:git checkout -- app/page.tsx pentru a restaura fisierul la ultima stare comisa.
Git Checkpoint
Pagina ta de prezentare arata grozav. E timpul sa salvam:
git add .
git commit -m "landing page complete with hero, features, social proof, and footer"
Nota sincera
Tocmai ai construit o pagina de prezentare cu aspect profesional fara sa scrii cod manual. Dar iata ce conteaza: intelegi ce s-a construit. Stii ca exista o sectiune hero, o sectiune de functionalitati, un footer. Stii alegerile de culori si layout. Aceasta intelegere este ceea ce separa vibe coding-ul de copy-paste-ul orb. Tu directionezi constructia — AI-ul o executa.Concluzia cheie
Tocmai ai construit o pagina de prezentare profesionala avand o conversatie cu AI-ul. Abilitatea nu e sa tastezi cod — e sa descrii clar ce vrei si sa iterezi pe rezultat. Asta e vibe coding.