Yksisivuisen portfolion runko, eli esittely, kolme projektikorttia ja yhteystietolomake, syntyy tekoälyltä yhdellä promptilla ja näkyy esikatselussa saman tien. Koodaustaustaa ei tarvita. Tarvitaan sisältö: projektit, kuvat ja lyhyt esittely, jotka kootaan ennen kuin työkalu avataan.
Tekoälytutkija Andrej Karpathy lanseerasi tälle tavalle termin "vibe coding" helmikuussa 2025, ja suomeksi siitä käytetään nimeä vibekoodaus. Kuvailet luonnollisella kielellä, millaisen sivun haluat, ja tekoäly kirjoittaa koodin. HTML:ää tai CSS:ää ei tarvitse osata. Riittää, että osaat kuvailla lopputuloksen.
Portfoliosivun tehtävä
Portfoliosivu esittelee osaamisesi, projektisi ja yhteystietosi: suunnittelijalle se on näyteikkuna, kehittäjälle lista koodiprojekteista, konsultille referenssikooste. Tekoälyn kanssa kirjoitat ensin promptin, esimerkiksi "rakenna yksisivuinen portfolio, jossa on etusivu, kolme projektikorttia ja yhteystietolomake", ja tekoäly tekee siitä toimivan sivupohjan minuuteissa.
Ennen vaihtoehdot olivat valmis alusta rajallisin muokkausmahdollisuuksin tai kuukausien koodausopinnot. Tekoälyn kanssa vapautta on yhtä paljon kuin koodatessa, mutta koodia ei kirjoiteta itse.
Työnhaussa ja freelancetöissä linkki omaan sivuun myös erottaa hakemuksen muista. CV tai LinkedIn-profiili ei näytä, miltä työsi näyttää käytännössä. Oma sivu näyttää.
Hyöty ei-koodaajalle
Suurin este eli syntaksin osaaminen poistuu. Sinun ei tarvitse tietää, miten JavaScript-funktio kirjoitetaan tai miten CSS-tiedosto liitetään HTML:ään.
Muutokset syntyvät nopeasti. Ensimmäisen version nähtyäsi voit pyytää heti: "vaihda fontti selkeämmäksi", "siirrä yhteystietolomake sivun alaosaan", "lisää tummempi väriteema". Jokainen muutos on uusi prompti, ja uutta tekniikkaa ei tarvitse opetella.
Tulosta ei tarvitse lukea koodista, koska tekoälykoodausympäristöt näyttävät esikatselun reaaliajassa. Jos jokin ei toimi, pyydät tekoälyä korjaamaan sen, ja virhettä ei tarvitse jäljittää rivi riviltä.
Kaikkea tekoäly ei silti tee puolestasi. Sinun pitää yhä tietää, mitä sivulle tulee, missä järjestyksessä ja millaisen vaikutelman haluat antaa. Tekoäly toteuttaa nämä päätökset.
Portfoliotyypit
Yksinkertaisin on yksisivuinen sivu ("one-pager"), jossa on lyhyt esittely, muutama projektikortti ja yhteystiedot. Se riittää, kun haet esimerkiksi ensimmäistä työpaikkaa ja tarvitset linkin hakemukseen.
Monisivuisessa portfoliossa jokaisella projektilla on oma sivunsa, CV:llä tai referensseillä omansa ja mukana voi olla blogi. Tämä sopii freelancereille ja konsulteille, joilla on esiteltävänä useita erillisiä kokonaisuuksia.
Interaktiivisessa portfoliossa on toimivia demoja, upotettuja videoita tai animaatioita. Se vaatii enemmän, mutta onnistuu, kun kuvaat toiminnallisuuden promptissa tarkasti.
Muoto valitaan sen mukaan, mitä sivun lukijan pitää nähdä. Suunnittelijalla ratkaisevat kuvat ja visuaalinen ilme. Kehittäjälle toimivat linkit GitHub-projekteihin ja lyhyt tekninen kuvaus jokaisesta ovat tärkeämpiä kuin hieno ulkoasu.
Rakentaminen vaiheittain
- Kirjoita sisältörunko ennen kuin avaat työkalun. Listaa osiot: esittely, projektit, taidot, yhteystiedot. Silloin rakennetta ei tarvitse miettiä promptia kirjoittaessa.
- Kerää projektikuvaukset ja kuvat valmiiksi. Jos kuvia ei vielä ole, käytä väliaikaisia paikkamerkkejä.
- Valitse työkalu tarpeen mukaan. Selainpohjaisella työkalulla näet tuloksen ilman asennuksia. Editoripohjainen ympäristö antaa enemmän hallintaa, jos aiot muokata sivua pitkään.
- Kuvaa ensimmäisessä promptissa kokonaisuus. Esimerkiksi: "Rakenna yksisivuinen portfolio, jossa on hero-osio nimelläni ja lyhyellä esittelyllä, projektiosio kolmelle kortille, taito-osio ja yhteystietolomake alareunassa." Näin tekoäly saa tarpeeksi tietoa toimivan rungon tekemiseen kerralla.
- Pyydä yksi muutos kerrallaan. Tarkista tulos jokaisen pyynnön jälkeen. Muutokset pysyvät jäljitettävinä, eikä tekoäly sekoita pyyntöjä keskenään.
- Vaihda placeholder-tekstit omaan sisältöön: CV-tekstiin, oikeisiin projektikuvauksiin ja toimiviin linkkeihin.
- Testaa sivu eri näyttökoilla. Pyydä tekoälyä tarkistamaan mobiilinäkymä. Tämä vaihe unohtuu usein.
- Julkaise ja jaa linkki. Lovablessa ja v0:ssa julkaisu hoituu editorista yhdellä painikkeella.
Kun sisältö on valmiina, yksisivuinen portfolio toimii lyhyessä ajassa. Monisivuinen vie pidempään, koska jokainen osio vaatii oman promptaus- ja tarkistuskierroksensa. Ensikertalaiselle sivuston 30 minuutin aloitusopas antaa pohjan.
Työkalut portfoliosivun tekemiseen
Parhaiten sopivat työkalut, joissa esikatselu näkyy heti ja sivua muokataan keskustelemalla. Lovable on hyvä valinta, jos haluat tehdä koko sivun selaimessa ilman asennuksia: kuvailet sivun, näet tuloksen heti ja jatkat muokkausta samassa näkymässä. Sen käytöstä kerrotaan tarkemmin Lovable-oppaassa.
v0 on tehty käyttöliittymien tuottamiseen kuvauksesta, joten se sopii, kun tarvitset nopeasti yhden näyttävän sivun ilman monimutkaista projektirakennetta. Siitä kerrotaan lisää v0-oppaassa.
Jos haluat enemmän hallintaa, esimerkiksi oman verkkotunnuksen, koodin muokkaamisen rivi kerrallaan tai tietokantayhteyden yhteydenottolomakkeelle, Cursor tai Claude Code antaa enemmän liikkumavaraa. Niissä ollaan lähempänä koodia, mutta tekoälyn kanssa keskustellaan yhä luonnollisella kielellä.
Suositus aloittelijalle: aloita Lovablella tai v0:lla. Kumpikaan ei vaadi asennusta. Siirry editoripohjaiseen työkaluun vasta, kun tarvitset esimerkiksi mukautettua toiminnallisuutta tai tietokantaa. Erot näkyvät tekoälykoodaustyökalujen vertailussa.
Valmiita prompteja sivun osioihin
Jokaiselle sivun osalle kannattaa kirjoittaa oma prompti, joka kuvaa lopputuloksen. Nämä pohjat on tehty yksisivuiseen portfolioon, ja ne voi antaa tekoälylle tässä järjestyksessä.
Hero-osio: "Rakenna sivun yläosaan hero-osio, jossa on nimeni isolla fontilla, yhden lauseen kuvaus siitä, mitä teen, ja painike, joka vie projektiosioon."
Projektit: "Lisää projektiosio, jossa on kolme korttia. Jokaisessa kortissa on kuva, projektin nimi, kahden lauseen kuvaus ja linkki projektiin."
Taidot: "Lisää osio, jossa taitoni näkyvät listana tai tageina, esimerkiksi pieninä laatikoina, joissa lukee kunkin taidon nimi."
Yhteystiedot: "Rakenna yhteydenottolomake, jossa kentät ovat nimi, sähköposti ja viesti. Lomakkeen lähetys näyttää käyttäjälle vahvistuksen onnistumisesta."
Ulkoasu: "Vaihda värimaailma tummemmaksi, käytä yhtä korostusväriä painikkeissa ja linkeissä, ja varmista, että teksti pysyy luettavana taustaa vasten."
Mobiili: "Tarkista, että sivu näyttää hyvältä myös kapealla näytöllä, ja siirrä navigaatio hampurilaisvalikkoon mobiilinäytöllä."
Muokkaa prompteja tilanteeseesi, mutta kuvaa aina lopputulos ja jätä toteutustapa tekoälylle. Lisää prompteja löytyy promptikirjastosta.
Tavallisimmat virheet
Liian epämääräinen ensimmäinen prompti, kuten "tee minulle hieno portfolio". Tekoäly tarvitsee konkretiaa: montako osiota, mitä kuhunkin ja millainen tunnelma.
Monta muutosta samassa promptissa. Kun pyydät kerralla "vaihda väri, siirrä lomake, lisää animaatio ja korjaa fontti", tekoäly voi toteuttaa vain osan tai sekoittaa pyynnöt. Yksi muutos kerrallaan on hitaampaa mutta varmempaa.
Julkaisu jää viimeiseksi. Jos julkaisutapa selviää vasta valmiin sivun kohdalla, sivu jää helposti omalle koneelle. Selvitä se heti alussa.
Placeholder-tekstiä julkaisuhetkellä. "Lorem ipsum" tai esimerkkinimet saavat sivun näyttämään keskeneräiseltä, vaikka ulkoasu olisi valmis. Kirjoita oikea sisältö ennen julkaisua.
Mobiilinäkymä jää testaamatta. Hakemuksen linkki avataan yhtä hyvin puhelimella kuin tietokoneella, joten pyydä tekoälyä tarkistamaan mobiilinäkymä aina ennen julkaisua.
Samoja periaatteita käsitellään laajemmin promptausoppaassa.
Julkaisu ja päivittäminen
Julkaisu tehdään yleensä suoraan editorista yhdellä painikkeella. Monessa työkalussa on ilmainen taso, joten ilmainen portfoliosivu tekoälyllä on realistinen tavoite. Oma verkkotunnus, esimerkiksi etunimi.fi, pitää yleensä ostaa erikseen ja yhdistää työkaluun, mutta ilman sitä julkaisu onnistuu monessa työkalussa maksutta.
Päivitä portfolio, kun valmistuu uusi projekti tai vanha ei enää kuvaa osaamistasi parhaiten. Avaat projektin ja pyydät lisäämään kortin tai muuttamaan kuvausta.
Jos myöhemmin tarvitset kävijäseurantaa, blogia tai maksullisen tilausjärjestelmän, sama työkalu ja keskustelutapa riittävät pohjaksi. Samalla tavalla voi rakentaa myös muunlaisia sovelluksia.
Mistä aloittaa
Ensin kootaan sisältö. Kirjoita muistiin, mitä projekteja haluat esitellä, mikä on lyhyt esittelysi ja mitkä yhteystiedot haluat näkyviin. Valitse sitten yksi työkalu (Lovable tai v0 sopivat aloittelijalle) ja kirjoita ensimmäinen prompti koko sivun rungosta.
Harjoitusprojektin voi valita sivuston projekti-ideoista, ja muiden rakentamista projekteista näkee, millaisia sivuja samalla tavalla on jo tehty.