Google Stitch + Claude Code: webdesign uden “AI-udseendet”

Flere instruktioner til arbejdet med Ailoot findes i dokumentationen.

Hvorfor ligner websites bygget med Claude Code “AI-sjusk”?#

I det beskrevne praktiske eksempel begyndte arbejdet på hjemmesiden til en opkaldsapp med et tomt projekt og en anmodning om, at Claude Code skulle bygge en landingsside. Resultatet var den klassiske løsning: slate-950 som baggrund, indigo-500 som accentfarve, fed Inter i overskriften og tre ens kort med skygger nedenunder. Samme layout som den første v0, den første Lovable, den første ChatGPT-generering. Jeg omskrev prompten fem gange og tilføjede “premium”, “ikke som alle andre”, “moderne” – siden lignede stadig et WordPress-tema fra 2015.

Logikken er enkel: uden begrænsninger tager modellen det statistiske gennemsnit af det, den har set. Og den har set en million ens landingssider bygget med Bootstrap og Tailwind. Hvis du vil have et resultat, der ikke er gennemsnitligt, skal du give agenten konkrete oplysninger: hvilke farver, hvilke skrifttyper, hvilken afstand, og hvilke komponenter der skal behandles som kanoniske. For en model betyder ordet “smuk” “medianen for 2020”. Adjektiver flytter den ikke; du skal bruge præcise parametre.

Jeg undersøgte den samme forskel i en guide til færdige designsystemer med Refero – dér tager du en andens stil (Apple, Linear, Stripe) og giver den til agenten. Google Stitch griber det an fra den anden side: I stedet for at låne en andens stil genererer du din egen ud fra din beskrivelse.

Hvad er Google Stitch, og hvordan hjælper det?#

Stitch er et eksperiment fra Google Labs, der blev præsenteret på Google I/O i maj 2025. Du skriver i promptfeltet, hvordan du vil have appen til at se ud (eller uploader et skærmbillede, en skitse på en tavle eller en konkurrents side), og Stitch genererer brugerfladeskærme på et uendeligt lærred. Under motorhjelmen bruger det Gemini 2.5 Pro og Flash, og Gemini 3 blev tilføjet i december 2025 for at give mere polerede layouts.

Det, der er nyttigt for os:

• Vibe Design – beskriv stemningen med ord (“minimalistisk og eksklusiv som Stripe”), og få flere visuelle retninger at vælge mellem.
• Referencer – upload et billede fra Dribbble eller Pinterest; Stitch bevarer layoutet og anvender dine krav.
• Eksport i tre formater: til Figma (med redigerbare lag), som ren HTML/CSS og via MCP – direkte til agenten.

Forskellen på Stitch og færdige stilarter som Refero er vigtig. Refero er et bibliotek med designsystemer, der allerede er udtrukket fra virkelige websites; du vælger et eksisterende brand. Stitch genererer et system fra bunden til dit produkt. Har du intet referencedesign og vil skabe dit eget udtryk? Så er Stitch løsningen. Skal du hurtigt anvende stilen fra et velkendt produkt? Så vælg Refero. De dækker forskellige trin og supplerer hinanden godt.

Claude har også en indbygget designtilstand; jeg beskrev den i en guide til Claude Design. Stitch adskiller sig ved at levere et færdigt system i en ekstern fil, som agenten læser, hver gang den bygger noget.

Krav til adgang til Google Stitch#

Stitch er ikke tilgængeligt i alle lande: En Google-repræsentant skrev på det officielle forum, at tjenesten er tilgængelig for brugere på 18 år eller derover i 212 lande, og at listen bliver udvidet. I begrænsede regioner ser du præcis én besked, når du besøger tjenesten: “Sorry, Stitch is unavailable.”

Du skal have en Google-konto – du kan kun logge ind med en sådan.

Når Stitch MCP-godkendelse blokerer Claude Code-arbejdsgangen#

Der er meget vrøvl på nettet om at forbinde MCP, og halvdelen af instruktionerne virker simpelthen ikke. Mange vejledninger (også populære engelsksprogede) anbefaler for eksempel at installere pakken @google/stitch-mcp med kommandoen npx -y @google/stitch-mcp@latest. Den pakke findes ikke – npm returnerer 404. Kopiér ikke kommandoen; du spilder tiden. Af samme grund bør du vælge integrationer, hvor installationen og afprøvningen på en virkelig opgave er blevet bekræftet.

