Google Stitch + Claude Code: nettsteddesign uten «AI-utseendet»

Du finner flere instruksjoner for bruk av Ailoot i dokumentasjonen.

Hvorfor ser nettsteder laget med Claude Code ut som «AI-søppel»?#

I det praktiske eksempelet som beskrives, begynte arbeidet med hjemmesiden til en ringeapp med et tomt prosjekt og en forespørsel om at Claude Code skulle lage en landingsside. Resultatet var den klassiske varianten: slate-950 som bakgrunn, indigo-500 som aksent, fet Inter i overskriften og tre identiske kort med skygger under. Samme oppsett som i den første v0, den første Lovable og den første ChatGPT-genereringen. Jeg skrev om prompten fem ganger og la til «premium», «ikke som alle andre» og «moderne» — siden så fortsatt ut som et WordPress-tema fra 2015.

Den lilla gradienten er ingen tilfeldighet.

Logikken er enkel: Uten rammer bruker modellen det statistiske gjennomsnittet av det den har sett. Og den har sett en million identiske landingssider laget med Bootstrap og Tailwind. For å få et resultat som ikke er gjennomsnittlig, må du gi agenten konkrete føringer: hvilke farger, skrifttyper og avstander som skal brukes, og hvilke komponenter som skal være standard. For en modell betyr ordet «vakkert» «medianen fra 2020». Adjektiver endrer ikke resultatet; du trenger nøyaktige parametere.

Jeg undersøkte det samme gapet i en veiledning om ferdige designsystemer med Refero — der tar du noen andres stil (Apple, Linear, Stripe) og gir den til agenten. Google Stitch angriper det fra motsatt side: I stedet for å låne stilen til noen andre genererer du din egen ut fra beskrivelsen din.

Hva er Google Stitch, og hvordan hjelper det?#

Stitch er et eksperiment fra Google Labs som ble introdusert på Google I/O i mai 2025. Du skriver i promptfeltet hvordan du vil at appen skal se ut (eller laster opp et skjermbilde, en skisse på en tavle eller en konkurrentside), og Stitch lager grensesnittskjermer på et uendelig lerret. Under panseret bruker det Gemini 2.5 Pro og Flash. Gemini 3 ble lagt til i desember 2025 for mer polerte oppsett.

Dette er nyttig for oss:

• Vibe Design — beskriv følelsen med ord («minimalistisk og premium, som Stripe») og få flere visuelle retninger å velge mellom.
• Referanser — last opp et bilde fra Dribbble eller Pinterest; Stitch beholder oppsettet og bruker kravene dine.
• Eksport i tre formater: til Figma (med redigerbare lag), som ren HTML/CSS og via MCP, rett til agenten.

Forskjellen fra ferdige stiler som Refero er viktig. Refero er et bibliotek med designsystemer som allerede er hentet ut fra ekte nettsteder; du velger et eksisterende merke. Stitch lager et system for produktet ditt fra bunnen av. Mangler du et referansedesign og vil ha ditt eget uttrykk? Da bruker du Stitch. Trenger du raskt å bruke stilen til et kjent produkt? Da bruker du Refero. De dekker ulike trinn og utfyller hverandre godt.

Claude har også sin egen innebygde designmodus; jeg skrev om den i en veiledning om Claude Design. Stitch skiller seg ut ved at det leverer et ferdig system i en ekstern fil som agenten leser hver gang den bygger noe.

Krav for å få tilgang til Google Stitch#

Stitch er ikke tilgjengelig i alle land: En Google-representant skrev på det offisielle forumet at tjenesten er tilgjengelig for brukere over 18 år i 212 land, og at listen utvides. I begrensede områder ser du nøyaktig én melding når du besøker tjenesten: «Sorry, Stitch is unavailable.»

Du trenger en Google-konto — du kan bare logge inn med en slik konto.

Når Stitch-MCP-autorisasjon blokkerer Claude Code-arbeidsflyten#

Det finnes mye tull på nettet om tilkobling av MCP, og halvparten av instruksjonene fungerer rett og slett ikke. Mange veiledninger, også populære engelskspråklige, anbefaler for eksempel å installere pakken @google/stitch-mcp med kommandoen npx -y @google/stitch-mcp@latest. Den pakken finnes ikke — npm returnerer 404. Ikke kopier denne kommandoen; du kaster bort tiden. Velg derfor integrasjoner som er bekreftet gjennom installasjon og verifisering på en reell oppgave.

