Google Stitch + Claude Code: verkkosivuston suunnittelu ilman ”tekoälymäistä ilmettä”

Lisää Ailootin käyttöohjeita on dokumentaatiossa.

Miksi Claude Codella rakennetut verkkosivustot näyttävät ”tekoälymössöltä”?#

Kuvatussa käytännön tapauksessa puhelusovelluksen etusivun työ alkoi tyhjästä projektista ja pyynnöstä, että Claude Code rakentaisi laskeutumissivun. Lopputulos oli tuttu: taustana slate-950, korostusvärinä indigo-500, otsikossa lihavoitu Inter ja sen alla kolme identtistä varjollista korttia. Sama asettelu kuin ensimmäisessä v0:ssa, ensimmäisessä Lovablessa ja ensimmäisessä ChatGPT-generoinnissa. Kirjoitin promptin uudelleen viisi kertaa ja lisäsin sanat ”premium”, ”ei kuten kaikki muut” ja ”moderni” – sivu näytti silti vuoden 2015 WordPress-teemalta.

Logiikka on yksinkertainen: ilman rajoitteita malli ottaa tilastollisen keskiarvon näkemästään. Ja se on nähnyt miljoona identtistä Bootstrapilla ja Tailwindilla rakennettua laskeutumissivua. Jos haluat tuloksen, joka ei ole keskinkertainen, sinun on annettava agentille tarkat tiedot: mitkä värit, fontit ja välit valitaan sekä mitä komponentteja pidetään kanonisina. Mallille ”kaunis” tarkoittaa ”vuoden 2020 mediaania”. Adjektiivit eivät muuta lopputulosta; tarvitset täsmällisiä parametreja.

Tarkastelin samaa eroa Referon valmiita designjärjestelmiä käsittelevässä oppaassa – siinä otat jonkun toisen tyylin (Apple, Linear, Stripe) ja annat sen agentille. Google Stitch lähestyy asiaa toiselta suunnalta: sen sijaan, että lainaisit jonkun muun tyyliä, luot omasi kuvauksesi perusteella.

Mikä Google Stitch on ja miten siitä on apua?#

Stitch on Google Labsin kokeilu, joka esiteltiin Google I/O:ssa toukokuussa 2025. Kirjoitat promptikenttään, miltä haluat sovelluksen näyttävän (tai lataat kuvakaappauksen, valkotaululuonnoksen tai kilpailijan sivun), ja Stitch luo käyttöliittymänäkymiä loputtomalle kanvaasille. Taustalla se käyttää Gemini 2.5 Prota ja Flashia, ja Gemini 3 lisättiin joulukuussa 2025 viimeistellympien asettelujen luomista varten.

Meille hyödyllisiä ominaisuuksia:

• Vibe Design – kuvaile tunnelmaa sanoin (”minimalistinen ja laadukas, kuten Stripe”) ja saat valittavaksi useita visuaalisia suuntia.
• Viitteet – lataa kuva Dribbb­lestä tai Pinterestistä; Stitch säilyttää asettelun ja soveltaa vaatimuksiasi.
• Vienti kolmessa muodossa: Figmaan (muokattavina tasoina), puhtaana HTML/CSS:nä ja MCP:n kautta suoraan agentille.

Ero valmiisiin tyyleihin, kuten Referoon, on merkityksellinen. Refero on kirjasto designjärjestelmistä, jotka on jo poimittu oikeista verkkosivustoista; siinä otat käyttöön olemassa olevan brändin. Stitch luo tuotteellesi järjestelmän alusta alkaen. Eikö sinulla ole viitedesignia ja haluat oman ilmeen? Valitse Stitch. Haluatko soveltaa tunnetun tuotteen tyyliä nopeasti? Valitse Refero. Ne palvelevat eri vaiheita ja täydentävät toisiaan hyvin.

Myös Claudessa on sisäänrakennettu design-tila; käsittelin sitä Claude Design -oppaassa. Stitch eroaa siinä, että se tarjoaa valmiin järjestelmän ulkoisessa tiedostossa, jonka agentti lukee aina rakentaessaan jotakin.