Det beskrevne forsøg med den eksterne MCP-server nåede en Incompatible auth server-fejl i Claude Code. Den observerede fejl er ikke en fungerende opskrift eller bevis for, at enhver aktuel konfiguration fejler. Fortsæt ikke med et uspecificeret “forbind MCP”-trin: Brug den manuelle HTML/CSS-eksportvej nedenfor, indtil en præcis kompatibel konfiguration er verificeret.

Arbejdsgangen med Stitch og DESIGN.md er kontekstteknik i sin reneste form: Du lægger præcise tokens ind i Claudes kontekst på forhånd, og det bygger strengt efter dem uden at “gætte, hvad jeg mente”. Den fulde metode forener alle tre grundpiller – AI-klonen, den anden hjerne og kontekstteknik. Det er denne kombination, der forvandler Claude fra en “assistent, der gætter” til et værktøj, der leverer forudsigelige resultater.

Hvad er DESIGN.md, og hvorfor er den bedre end et skærmbillede?#

Her er en vigtig detalje, som de fleste instruktioner tager fejl af: Der findes ingen knap til at “eksportere DESIGN.md” i Stitch. Agenten sammensætter selv filen. Ifølge Googles officielle codelab lyder prompten nogenlunde sådan: “gå via Stitch MCP til projektet, udtræk farvepaletten og typografien, og sammensæt en DESIGN.md ud fra dem”. Dette codelab forudsætter en fungerende MCP-forbindelse. I den manuelle vej her læser Claude Code i stedet eksporteret HTML/CSS og skriver den strukturerede fil i projektroden; den skal markere manglende tokens frem for at gætte dem fra et billede.

DESIGN.md indeholder konkrete detaljer 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)

Hvis du vil have Claude Code til at bruge den, henviser du til filen fra CLAUDE.md (for eksempel med linjen “Brug designet fra DESIGN.md til alle komponenter”) – så indlæser agenten de samme tokens i hver session. En knap fra mandag og et kort fra fredag får samme stil, fordi der kun er én kilde til sandheden.

To lokale referencer arbejder sammen i opsætningen. DESIGN.md indeholder systemreglerne: farver, typografi, afstande og komponenter. Eksporteret Stitch-HTML/CSS og aktiver leverer det konkrete skærmlayout. MCP er valgfrit og ikke en forudsætning for denne vej.

Hvordan bygger du et website: hele vejen fra tekst til design?#

Her er hele processen i rækkefølge:

1. Åbn Stitch. Kontrollér tilgængelighed i dit land, og log ind på stitch.withgoogle.com med Google-kontoen.
2. Beskriv produktet. Angiv skærme og brugerrejse; bekræft eller redigér den foreslåede skærmliste.
3. Tilføj en reference. Upload det tilsigtede skærmbillede, og angiv farver, typografi og layout, der skal bevares.
4. Generér og finpuds. Vælg én skærm, og forbedr den, før du udvider designet.
5. Eksportér den valgte skærm som HTML/CSS. Gem eksportfiler og nødvendige aktiver i en referencemappe i projektet. Åbn eksporteret HTML lokalt, og kontrollér, at det er den valgte skærm; et skærmbillede alene indeholder ikke præcise CSS-værdier.
6. Sammensæt DESIGN.md fra den lokale eksport. Bed Claude Code læse eksporteret HTML/CSS, registrere faktiske værdier for farver, skrifttyper, afstande, layout og komponenter og opregne manglende værdier til din beslutning. Denne vej kræver ingen Stitch-API-nøgle eller MCP-godkendelse.
7. Byg og kontrollér én side. Giv Claude Code disse prompts, og erstat mappenavnet med eksportens faktiske lokale sti:

Læs Stitch-HTML/CSS-eksporten i refs/stitch-export/. Opret DESIGN.md i projektroden med de værdier, der findes i filerne. Identificér manglende værdier frem for at opfinde dem.

Byg én side fra DESIGN.md og den lokale Stitch-eksport. Hold komponenterne modulære. Sammenlign den renderede side med eksporten ved desktop- og mobilbredder, og verificér derefter navigation og interaktive tilstande særskilt.