Det eksterne MCP-forsøket her ga Incompatible auth server i Claude Code. Den observerte feilen er verken en fungerende oppskrift eller bevis for at alle nåværende konfigurasjoner feiler. Ikke fortsett med et uspesifisert «koble til MCP»-trinn. Bruk manuell HTML/CSS-eksport nedenfor inntil en eksakt kompatibel konfigurasjon er verifisert.

Det uavklarte MCP-forsøket gir ikke et komplett autorisasjonsoppsett her. Følg HTML/CSS-eksporten i arbeidsflyten nedenfor. Opprett ikke en nøkkel eller endre MCP-konfigurasjon bare for denne manuelle ruten.

Arbeidsflyten med Stitch og DESIGN.md er kontekstteknikk i sin reneste form: Du legger inn eksakte tokener i Claude-konteksten på forhånd, og det bygger strengt etter dem uten å «gjette hva jeg mente». Den fullstendige metoden samler alle tre pilarene — AI-klonen, den andre hjernen og kontekstteknikk. Denne kombinasjonen gjør Claude fra en «assistent som gjetter» til et verktøy som gir forutsigbare resultater.

Hva er DESIGN.md, og hvorfor er den bedre enn et skjermbilde?#

Her er en viktig detalj de fleste instruksjoner får feil: Det finnes ingen «Export DESIGN.md»-knapp i Stitch. Agenten setter sammen filen selv. Ifølge Googles offisielle codelab lyder prompten omtrent slik: «gå gjennom Stitch MCP til prosjektet, hent ut fargepaletten og typografien, og sett dem sammen i en DESIGN.md». Dette codelabet forutsetter fungerende MCP-forbindelse. I den manuelle ruten her leser Claude Code eksportert HTML/CSS og skriver den strukturerte filen i prosjektroten. Den må flagge manglende tokens fremfor å gjette dem fra et bilde.

DESIGN.md inneholder konkrete verdier i stedet for adjektiver:

# 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)

For å få Claude Code til å bruke filen peker du til den fra CLAUDE.md (for eksempel med linjen «Bruk DESIGN.md som grunnlag for designet av alle komponenter») — da henter agenten inn de samme tokenene i hver økt. En knapp fra mandag og et kort fra fredag får samme stil fordi de har én sannhetskilde.

To lokale referanser virker sammen her. DESIGN.md inneholder systemregler: farger, typografi, avstand og komponenter. Eksportert Stitch-HTML/CSS og ressurser gir det konkrete skjermoppsettet. MCP er valgfritt og ingen forutsetning for denne ruten.

Hvordan bygger du et nettsted: hele veien fra tekst til design#

Her er hele prosessen i rekkefølge:

1. Åpne Stitch. Kontroller tilgjengelighet i landet ditt og logg inn på stitch.withgoogle.com med Google-kontoen.
2. Beskriv produktet. Oppgi skjermer og brukerreise; bekreft eller rediger foreslått skjermliste.
3. Legg til referanse. Last opp tiltenkt skjermbilde og angi farger, typografi og oppsett som skal beholdes.
4. Generer og finpuss. Velg én skjerm og forbedre den før designet utvides.
5. Eksporter valgt skjerm som HTML/CSS. Lagre filene og nødvendige ressurser i prosjektets referansemappe. Åpne eksportert HTML lokalt og kontroller at det er skjermen du valgte. Et skjermbilde alene bærer ikke eksakte CSS-verdier.
6. Sett sammen DESIGN.md fra lokal eksport. Be Claude Code lese HTML/CSS, registrere faktiske verdier for farge, skrift, avstand, layout og komponenter og liste mangler til din avgjørelse. Ruten krever verken Stitch-API-nøkkel eller MCP-autentisering.
7. Bygg og kontroller én side. Gi Claude Code promptene nedenfor og erstatt mappenavnet med faktisk lokal eksportbane:

Les Stitch-HTML/CSS-eksporten i refs/stitch-export/. Opprett DESIGN.md i prosjektroten med verdier som finnes i filene. Identifiser manglende verdier fremfor å finne dem på.

Bygg én side fra DESIGN.md og lokal Stitch-eksport. Hold komponentene modulære. Sammenlign gjengitt side med eksporten ved skrivebords- og mobilbredder. Verifiser deretter navigasjon og interaktive tilstander separat.

