Pentru ce e cea mai bună

Pentru a proiecta site-ul înainte să-l construiești. Wireframing, moodboarding și predarea de specificații curate către Framer, Webflow sau developeri.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Intră pe figma.com și conectează-te cu Google.

1. Apasă pe '+' mov → New design file.

1. Apasă F (frame), alege 'Desktop 1440' din dreapta, apoi trasează-ți canvasul.

1. Apasă R (dreptunghi) și T (text) ca să începi să schițezi un hero. Folosește Auto-Layout (Shift + A) ca elementele să se comporte responsiv.

1. Activează 'Dev Mode' (comutatorul din dreapta-sus) când ai terminat, îți expune CSS-ul + spațierile pentru predare.

Fii un product designer senior.

Scrie un brief de Figma pentru o landing page care vinde un curs online
despre 'Website-uri AI animate' către designeri aspiranți.

Returnează:
1) Harta site-ului (secțiunile în ordine)
2) Pentru fiecare secțiune: obiectiv, headline, sub-headline, textul de CTA
3) Paletă de culori în hex (maxim 4 culori)
4) Pereche de fonturi (Google Fonts)
5) Site-uri de referință pentru moodboard

Ton: cinematic, sigur pe sine, modern.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru a lansa un site animat, cu aspect profesionist, într-un weekend, fără să scrii cod. Tragi, plasezi, animezi, publici.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Deschide framer.com și începe un proiect nou.

1. Alege un template care îți place, template-urile dark în stil 'Linear' sunt aur curat pentru învățat.

1. Apasă pe orice element → tab-ul 'Effects' din panoul din dreapta → adaugă Fade / Scale / Scroll.

1. Apasă pe iconița de telefon din dreapta-sus ca să verifici responsivitatea pe mobil.

1. Apasă 'Publish' → conectează un domeniu sau folosește adresa gratuită .framer.website.

Deschide Framer → scrie 'AI' în bara de comenzi →

Lipește:
Proiectează o landing page în dark-mode pentru 'Halo Coffee', un abonament
premium pentru boabe de espresso. Hero-ul are o pungă de cafea 3D care plutește,
scroll reveals pentru 3 note de degustare, citate-testimonial, CTA de abonare.
Fonturi: Inter + Playfair Display. Culoare de accent: #F2B544.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Site-uri mari, bogate în conținut, cu bloguri, studii de caz și mai multe template-uri de pagină. Mai multă putere decât Framer, dar curbă de învățare mai abruptă.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Conectează-te pe webflow.com → 'New site' → alege blank sau template.

1. Învață cele trei tab-uri: Navigator (layere), Style Manager (clase CSS), Interactions (animații).

1. Trage un Section → Container → Div → H1. Ăsta e hero-ul tău.

1. Deschide panoul Interactions → 'Element trigger' → 'Scroll into view' → alege 'Fade up'.

1. Publică pe subdomeniul gratuit webflow.io; fă upgrade când ești gata pentru un domeniu real.

Construiesc un site Webflow pentru un portofoliu de fotografie.
Scrie-mi:
1) Un sistem complet de denumire a claselor (BEM sau utility-first, alege unul și justifică-l)
2) O listă de componente reutilizabile pe care ar trebui să le construiesc (nav, hero, grid, lightbox…)
3) Pentru fiecare componentă, structura exactă în Webflow (Section > Container > Div > …)
4) Trei interacțiuni pe care ar trebui să le adaug la scroll, cu sugestii de timing și easing

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Când deja scrii cod (sau folosești Cursor / Lovable) și ai nevoie de o componentă anume, frumoasă, un navbar, un grid de prețuri, un hero, în 30 de secunde.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Intră pe v0.dev (sau în dashboard-ul Vercel).

1. Scrie-ți promptul, fii specific: tipul componentei, aspectul, conținutul.

1. Preview-ul se actualizează live. Apasă 'Refine' și iterezi în chat.

1. Apasă 'Copy code', primești JSX React + Tailwind gata de lipit.

1. Sau apasă 'Open in Cursor' ca să-l trimiți direct în editorul tău.

O secțiune de prețuri pentru un SaaS numit 'Modvia Pro'.