Derefter er det Claude Code, der klarer resten: routing mellem skærme, responsivitet ved DESIGN.md-breakpoints, animationer og interaktivitet. Stitch leverer statiske skærme og en klikbar prototype, men bygger ikke fungerende logik eller udgiver til hosting – det er agentens opgave.

Hvordan slipper du af med “AI-udseendet”: Hvad skal du helt konkret ændre?#

Her er de konkrete steder, hvor et website holder op med at afsløre sig selv:

• Farve. Lilla indigo-500 er det første afslørende tegn. Angiv primær- og accentfarver som præcise hexværdier direkte i DESIGN.md. Hver agent fortolker “brandblå” på sin egen måde.
• Skrifttype. Inter er det sikreste valg og derfor den mest genkendelige “AI-skrifttype”. Vælg en udtryksfuld kombination: for eksempel en sans serif til brødteksten og en skrifttype med karakter til overskrifterne. Angiv det i Stitch-designet, og skriv det i DESIGN.md.
• En reference i stedet for et adjektiv. Modellen fortolker “gør det moderne” som “medianen for 2020”. Den tager “brug layoutet fra denne side” bogstaveligt, når du giver den et rigtigt skærmbillede. Upload et referencebillede til Stitch; du kan ikke formidle smag med ord.
• Afstand og luft. Et skabelonagtigt layout kan kendes på sine tætpakkede, ens blokke. Angiv en rummelig afstandsskala i DESIGN.md – så placerer agenten elementerne friere.

Præcision slår subjektive adjektiver. Stitch er i bund og grund en maskine, der omsætter dit “jeg vil have det sådan her” til præcise tokens, så agenten ikke har noget tilbage at gætte på.

Google Stitch eller alternativerne: Hvad skal du vælge?#

Jeg sammenlignede værktøjerne ud fra de forhold, der faktisk betyder noget, når man vibe coder med et begrænset budget:

Den arbejdsgang, jeg selv bruger: Stitch til at udforske designet → Claude Code til at bygge og lave logikken. For en vibe coder med et begrænset budget vinder Stitch, fordi det er gratis og skaber et unikt udtryk fra bunden til dit produkt. Hvis du vil forstå hele udvalget af værktøjer på markedet, har jeg gennemgået dem i hovedartiklen hvad du kan kode med i 2026.

Hvor kommer Google Stitch til kort: Hvilke begrænsninger har det?#

Her er en ærlig liste, så du ikke bliver skuffet efter den tredje skærm:

• Kun brugerflade. Ingen backend, database eller udgivelse til hosting. Det skal du bruge Claude Code til (eller Lovable, hvis du vil have alt samlet ét sted).
• Begrænset redigering i værktøjet. Du kan ikke flytte et enkelt element med musen – kun ændre det med en prompt og generere det igen. Det er ikke Figma.
• Ikke-determinisme. Den samme prompt giver forskellige resultater. Godt til at udforske idéer, upraktisk, når du har brug for gentagelige resultater.
• Kvota. Du rammer grænsen for gratis genereringer (i øjeblikket dagligt); du kan ikke købe flere, så du må vente på, at kvotaen nulstilles. Det nøjagtige antal varierer, så tjek brugerfladen.
• Eksperimentel status. Google Labs forpligter sig ikke til langsigtet support. Tjenesten kan blive ændret eller lukket ned.
• Geografisk begrænsning og MCP-godkendelsesproblemet i Claude Code, som er nævnt i afsnittene om tilgængelighed og opsætning.

Stitch passer dårligt, hvis du har en streng brandguide til mange projekter, hvis designet allerede findes i Figma, eller hvis du har brug for en app med en backend, der allerede er udgivet.

Hvad er det næste?#

Byg den mindste arbejdsgang med én skærm: Beskriv produktet i Stitch, generér hjemmesiden, eksportér HTML/CSS, og bed Claude Code sammensætte DESIGN.md og bygge siden fra de lokale filer. Når du ser den lilla gradient forsvinde af sig selv, bliver resten nemmere.

Design med Stitch er en teknik inden for kontekstteknik. Det komplette system kombinerer en AI-klon, den anden hjerne og kontekstteknik, så Claude kan støtte sig til forberedte regler og kontekst.

AI-klonen, den anden hjerne og kontekstteknik er vigtige for produktet. Design med Stitch er den første byggesten i denne kombination.

Hvis du vil arbejde videre med modeller, kan du gå til Ailoot.