Derfra er det Claude Code som gjør resten: navigering mellom skjermene, responsivitet ved bruddpunktene i DESIGN.md, animasjoner og interaktivitet. Stitch leverer statiske skjermer og en klikkbar prototype, men bygger ikke fungerende logikk eller publiserer til webhotell — det er agentens jobb.

Hvordan blir du kvitt «AI-utseendet»: Hva bør du endre?#

Her er de konkrete punktene der et nettsted slutter å røpe seg:

• Farge. Lilla indigo-500 er det første avslørende tegnet. Angi primærfargen og aksentfargen som eksakte heksverdier direkte i DESIGN.md. Hver agent tolker «merkevareblå» på sin egen måte.
• Skrifttype. Inter er det tryggeste og derfor mest gjenkjennelige «AI-skriftvalget». Velg en uttrykksfull kombinasjon: for eksempel en sans serif til brødtekst og en skrifttype med særpreg til overskrifter. Angi den i Stitch-designet og skriv den inn i DESIGN.md.
• En referanse i stedet for et adjektiv. Modellen tolker «gjør det moderne» som «medianen fra 2020». Den følger «bruk oppsettet fra denne siden» bokstavelig når du gir den et ekte skjermbilde. Last opp et referansebilde til Stitch; du kan ikke formidle smak med ord.
• Avstander og luft. Et malbasert oppsett kjennes igjen på trange, identiske blokker. Angi en romslig avstandsskala i DESIGN.md — da plasserer agenten elementene friere.

Spesifikke føringer slår subjektive adjektiver. Stitch er i bunn og grunn en maskin som oversetter «jeg vil ha det slik» til presise tokener, slik at agenten ikke har noe igjen å gjette.

Google Stitch eller alternativer: hva bør du velge?#

Jeg sammenlignet verktøyene ut fra det som faktisk betyr noe når du driver med vibe coding på et begrenset budsjett:

Arbeidsflyten jeg bruker selv: Stitch for å utforske designet → Claude Code for å bygge nettstedet og logikken. For en vibe coder med begrenset budsjett vinner Stitch fordi det er gratis og lager et unikt uttrykk for produktet ditt fra bunnen av. Hvis du vil forstå hele utvalget av verktøy på markedet, har jeg skrevet om dem i hovedartikkelen hva du kan kode med i 2026.

Hva er begrensningene til Google Stitch?#

Her er en ærlig liste, så du slipper å bli skuffet før du kommer til den tredje skjermen:

• Bare grensesnitt. Ingen backend, database eller publisering til webhotell. Du trenger Claude Code til det (eller Lovable hvis du vil ha alt på ett sted).
• Begrenset redigering i verktøyet. Du kan ikke flytte et enkelt element med musen — du kan bare endre det via en prompt og generere på nytt. Det er ikke Figma.
• Ikke-determinisme. Samme prompt gir ulike resultater. Bra når du utforsker ideer, upraktisk når du trenger gjentakbare resultater.
• Kvote. Du når grensen for gratis genereringer (for tiden daglig); du kan ikke kjøpe flere, så du må vente på at kvoten nullstilles. Det nøyaktige antallet varierer, så sjekk grensesnittet.
• Eksperimentell status. Google Labs forplikter seg ikke til langsiktig støtte. Tjenesten kan endres eller legges ned.
• Geografiske begrensninger og MCP-autorisasjonsproblemet i Claude Code, som er nevnt i delene om tilgjengelighet og oppsett.

Stitch passer dårlig hvis du har en streng merkevareveileder for mange prosjekter, hvis designet allerede finnes i Figma, eller hvis du trenger en app med en backend som allerede er publisert.

Hva nå?#

Bygg den minste arbeidsflyten med én skjerm: Beskriv produktet i Stitch, generer hjemmesiden, eksporter HTML/CSS og be Claude Code sette sammen DESIGN.md og bygge siden fra de lokale filene. Når du ser at den lilla gradienten forsvinner av seg selv, blir resten enklere.

Å designe med Stitch er én teknikk innen kontekstteknikk. Hele systemet kombinerer en AI-klone, den andre hjernen og kontekstteknikk, slik at Claude kan støtte seg på forberedte regler og kontekst.

AI-klonen, den andre hjernen og kontekstteknikk er viktige for produktet. Design med Stitch er den første byggeklossen i denne kombinasjonen.

For videre arbeid med modeller kan du gå til Ailoot.