Google Stitchin saatavuusvaatimukset#

Stitch ei ole saatavilla kaikissa maissa: Googlen edustaja kirjoitti virallisella keskustelufoorumilla, että palvelu on saatavilla vähintään 18-vuotiaille käyttäjille 212 maassa ja että lista laajenee. Rajoitetuilla alueilla näet sivustolle mennessäsi vain yhden ilmoituksen: ”Sorry, Stitch is unavailable.”

Tarvitset Google-tilin – palveluun voi kirjautua vain sellaisella.

Kun Stitchin MCP-todennus estää Claude Code -työnkulun#

MCP:n yhdistämisestä löytyy verkosta paljon roskaa, eivätkä puolet ohjeista yksinkertaisesti toimi. Monet oppaat (myös suositut englanninkieliset) suosittelevat esimerkiksi asentamaan @google/stitch-mcp-paketin komennolla npx -y @google/stitch-mcp@latest. Pakettia ei ole olemassa – npm palauttaa 404. Älä kopioi tätä komentoa; tuhlaat aikaasi. Samasta syystä kannattaa valita integraatioita, joiden asennus ja toimivuus oikeassa tehtävässä on varmistettu.

Tässä kuvattu etä-MCP-yritys sai Claude Codessa virheen Incompatible auth server. Havaittu virhe ei ole toimiva asennusresepti tai todiste kaikkien nykyisten kokoonpanojen epäonnistumisesta. Älä jatka määrittelemättömällä ”yhdistä MCP” -vaiheella. Käytä alla olevaa manuaalista HTML/CSS-vientiä, kunnes täsmällinen yhteensopiva kokoonpano on todennettu.

Luo ensin avain. Stitchissä: napsauta avatartasi → Stitch settings → API key -osio → Create key → kopioi avain.

Lisää sitten välityspalvelin Claude Codeen yhdellä komennolla:

bash

Aseta avain ympäristömuuttujaan (helpoin tapa – sinun ei tarvitse säätää Googlen konsolin tai vanhenevien tokenien kanssa):

export STITCH_API_KEY="your-key-from-stitch-settings"

Jos haluat määrittää asetukset käsin, ne näyttävät tältä (tiedostossa ~/.claude.json tai projektin juuren .mcp.json-tiedostossa):

json

Käynnistä Claude Code uudelleen ja tarkista, että yhteys toimii:

claude mcp list

Stitchin ja DESIGN.md:n työnkulku on kontekstisuunnittelua puhtaimmillaan: lisäät täsmälliset tokenit Clauden kontekstiin etukäteen, ja se rakentaa niiden mukaan arvailematta, mitä tarkoitit. Koko menetelmä kokoaa yhteen kaikki kolme pilaria – AI-kloonin, toiset aivot ja kontekstisuunnittelun. Tämä yhdistelmä muuttaa Clauden ”arvailevasta avustajasta” ennustettavia tuloksia tuottavaksi työkaluksi.

Mikä DESIGN.md on ja miksi se on kuvakaappausta parempi?#

Tässä on tärkeä yksityiskohta, jonka useimmat ohjeet kertovat väärin: Stitchissä ei ole ”Export DESIGN.md” -painiketta. Agentti kokoaa tiedoston itse. Googlen virallisen codelabin mukaan prompti kuuluu suurin piirtein näin: ”siirry Stitch MCP:n kautta projektiin, poimi väripaletti ja typografia sekä kokoa niistä DESIGN.md”. Codelab olettaa toimivan MCP-yhteyden. Tämän manuaalisen reitin Claude Code lukee sen sijaan vietyä HTML/CSS-aineistoa ja kirjoittaa jäsennellyn tiedoston projektijuureen. Sen pitää merkitä puuttuvat tokenit arvaamatta niitä kuvasta.

DESIGN.md sisältää konkreettisia tietoja adjektiivien sijaan:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Jos haluat Claude Coden käyttävän tiedostoa, viittaa siihen CLAUDE.md-tiedostossa (esimerkiksi rivillä ”Käytä kaikkien komponenttien designina DESIGN.md-tiedostoa”) – silloin agentti ottaa samat tokenit mukaan jokaiseen istuntoon. Maanantaina tehty painike ja perjantaina tehty kortti ovat saman tyylisiä, koska käytössä on yksi totuuden lähde.