- Trei niveluri: Hobby (gratuit), Creator (19 $), Studio (59 $).
- Folosește componente card shadcn/ui, border subtil, efect de sticlă pe cardul din mijloc 'Creator'.
- Comutator lunar/anual sus; la anual apare un badge cu 20% reducere.
- Fiecare card are o listă cu bifă de 5 funcționalități.
- Hover: cardul se ridică 4px cu o umbră fină.
- Dark mode cu accent verde neon (#00FFB2) pe CTA-urile principale.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru oricine vrea o aplicație web reală (nu doar o pagină de marketing) fără să atingă un terminal. Excelentă cu importuri din Spline.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Conectează-te pe lovable.dev.

1. Descrie-ți aplicația într-un prompt lung și detaliat (folosește formula de 5 linii din Nivelul 0).

1. Urmărește-o cum generează în timp real, frontend, bază de date Supabase, auth.

1. Apasă pe orice element și spune 'change this' în chat ca să editezi chirurgical.

1. Apasă 'Publish' pentru un URL lovable.app; conectezi un domeniu mai târziu.

Construiește un tracker de finanțe personale numit 'Moneta'.

Pagini:
1) Auth (login cu email + Google, Supabase)
2) Dashboard, carduri de sumar (sold, venit lunar, cheltuieli lunare),
   grafic bară animat pentru ultimele 6 luni, ultimele 10 tranzacții
3) Tranzacții, listă cu filtre, modal de adăugare/editare/ștergere
4) Setări, monedă, comutator dark mode

Design:
- Temă dark, accent mov #8B5CF6, carduri de sticlă, fundal cu grid subtil
- Fonturi: Geist Sans + Geist Mono
- Mișcare: cardurile apar cu stagger-fade la încărcare, numerele urcă numărând la prima vizualizare

Mobile-first. Stochează totul în Supabase.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Când vrei mai mult control decât în Lovable, să vezi codul, să-l forkezi, să-l depanezi, să-l trimiți pe GitHub.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Deschide bolt.new, descrie-ți proiectul în limbaj simplu.

1. Așteaptă scaffold-ul, vezi arborele de fișiere + preview live.

1. Dai comenzi în chat-ul din stânga ca să editezi în continuare; panoul din dreapta rulează.

1. Apasă 'Connect to GitHub' ca să trimiți repo-ul.

1. Apasă 'Deploy' → deploy pe Netlify / Vercel dintr-un singur pas.

Construiește-mi un proiect Next.js 14 (App Router) + Tailwind + shadcn/ui.
Funcționalitate: un 'focus timer' cu Pomodoro 25/5, comutator de sunet ambiental,
         tracker de streak zilnic persistat în localStorage,
         inel circular de progres animat.
Structură de fișiere: app/, components/, lib/, cu separare clară.
Adaugă un README cu instrucțiuni de setup.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru lucru cu clienți, unde clientul vrea să editeze mai târziu fără să strice nimic. E-commerce și rezervări solide.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. Înregistrează-te pe wixstudio.com (diferit de clasicul wix.com).

1. Alege un template sau canvas gol, învață grila responsivă (un sistem gen CSS Grid).

1. Trage elemente, setează breakpoint-uri din bara de sus (Desktop / Tablet / Mobile).

1. Panoul Animations → alege o presetare sau construiește un timeline personalizat.

1. Publică; fă upgrade pentru domeniul tău când ești gata.

Construiesc un site Wix Studio pentru un studio de yoga.
Livrează un blueprint complet, pagină cu pagină:
- 5 pagini cu ordinea secțiunilor
- Reguli de conținut specifice fiecărui breakpoint (ce se ascunde pe mobil)
- Rețetă de animație per secțiune (intrare + scroll)
- Propunere de colecție CMS pentru 'Classes' + 'Teachers'

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru a oferi pachete de website de 200 $ afacerilor locale (instalatori, cafenele, săli de sport). La cheie, imposibil de urâțit.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. durable.co → 'Start' → răspunde la 2 întrebări (domeniu de activitate, locație).

1. Durable generează un site complet în ~30 de secunde.

1. Editezi textul direct. Schimbi imaginile cu biblioteca lui de imagini.

