Ohjelmistokehitys on muuttunut. Enää ei tarvitse viettää tunteja kirjoittaen CSS-sääntöjä tai tunkaten tietokantayhteyksiä käsin.

Moderni "vibe-koodari" ei aloita tyhjästä tiedostosta. Hän toimii kapellimestarina, joka ohjaa tekoälytyökaluja rakentamaan valmista ohjelmistoa ennätysajassa.

Tämä opas esittelee tehokkaimman modernin kehityspinon (stack): Vercel v0, Supabase ja Cursor. Tämän kolmikon avulla siirryt ideasta tuotantovalmiiseen sovellukseen muutamassa tunnissa.

---

Arkkitehtuurin pelikirja: Miten osat liittyvät toisiinsa

Ennen kuin avaat yhtäkään työkalua, sinun on ymmärrettävä järjestelmän tietovirta. Vibe-koodauksessa jokaisella työkalulla on selkeä rooli.

[ Vercel v0 ] ──(Generoi UI-komponentit)──> [ Cursor AI ]
                                                 │
                                        (Kytkee logiikan & API:t)
                                                 ▼
                                         [ Supabase BaaS ]
                                    (Tietokanta, Auth & Tallennus)

1. Vercel v0 (Frontend-automaatio): Generoi käyttöliittymän visuaaliset komponentit (React, Tailwind CSS, shadcn/ui) pelkkien tekstipromptien perusteella.

2. Cursor tekoäly (Integraatio ja logiikka): Toimii kehitysympäristönä (IDE). Se lukee v0:n tuottaman koodin, ymmärtää projektisi kontekstin ja kirjoittaa liimalogiikan.

3. Supabase (No-code tietokanta & backend): Tarjoaa valmiin Postgres-tietokannan, käyttäjähallinnan (Auth) ja rajapinnat ilman palvelimen pystytystä.

---

Vaihe 1: Käyttöliittymäsuunnittelu Vercel v0:lla

Vercel v0 on käyttöliittymäsuunnittelun tehoase. Se ei tee pelkkiä kuvia, vaan tuottaa tuotantovalmista React-koodia, joka käyttää parhaita kirjastoja.

Älä pyydä v0:aa rakentamaan koko sovellusta kerralla. Pilko käyttöliittymä osiin.

#### Prompt-malli v0:lle (Esimerkki: Dashboardin näkymä)

"Rakenna moderni SaaS-palvelun dashboard-näkymä käyttäen Next.js, Tailwind CSS ja shadcn/ui -komponentteja. Tarvitsen sivupalkin navigoinnille, yläpalkin käyttäjäprofiilille ja pääosion, jossa on kolme datakorttia (aktiiviset käyttäjät, liikevaihto, konversio) sekä kuvaaja viimeisimmistä tapahtumista. Pidä ulkoasu minimalistisena ja tumman teeman mukaisena."

Kun v0 generoi käyttöliittymän, voit muokata yksittäisiä osia osoittamalla niitä ja antamalla jatko-ohjeita (esim. "Muuta kuvaaja käyttämään viivakaaviota pylvään sijaan").

Kopioi valmis koodi talteen yhdellä klikkauksella.

---

Vaihe 2: Tietokannan ja taustan valmistelu Supabasessa

Supabase hoitaa sovelluksesi taustajärjestelmän. Sinun ei tarvitse kirjoittaa SQL-migraatioita käsin, sillä voit käyttää Supabasen sisäänrakennettua tekoälyavustajaa tietokantakaavion (schema) luomiseen.

#### Työnkulku Supabasessa:

1. Luo uusi projekti Supabase-konsolissa.

2. Siirry SQL Editor -osioon.

3. Anna tekoälylle prompti, joka vastaa v0:lla luotua käyttöliittymää.

#### Prompt-malli tietokannan luontiin:

"Luo tietokantataulut SaaS-dashboardia varten. Tarvitsemme taulun 'users' (kytketty Supabase Authiin), 'metrics' (id, user_id, active_users, revenue, conversion_rate, created_at) ja 'transactions' (id, user_id, amount, status, description, created_at). Lisää tarvittavat viiteavaimet (foreign keys) ja ota käyttöön Row Level Security (RLS) niin, että käyttäjät näkevät vain oman datansa."

Aja tekoälyn generoima SQL-kysely. Tietokantasi on nyt valmis vastaanottamaan dataa ja hallitsemaan käyttäjiä.

---

Vaihe 3: Palapelin kokoaminen Cursor-tekoälyllä

Nyt sinulla on käyttöliittymä (v0) ja tietokanta (Supabase). Cursor on työkalu, joka liittää nämä kaksi toisiinsa.

Avaa projektisi Cursorissa. Luo uusi sivu tai komponenttitiedosto ja liitä v0:sta kopioimasi koodi sinne.

#### Cursorin Composer-tilan hyödyntäminen (Cmd+I tai Ctrl+I)

Cursorin Composer pystyy muokkaamaan useita tiedostoja samanaikaisesti. Käytä @-viittauksia antaaksesi tekoälylle tarkan kontekstin.

#### Prompt-malli Cursorille kytkentää varten:

"Kytke tämä v0-komponentti @dashboard.tsx toimimaan @Supabase-asiakaskirjaston kanssa. Hae aktiiviset käyttäjät, liikevaihto ja konversio 'metrics'-taulusta ja uusimmat tapahtumat 'transactions'-taulusta. Varmista, että käytät Next.js Server Actions -toimintoja tai Reactin useEffect-hookkia datan hakemiseen turvallisesti. Jos käyttäjä ei ole kirjautunut sisään, ohjaa hänet kirjautumissivulle."

Cursor analysoi tiedostosi, asentaa tarvittavat Supabase-kirjastot ja kirjoittaa tarvittavan integraatiokoodin. Sinun tehtäväksesi jää vain testata toiminnallisuus selaimessa.

---

Vibe-koodarin rutiinitarkistuslista

Kun rakennat sovelluksia tällä stackillä, noudata tätä viiden askeleen rutiinia:

  • Pilko komponentit: Älä pyydä tekoälyä tekemään liian suurta kokonaisuutta kerralla. Yksi sivu tai toiminnallisuus kerrallaan on paras tapa edetä.
  • Käytä tyyppejä: Generoi Supabasen tyypit (TypeScript types) ja anna ne Cursorille tiedoksi @types-viittauksella. Tämä estää tekoälyä tekemästä virheitä rajapinnoissa.
  • Iteroi promptaamalla: Jos koodissa on virhe, kopioi virheilmoitus suoraan Cursorin chattiin. Älä yritä korjata sitä itse käsin, jos voit antaa tekoälyn tehdä sen sekunneissa.
  • Pidä huoli tietoturvasta: Varmista aina, että Supabasen RLS (Row Level Security) on päällä. Tekoäly saattaa unohtaa tämän, jos et erikseen mainitse sitä.

---

Seuraava askel: Rakenna ensimmäinen feature

Tämä kehityspino poistaa perinteisen koodauksen kitkan. Kun ulkoasu syntyy v0:lla sekunneissa, tietokanta Supabasella minuuteissa ja Cursor hoitaa integraation, suurin rajoitteesi ei ole enää tekninen osaaminen – se on ideoidesi laatu.

Mikä on se projekti, jonka olet siirtänyt tulevaisuuteen liian suuren työmäärän vuoksi? Avaa v0, kuvaile ideasi ja anna vibe-koodauksen viedä sinut maaliin.