Tässä asetelmassa kaksi paikallista viitettä toimii yhdessä. DESIGN.md sisältää järjestelmän säännöt: värit, typografian, välit ja komponentit. Stitchistä viety HTML/CSS ja aineistot antavat yksittäisen näytön asettelun. MCP on valinnainen eikä tämän reitin edellytys.

Miten rakennat verkkosivuston: koko matka tekstistä designiin?#

Tässä koko prosessi järjestyksessä:

1. Avaa Stitch. Tarkista maasi saatavuus ja kirjaudu osoitteeseen stitch.withgoogle.com Google-tililläsi.
2. Kuvaile tuote. Kerro näytöt ja käyttäjäpolku. Vahvista tai muokkaa ehdotettu näyttöluettelo.
3. Lisää viite. Lataa tarkoitettu kuvakaappaus ja kerro säilytettävät värit, typografia ja asettelu.
4. Luo ja viimeistele. Valitse yksi näyttö ja paranna se ennen laajentamista.
5. Vie valittu näyttö HTML/CSS-muodossa. Tallenna tiedostot ja tarvittavat aineistot projektin viitekansioon. Avaa viety HTML paikallisesti ja tarkista, että se on valitsemasi näyttö. Pelkkä kuvakaappaus ei sisällä täsmällisiä CSS-arvoja.
6. Kokoa DESIGN.md paikallisesta viennistä. Pyydä Claude Codea lukemaan HTML/CSS, kirjaamaan todelliset väri-, fontti-, väli-, asettelu- ja komponenttiarvot ja luettelemaan puuttuvat arvot päätöstäsi varten. Tämä reitti ei tarvitse Stitch-API-avainta tai MCP-todennusta.
7. Rakenna ja tarkista yksi sivu. Anna Claude Codelle seuraavat kehotteet ja korvaa kansionimi todellisella paikallisen viennin polulla:

Lue Stitchin HTML/CSS-vienti kansiosta refs/stitch-export/. Luo projektijuureen DESIGN.md käyttäen tiedostoissa olevia arvoja. Tunnista puuttuvat arvot keksimättä niitä.

Rakenna yksi sivu DESIGN.md:n ja paikallisen Stitch-viennin pohjalta. Pidä komponentit modulaarisina. Vertaa renderöityä sivua vientiin tietokone- ja mobiilileveyksillä ja varmista navigointi sekä vuorovaikutustilat erikseen.

Tästä eteenpäin Claude Code hoitaa kaiken: näyttöjen välisen reitityksen, DESIGN.md:n taitepisteiden mukaisen responsiivisuuden, animaatiot ja vuorovaikutteisuuden. Stitch tarjoaa staattisia näyttöjä ja klikattavan prototyypin, mutta se ei rakenna toimivaa logiikkaa eikä julkaise sivustoa hosting-palveluun – se on agentin tehtävä.

Miten pääset eroon ”tekoälymäisestä ilmeestä”: mitä tarkalleen pitäisi muuttaa?#

Tässä ovat konkreettiset kohdat, joiden avulla verkkosivusto lakkaa paljastamasta itseään:

• Väri. Violetti indigo-500 paljastaa asian ensimmäisenä. Määritä pää- ja korostusvärit täsmällisinä heksakoodeina suoraan DESIGN.md-tiedostossa. Jokainen agentti tulkitsee ”brändinsinisen” omalla tavallaan.
• Fontti. Inter on turvallisin valinta ja siksi tunnistettavin ”tekoälyfontti”. Valitse ilmeikäs pari: esimerkiksi sans serif -fontti leipätekstiin ja luonteikas fontti otsikoihin. Määritä yhdistelmä Stitchin designissa ja kirjaa se DESIGN.md-tiedostoon.
• Viite adjektiivin sijaan. Malli tulkitsee ”tee tästä moderni” ilmaukseksi ”vuoden 2020 mediaani”. Kun annat oikean kuvakaappauksen, se noudattaa kirjaimellisesti ohjetta ”käytä tämän sivun asettelua”. Lataa viitekuva Stitchiin; makua ei voi välittää sanoin.
• Välit ja ilmavuus. Mallipohjaisen asettelun tunnistaa ahtaista, samanlaisista lohkoista. Määritä DESIGN.md-tiedostossa väljä väliasteikko – agentti sijoittelee elementit vapaammin.