1. Adaugi pagini din meniul din stânga.

1. Publici; Durable se ocupă de domeniu + email din dashboard.

Rescrie acest copy generic de homepage pentru o afacere locală într-o voce
caldă, sigură pe sine, specifică. Ține-l scurt. Elimină cuvintele-clișeu.
Injectează 3 puncte concrete de dovadă (ani, clienți, acreditări).

---
[LIPEȘTE AICI OUTPUT-UL DURABLE]
---

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru un hero 3D care îți taie respirația, se încarcă rapid și răspunde la scroll sau la mouse.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. spline.design → New file.

1. Trage o formă din panoul din stânga (cub, sferă, plan).

1. Folosește panoul din dreapta ca să setezi materialele (mat, sticlă, crom).

1. Adaugă un event 'Mouse' sau 'Scroll' din tab-ul Events, leagă-l de rotație sau poziție.

1. Export → 'Public URL' pentru iframe, sau 'React' pentru o componentă de copiat.

Proiectez un hero 3D pentru un brand de cafea premium 'Halo Coffee'.

Dă-mi:
1) Compoziția camerei (unghi, senzația de distanță focală)
2) Setup de lumini (culori hex, poziții)
3) 3 idei de obiecte (nu boabe la propriu, gândește în metaforă)
4) O interacțiune controlată de mouse care se simte premium
5) O idee de animație legată de scroll
Ține-l minimalist și high-end, nu caricatural.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Personaje animate, butoane, scene de onboarding, animații care se schimbă în funcție de acțiunile utilizatorului.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. rive.app → New file → dimensiunea Artboard-ului (mobile din default).

1. Desenează cu unelte vectoriale (similar cu Figma).

1. Creează o animație Timeline (keyframe-uri de poziție, rotație, scalare).

1. Adaugă o State Machine, leagă stările cu triggere (hover, click).

1. Exportă .riv → încarcă cu rive-react în site-ul tău.

Proiectează state machine-ul pentru un buton Rive animat cu 4 stări:
idle, hover, loading, success.

Livrează:
- Numele stărilor + numele triggerelor (boolean/number)
- Reguli de tranziție (care stare duce la care, în ce condiție)
- Timeline pentru fiecare stare (ce se animă, durată, easing)
- Cod exemplu de runtime (React) care conduce stările dintr-un submit de formular

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Când ai nevoie rapid de o iconiță animată, un loader sau o ilustrație fără s-o proiectezi singur.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. lottiefiles.com → caută (ex. 'confetti', 'rocket', 'success tick').

1. Fă preview, alege una, apasă 'Edit colours' ca să se potrivească cu brandul tău.

1. Export → Lottie JSON sau dotLottie (mai mic).

1. Integrează prin web component-ul <lottie-player> sau pachetul npm lottie-react.

1. Controlezi play/pause cu JS standard.

În loc de un prompt, iată un cheat sheet de fraze de căutare:
- 'subtle hover icon', pentru itemii de nav
- 'page loader minimal', pentru stările de încărcare
- 'success tick morph', pentru succesul la submit de formular
- 'particles ambient loop', pentru fundalul de hero
- 'scroll-down chevron', pentru indiciul din josul hero-ului

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Gândit zilnic: scris copy, structurat idei, aruncat concepte de design, HTML/CSS/JS rapid, prompturi de imagine.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. chatgpt.com, conectează-te.

1. Începe cu formula de prompt de 5 linii din Nivelul 0.

1. Folosește 'Canvas' pentru documente lungi, 'Voice' pentru brainstorming în timpul plimbărilor.

1. Creează GPT-uri personalizate pentru joburi repetitive ('Modvia Copy GPT').

1. Folosește unealta 'image' pentru moodboard-uri rapide și imagini OG.

Ești directorul meu de creație senior la un studio web de tip boutique.

Jobul de azi: vino cu 10 concepte de hero de landing page radical diferite
pentru o nouă unealtă de scris cu AI numită 'Quill'. Vreau headline pe un rând, sub-headline
pe un rând și artificiul vizual central al fiecărui concept.

