Käytännön opas v0:aan alkaa hinnasta, koska ilmaisella tasolla saat vain seitsemän viestiä päivässä. Sillä ehtii tehdä yhden näkymän ja hioa sitä muutaman kerran. Työkalu tuottaa kuvauksesta valmista Next.js-, Tailwind- ja shadcn/ui-koodia, jonka voi julkaista sellaisenaan. Raja tulee siis vastaan jo ennen kuin ensimmäinen näkymä on hiottu loppuun.
Hinnoittelu krediitteinä
Maksulliset tasot eivät laske viestejä vaan krediittejä. Suuremmille organisaatioille on erikseen hinnoiteltava taso.
Krediitti kuluu tokeneina. Tästä seuraa yksi käytännön sääntö. Pitkä keskustelu maksaa enemmän kuin lyhyt, koska sama konteksti lähetetään uudestaan jokaisen viestin mukana. Kun siirryt uuteen näkymään, aloita uusi keskustelu.
Se, kuinka monta tokenia yhdestä krediitistä saa, riippuu käytetystä mallista. Käyttämättä jääneet kuukausikrediitit siirtyvät seuraavalle laskutusjaksolle ja vanhenevat 65 päivän kuluttua. Erikseen ostetut krediitit vanhenevat vuoden kuluttua ostosta, ja niiden käyttö vaatii voimassa olevan maksullisen tason.
Kulutusta on vaikea arvioida etukäteen, koska se riippuu sekä mallista että projektin koosta. Nyrkkisääntö on, että kokonaan uusi näkymä maksaa selvästi enemmän kuin saman näkymän pieni muutos, ja että hinta nousee sitä mukaa kuin projektin tiedostomäärä kasvaa.
Ilmaisen tason seitsemän viestin raja on tiukempi kuin miltä se kuulostaa. Myös epäonnistunut yritys kuluttaa viestin. Väärin ymmärretty kuvaus vie kaksi viestiä: yhden virheeseen ja yhden korjaukseen. Siksi promptin muotoiluun kannattaa käyttää minuutti aikaa ennen lähettämistä, jos päivän budjetti on seitsemän.
Päivän viestit riittävät pidempään, kun kirjoitat koko määrittelyn yhteen viestiin sen sijaan että lisäät ominaisuuksia yksi kerrallaan. Osiot, tekstit, värit ja mobiilikäyttäytyminen mahtuvat samaan kuvaukseen. Visuaaliset hienosäädöt tehdään erikseen paneelista, jolloin ne eivät syö viestikiintiötä lainkaan.
Promptista valmiiseen näkymään
Työkalu tekee kokonaisia näkymiä, ei irrallisia koodinpätkiä. Tuotos on Next.js-sovellus, jonka tyylit tulevat Tailwindista ja komponentit shadcn/ui-kirjastosta.
Kuvauksen tarkkuus ratkaisee lopputuloksen. Kerro mikä sivu on kyseessä, mitkä osiot siinä ovat, mitä niissä lukee ja millainen tunnelma haetaan. Malliksi kelpaa tällainen: ”Landing page for a Helsinki dog grooming studio. Hero with headline and booking button, three service cards with prices, one testimonial, footer with opening hours. Warm neutral palette, rounded corners, mobile first.” Neljä riviä tuottaa paremman ensimmäisen version kuin yksi lause.
Laajaa sovellusta ei kannata pyytää kerralla. Rakenna se osissa ja pidä jokainen viesti yhden muutoksen kokoisena, niin näet mikä muuttui ja mikä meni rikki. Promptien kirjoittamisen tekniikat pätevät tässä samalla tavalla kuin agenttipohjaisissa työkaluissa.
Ensimmäinen versio ei osu koskaan täysin kohdalleen. Tavallisin korjauskierros koskee sisältöä, ei rakennetta: otsikot ovat geneerisiä, hinnat keksittyjä ja kuvatekstit englanniksi. Anna oikeat tekstit valmiina seuraavassa viestissä, niin säästät kierroksen. Jos taas rakenne meni pieleen, palaa aiempaan versioon ja muotoile kuvaus uudestaan sen sijaan että yrität korjata väärää pohjaa jälkikäteen.
Pienet visuaaliset korjaukset eivät tarvitse promptia lainkaan. Voit valita elementin suoraan esikatselusta ja säätää typografiaa, värejä, marginaaleja, reunoja, läpinäkyvyyttä ja varjoja visuaalisesta paneelista, ja muutos kirjoittuu takaisin lähdekoodiin. Fontin koon säätäminen keskustelun kautta on hidasta. Paneelissa se hoituu yhdellä vedolla.
Taustajärjestelmä kytketään erikseen. Tietokantaliitoksen lisääminen luo tilin valittuun palveluun ja tuo tarvittavat ympäristömuuttujat projektiin, minkä jälkeen työkalu osaa kirjoittaa ja ajaa SQL:ää taulujen luomiseksi ja muuttamiseksi. Tallennus, kirjautuminen ja käyttäjien hallinta kannattaa päättää ennen kuin näkymä on hiottu valmiiksi, koska ne muuttavat rakennetta. Tietokannan kytkeminen on oma työvaiheensa, eikä sitä hoideta samalla promptilla kuin ulkoasua.
Toinen rajoite koskee olemassa olevaa brändiä, sillä uusi näkymä voi näyttää eri sivustolta kuin muu palvelu.
Heikoin kohta on monimutkainen tilanhallinta. Kun näkymässä on useita toisistaan riippuvia lomakkeita tai kun sama data näkyy kolmessa paikassa eri muodossa, kuvauksesta tulee pidempi kuin koodista. Silloin on nopeampaa kirjoittaa logiikka itse ja pyytää työkalulta vain ulkoasu sen ympärille.
Koodin vienti ja versionhallinta
Valmis näkymä ei jää työkalun sisään. Projektit julkaistaan Verceliin, jossa työhaara saa oman esikatseluosoitteensa ja julkaiseminen päivittää tuotantoversion pysyvään osoitteeseen. Esikatselulinkin voi lähettää asiakkaalle kommentoitavaksi ennen kuin mitään lukitaan.
Projektin voi myös kytkeä versionhallintaan. Silloin työkalu luo yksityisen repositorion, työntää nykyisen koodin sinne ja vie jokaisen luodun muutoksen omalle työhaaralleen. Julkaiseminen tekee vetopyynnön tai käyttää olemassa olevaa ja yhdistää sen päähaaraan. Tässä kohtaa lopputulos lakkaa olemasta demo. Koodi on tavallista Next.js-koodia tavallisessa repositoriossa, ja työtä voi jatkaa millä tahansa editorilla.
Ennen julkaisua kannattaa tarkistaa muutama seikka, joita malli harvoin hoitaa itsestään. Miltä näkymä näyttää kapealla ruudulla, mitä käyttäjä näkee kun listassa ei ole yhtään riviä, ja mitä tapahtuu kun lomake lähetetään puutteellisena. Nämä ovat tilanteita, joita kuvaus ei yleensä mainitse, joten niitä ei myöskään synny ilman erillistä pyyntöä.
Olemassa olevan projektin voi tuoda sisään samaa reittiä. Se on kätevin tapa käyttää työkalua silloin, kun sovellus on jo pystyssä ja siitä puuttuu vain siisti hallintanäkymä tai hinnoittelusivu.
Promptit kannattaa kirjoittaa englanniksi. Palvelu, dokumentaatio ja komponenttikirjaston nimistö ovat englanniksi, ja kuvaus osuu tarkemmin kohdalleen, kun käytät samaa kieltä kuin sanasto, jota malli on oppinut. Suomenkieliset käyttöliittymätekstit saa silti pyytämällä. Lue ne läpi ennen julkaisua, sillä taivutusvirhe hinnoittelutaulukossa näkyy asiakkaalle heti.
Yksi asia kannattaa hoitaa kuntoon heti ensimmäisellä kerralla. Anna oikeat tekstit, oikeat hinnat ja oikeat linkit jo kuvauksessa, äläkä jätä paikanvaraajia myöhemmin korjattaviksi. Ne päätyvät yllättävän usein julkaistuun versioon asti.
Aloita yhdestä näkymästä, joka on projektissasi jo olemassa mutta näyttää kehnolta. Kuvaa se yllä olevan mallin mukaan, katso mitä tulee, ja käytä loput päivän viesteistä sen korjaamiseen.