Täsmällisyys voittaa subjektiiviset adjektiivit. Stitch on pohjimmiltaan kone, joka muuntaa ”haluan sen tällaiseksi” -toiveesi tarkoiksi tokeneiksi, joten agentin ei tarvitse arvailla.

Google Stitch vai vaihtoehdot: minkä valitset?#

Vertailin työkaluja niiden ominaisuuksien perusteella, joilla on oikeasti merkitystä, kun vibe koodaa pienellä budjetilla:

Oma työnkulkuni: Stitchillä tutkin designia → Claude Codella rakennan ja toteutan logiikan. Pienellä budjetilla työskentelevälle vibe coderille Stitch on paras vaihtoehto, koska se on maksuton ja luo tuotteelle ainutlaatuisen ilmeen alusta asti. Jos haluat tutustua kaikkiin markkinoilla oleviin työkaluihin, käsittelin niitä pääartikkelissa mitä koodata vuonna 2026.

Missä Google Stitchin rajat tulevat vastaan: mitä rajoitteita sillä on?#

Tässä rehellinen lista, jotta et pety jo kolmannen näytön kohdalla:

• Vain käyttöliittymä. Ei backendia, tietokantaa tai julkaisua hosting-palveluun. Tarvitset siihen Claude Codea (tai Lovablea, jos haluat kaiken samaan paikkaan).
• Rajoitetut muokkausmahdollisuudet työkalussa. Yksittäistä elementtiä ei voi siirtää hiirellä – sitä voi muuttaa vain promptilla ja generoimalla uudelleen. Se ei ole Figma.
• Epädeterministisyys. Sama prompti tuottaa erilaisia tuloksia. Se sopii ideoiden tutkimiseen, mutta on hankalaa, kun tarvitset toistettavia tuloksia.
• Käyttökiintiö. Maksuttomien generointien raja tulee vastaan (tällä hetkellä päivittäinen); lisäkiintiötä ei voi ostaa, joten sinun täytyy odottaa kiintiön nollautumista. Tarkka määrä vaihtelee, joten tarkista käyttöliittymästä.
• Kokeellinen tila. Google Labs ei sitoudu pitkäaikaiseen tukeen. Palvelu voi muuttua tai sulkeutua.
• Maantieteelliset rajoitukset ja MCP:n tunnistautumisongelma Claude Codessa, joista kerrotaan saatavuutta ja käyttöönottoa käsittelevissä osioissa.

Stitch ei sovi hyvin, jos sinulla on monia projekteja koskeva tiukka brändiohjeisto, jos design on jo Figmassa tai jos tarvitset sovelluksen backendilla ja valmiiksi julkaistuna.

Mitä seuraavaksi?#

Rakenna pienin mahdollinen työnkulku yhdellä näytöllä: kuvaile tuote Stitchissä, luo etusivu, vie sen HTML/CSS ja pyydä Claude Codea kokoamaan DESIGN.md sekä rakentamaan sivu paikallisista tiedostoista. Kun näet violetin liukuvärin katoavan itsestään, loppu sujuu helpommin.

Stitchillä suunnittelu on yksi kontekstisuunnittelun tekniikka. Täydellisessä järjestelmässä yhdistyvät AI-klooni, toiset aivot ja kontekstisuunnittelu, jotta Claude voi nojata valmiiksi laadittuihin sääntöihin ja kontekstiin.

AI-klooni, toiset aivot ja kontekstisuunnittelu ovat tuotteelle tärkeitä. Stitchillä suunnittelu on tämän yhdistelmän ensimmäinen rakennuspalikka.

Jos haluat jatkaa työskentelyä mallien parissa, siirry Ailootiin.