Constrângeri:
- Maxim 9 cuvinte în headline.
- Fiecare concept se simte distinct (nu schimba doar adjectivele).
- Include cel puțin un concept cu 3D, unul cu tipografia ca hero,
  și unul cu un hero fără imagine, doar gradient.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Probleme grele de cod, arhitectură de site-uri, documente lungi, orice unde gustul + profunzimea contează mai mult decât viteza.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. claude.ai, conectare cu Google.

1. Folosește 'Projects' ca să delimitezi conversațiile (un Project per website).

1. Trage fișiere în chat, PDF-uri, exporturi Figma, CSV-uri.

1. 'Artifacts' apar în dreapta pentru cod/HTML, editezi live.

1. Activează conectorii MCP (Linear, Notion, GitHub) pentru apeluri reale de unelte.

Proiectez un site animat pentru un brand de educație AI numit 'Modvia'.

Gândește pas cu pas:
1) Cele 3 direcții de design care ar putea funcționa pentru publicul ăsta (designeri
   aspiranți care vor să învețe AI). Clasează-le și apără câștigătorul.
2) Cele mai convingătoare 5 momente de dovadă a priceperii de pus pe homepage,
   și cum ar trebui să arate vizual fiecare.
3) Cel mai puternic text de CTA pentru 'intră în comunitate'.
4) În final, scrie HTML+CSS de producție pentru hero, folosind doar
   Tailwind + GSAP. Fără dependențe externe.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Acces gratuit la unul dintre cele mai bune modele + cea mai bună înțelegere de imagine/video de pe piață.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. aistudio.google.com → conectare cu Google.

1. Alege Gemini 2.5 Pro din dropdown-ul de modele.

1. Pune o imagine de referință, un PDF sau chiar un video de 10 minute în prompt.

1. Folosește butonul 'Get code' ca să ai instant snippet-ul de API dacă vrei să construiești pe el.

1. Salvează conversațiile în 'Prompt Gallery'.

Atașez 3 screenshot-uri ale unor website-uri care îmi plac.

Extrage-mi:
1) Pattern-uri de design comune (culoare, tipografie, grid, senzația de mișcare)
2) Tehnici CSS specifice vizibile (glassmorphism, gradiente etc.)
3) Cum aș putea combina aceste pattern-uri într-o secțiune hero unică
4) Clase Tailwind care aproximează aspectul

Bonus: sugerează 2 moduri de a-l face MAI distinctiv, nu mai puțin.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Muncă reală de development, unde vrei ca AI-ul să planifice, să editeze mai multe fișiere și să ruleze el singur lucrurile.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. antigravity.google, instalează aplicația desktop (macOS / Windows / Linux).

1. Deschide orice folder de pe mașina ta ca workspace.

1. Invocă agentul cu ⌘K, dă-i o sarcină, urmărește-l cum planifică și execută.

1. Aprobi / respingi modificările de fișiere pe fiecare hunk.

1. Folosește-l alături de git, fă commit după fiecare modificare acceptată.

În acest proiect Next.js, construiește un comutator de dark-mode care:
- Folosește biblioteca next-themes (instaleaz-o dacă lipsește)
- Adaugă un buton cu iconiță soare/lună în navbar
- Persistă alegerea în localStorage și respectă preferința sistemului
- Funcționează fără pâlpâire la încărcarea paginii

Când ai terminat, rulează serverul de dev și confirmă că se compilează.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Orice proiect din lumea reală. Pair-programming cu Claude Opus sau GPT-5 direct în editorul tău.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. cursor.com → descarcă pentru sistemul tău de operare.

1. Deschide un folder de proiect.

1. ⌘K = editare inline, ⌘L = panoul de chat, ⌘I = mod Composer (agent multi-fișier).

1. Schimbă modelele (Claude Opus, GPT-5, Gemini) din dreapta-jos.

1. Folosește /rules în chat ca să vezi fișierul de reguli al proiectului (.cursor/rules/).

(În Composer-ul Cursor) În acest proiect Next.js 14, adaugă un flux de abonare la newsletter:
- Creează components/NewsletterForm.tsx (input de email, buton de abonare)
- Route POST /api/subscribe care scrie în tabelul Supabase 'subscribers'
- Toast pe client la succes/eroare (sonner)
- Adaugă formularul în footer-ul din app/layout.tsx
- Scrie un test cu vitest care mock-uiește Supabase

Nu instala nimic ce nu e deja în package.json decât dacă e necesar.

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Când vrei control total, orice extensie existentă și zero lock-in.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. code.visualstudio.com → download + instalare.

1. Instalează extensiile obligatorii: Prettier, ESLint, Tailwind CSS IntelliSense, GitLens, Error Lens.

1. Pentru AI: instalează GitHub Copilot SAU extensia Continue (open source, orice model).

1. ⌘⇧P deschide paleta de comenzi, învață să trăiești acolo.

1. ⌃` deschide terminalul integrat.

(În Copilot Chat sau Continue) /explain
(selectează o funcție din fișierul tău, apoi apasă enter)

/doc
(la fel, generează JSDoc)

/test
(generează un fișier de test pentru funcția selectată)

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru a sări peste întrebarea 'ce secțiuni ar trebui să aibă site-ul ăsta'. Relume o rezolvă în 10 secunde.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. relume.io → New sitemap → descrie compania în 2 propoziții.

1. Relume scoate un sitemap vizual cu fiecare pagină + secțiune.

1. Apasă 'Generate wireframes', alege layout-uri de blocuri din biblioteca lui.

1. Exportă în Figma (ca fișier editabil) sau în Webflow (ca site live).

1. Personalizezi de acolo.

Scrie un brief de sitemap pentru Relume pentru: un restaurant italienesc de gamă medie
cu livrare, catering și o sală de 40 de locuri în Porto.

Livrează:
- Descrierea companiei în 2 propoziții (de lipit în Relume)
- Cele 6 pagini de care au nevoie cu adevărat (fără umplutură)
- Pentru fiecare pagină, 5 secțiuni în ordinea recomandată
- Ton de voce: cald, clasic, nepretențios

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Fundaluri în mișcare unice, video-uri de produs, bucle de hero, montaje pentru social, toate generate cu prompturi.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. runwayml.com → înregistrează-te → deschide Gen-4.

1. Text-în-video, imagine-în-video, sau trage un frame de start.

1. Dă prompturi cu mișcări de cameră ('slow dolly in, cinematic lighting').

1. Generează, alege cea mai bună variantă, descarcă MP4 (sau exportă 4K pe Pro).

1. Comprimă cu HandBrake înainte să folosești pe web (ține-l sub 2MB).

Scrie un prompt video Runway Gen-4 pentru o buclă de hero pe site-ul unui brand de cafea.

Cerințe:
- 4 secunde, buclă fără cusături
- Descrie mișcarea de cameră (dolly / orbit / crane)
- Descrie iluminarea (key light cu atmosferă, fill scăzut, revărsări aurii)
- Descrie mișcarea subiectului și timing-ul
- Descrie grain, adâncimea de câmp, gradarea de culoare
- Termină cu 'cinematic, 35mm, filmic'

🎯 Pachet de quest-uri

Pentru ce e cea mai bună

Pentru a adăuga narațiune la video-uri explainer, clipuri de hero, intro-uri de podcast, sau pentru a-ți clona propria voce.

Prețuri (la nivelul lui 2026)

Ghid rapid de pornire

1. elevenlabs.io → înregistrează-te.

1. Alege o voce din bibliotecă (sau clonează-o pe a ta pe Creator).

1. Lipește-ți scriptul, ajustează sliderele de stability/style.

1. Generează → descarcă MP3.

1. Comprimă pentru web (M4A e de obicei mai mic decât MP3).

Scrie un script de voiceover de 45 de secunde pentru un video explainer de hero
despre Modvia, o comunitate care învață designeri aspiranți să construiască
website-uri AI animate.

Ton: sigur pe sine, intim, un prieten la o plimbare.
Ritm: ~140 de cuvinte.
Structură: cârlig → problemă → schimbare → promisiune → CTA.
Include o pauză de respirație (–) și un cuvânt de accentuat (cu MAJUSCULE).

🎯 Pachet de quest-uri

💰 Cheat sheet de prețuri (când să plătești)

Aproape tot ce e aici are un tier gratuit. Iată lista scurtă de abonamente plătite care își scot banii înapoi repede.