Google Stitch + Claude Code: webbdesign utan ”AI-utseendet”

Ytterligare instruktioner för hur du arbetar med Ailoot finns i dokumentationen.

Varför ser webbplatser byggda med Claude Code ut som ”AI-sörja”?#

I det praktiska fallet som beskrivs började arbetet med startsidan för en samtalsapp i ett tomt projekt och en begäran om att Claude Code skulle bygga en landningssida. Resultatet var det klassiska: slate-950 som bakgrund, indigo-500 som accent, fet Inter i rubriken och tre identiska kort med skuggor under. Samma layout som den första v0, den första Lovable och den första ChatGPT-genereringen. Jag skrev om prompten fem gånger och lade till ”premium”, ”inte som alla andra” och ”modern” – sidan såg ändå ut som ett WordPress-tema från 2015.

Den lila gradienten är ingen slump.

Logiken är enkel: utan begränsningar tar modellen det statistiska genomsnittet av det den har sett. Och den har sett en miljon identiska landningssidor byggda med Bootstrap och Tailwind. För att få ett resultat som inte är genomsnittligt måste du ge agenten detaljer: vilka färger, vilka typsnitt, vilket avstånd, vilka komponenter som ska behandlas som kanoniska. För en modell betyder ordet ”vacker” ”medianen av 2020”. Adjektiv får den inte att ändra kurs; du behöver exakta parametrar.

Jag undersökte samma skillnad i en guide till färdiga designsystem med Refero – där tar du någon annans stil (Apple, Linear, Stripe) och ger den till agenten. Google Stitch tar sig an det från andra hållet: i stället för att låna någon annans stil genererar du din egen – utifrån din beskrivning.

Vad är Google Stitch och hur hjälper det?#

Stitch är ett experiment från Google Labs, som presenterades på Google I/O i maj 2025. Du skriver i promptfältet hur du vill att appen ska se ut (eller laddar upp en skärmbild, en skiss på en whiteboard eller en konkurrents sida), och Stitch genererar gränssnittsskärmar på en oändlig arbetsyta. Under huven använder det Gemini 2.5 Pro och Flash, och Gemini 3 lades till i december 2025 för mer finslipade layouter.

Det här är användbart för oss:

• Vibe Design – beskriv känslan med ord (”minimalistisk och exklusiv, som Stripe”) och få flera visuella riktningar att välja mellan.
• Referenser – ladda upp en bild från Dribbble eller Pinterest; Stitch bevarar layouten och tillämpar dina krav.
• Export i tre format: till Figma (med redigerbara lager), som ren HTML/CSS och via MCP – direkt till agenten.

Skillnaden mot färdiga stilar som Refero spelar roll. Refero är ett bibliotek med designsystem som redan extraherats från riktiga webbplatser; du tar en befintlig varumärkesstil. Stitch genererar ett system från grunden för din produkt. Ingen referensdesign och du vill ha ett eget utseende? Då passar Stitch. Behöver du snabbt tillämpa stilen från en välkänd produkt? Välj Refero. De täcker olika steg och kompletterar varandra väl.

Claude har också ett inbyggt designläge; jag tog upp det i en guide till Claude Design. Stitch skiljer sig genom att det tillhandahåller ett färdigt system i en extern fil som agenten läser varje gång den bygger något.

Krav för att Google Stitch ska vara tillgängligt#

Stitch är inte tillgängligt i alla länder: en Google-representant skrev på det officiella forumet att tjänsten är tillgänglig för användare som är 18 år eller äldre i 212 länder, och att listan växer. I begränsade regioner ser du exakt ett meddelande när du besöker tjänsten: ”Sorry, Stitch is unavailable.”

Du behöver ett Google-konto – du kan bara logga in med ett sådant.

Hur ansluter du Google Stitch till Claude Code via MCP?#

Det finns mycket skräp på nätet om att ansluta MCP, och hälften av instruktionerna fungerar helt enkelt inte. Många guider (även populära engelskspråkiga sådana) rekommenderar till exempel att installera paketet @google/stitch-mcp med kommandot npx -y @google/stitch-mcp@latest. Det paketet finns inte – npm returnerar 404. Kopiera inte det här kommandot; du slösar bara tid. Av samma anledning bör du välja integrationer vars installation och verifiering i en verklig uppgift har bekräftats.

Fjärr-MCP-försöket som beskrivs här nådde Incompatible auth server i Claude Code. Det observerade felet är inget fungerande konfigurationsrecept eller bevis på att varje aktuell konfiguration misslyckas. Fortsätt inte med ett ospecificerat ”anslut MCP”-steg: använd manuell HTML/CSS-export nedan tills en exakt kompatibel konfiguration verifierats.

MCP-delen ovan är ingen verifierad installationsväg: underlaget saknar ett fullständigt proxykommando och en fullständig konfiguration. Skapa inte en nyckel för den manuella vägen nedan. Om du senare får en exakt dokumenterad MCP-konfiguration, verifiera både anslutningen med claude mcp list och en verklig läsning av avsedd design innan du använder den; en anslutningslista ensam bevisar inte designåtkomst.

Arbetsflödet med Stitch och DESIGN.md är kontextteknik i sin renaste form: du lägger in exakta token i Claudes kontext i förväg, och det bygger strikt enligt dem utan att ”gissa vad jag menade”. Den fullständiga metoden förenar alla tre pelarna – AI-klonen, det andra hjärnkontoret och kontextteknik. Det är den här kombinationen som gör Claude till ett verktyg som ger förutsägbara resultat i stället för en ”assistent som gissar”.

Vad är DESIGN.md och varför är det bättre än en skärmbild?#

Här är en viktig detalj som de flesta instruktioner får fel: det finns ingen knapp för att ”Exportera DESIGN.md” i Stitch. Agenten sammanställer filen själv. Enligt Googles officiella codelab ser prompten ungefär ut så här: ”gå via Stitch MCP till projektet, hämta färgpaletten och typografin och sammanställ en DESIGN.md utifrån dem”. Den codelaben förutsätter en fungerande MCP-anslutning. I den manuella vägen här läser Claude Code i stället exporterad HTML/CSS och skriver den strukturerade filen i projektroten; saknade tokenvärden ska markeras, inte gissas från en bild.

DESIGN.md innehåller konkreta detaljer i stället för adjektiv:

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

För att få Claude Code att använda den hänvisar du till filen från CLAUDE.md (till exempel med raden ”Använd designen för alla komponenter från DESIGN.md”) – då hämtar agenten in samma token i varje session. En knapp från måndagen och ett kort från fredagen får samma stil eftersom det finns en enda källa till sanningen.

Två lokala referenser samverkar här. DESIGN.md innehåller systemreglerna — färg, typografi, avstånd och komponenter. Exporterad Stitch-HTML/CSS och tillgångar ger skärmens specifika layout. MCP är valfritt och ingen förutsättning för denna väg.

Hur bygger du en webbplats: hela vägen från text till design?#

Så här ser hela processen ut i rätt ordning:

1. Öppna Stitch. Kontrollera tillgänglighet i ditt land och logga in på stitch.withgoogle.com med Google-kontot.
2. Beskriv produkten. Ange skärmar och användarresa; bekräfta eller redigera föreslagen skärmlista.
3. Lägg till referens. Ladda upp avsedd skärmbild och ange färger, typografi och layout som ska behållas.
4. Generera och finslipa. Välj en skärm och förfina den innan designen utökas.
5. Exportera vald skärm som HTML/CSS. Spara exportfiler och nödvändiga tillgångar i en referensmapp i projektet. Öppna exporterad HTML lokalt och kontrollera att det är vald skärm; en skärmbild ensam innehåller inte exakta CSS-värden.
6. Sammanställ DESIGN.md från lokal export. Be Claude Code läsa exporterad HTML/CSS, dokumentera faktiska färg-, typsnitts-, avstånds-, layout- och komponentvärden och lista saknade värden för ditt beslut. Vägen kräver ingen Stitch-API-nyckel eller MCP-autentisering.
7. Bygg och kontrollera en sida. Ge Claude Code följande prompter och ersätt mappnamnet med faktisk lokal exportsökväg:

Läs Stitch-HTML/CSS-exporten i refs/stitch-export/. Skapa DESIGN.md i projektroten med värdena i filerna. Identifiera saknade värden i stället för att hitta på dem.

Bygg en sida från DESIGN.md och lokal Stitch-export. Behåll modulära komponenter. Jämför renderad sida med exporten i dator- och mobilbredd och verifiera navigering och interaktiva tillstånd separat.

Därefter tar Claude Code över: routing mellan skärmar, responsivitet vid brytpunkterna i DESIGN.md, animationer och interaktivitet. Stitch tillhandahåller statiska skärmar och en klickbar prototyp, men det bygger inte fungerande logik eller publicerar till en webbhotellstjänst – det är agentens uppgift.

Hur blir du av med ”AI-utseendet”: vad ska du ändra exakt?#

Här är de specifika detaljer som gör att en webbplats inte längre avslöjar vad som skapat den:

• Färg. Lila indigo-500 avslöjar det först. Ange primärfärger och accentfärger som exakta hexvärden direkt i DESIGN.md. Varje agent tolkar ”varumärkesblått” på sitt eget sätt.
• Typsnitt. Inter är det säkraste valet och därför det mest igenkännliga ”AI-typsnittet”. Välj en uttrycksfull kombination: till exempel ett sans serif-typsnitt för brödtext och något med karaktär för rubriker. Ställ in det i Stitch-designen och skriv upp det i DESIGN.md.
• En referens i stället för ett adjektiv. Modellen tolkar ”gör det modernt” som ”medianen av 2020”. Den tar ”använd layouten från den här sidan” bokstavligt när det finns en riktig skärmbild. Ladda upp en referensbild till Stitch; du kan inte förmedla smak med ord.
• Avstånd och luft. En mallbaserad layout känns igen på sina trånga, identiska block. Ange en generös avståndsskala i DESIGN.md – agenten kommer att placera ut elementen friare.

Specificitet slår subjektiva adjektiv. Stitch är i grunden en maskin som översätter ditt ”jag vill ha det så här” till exakta token, så agenten har inget kvar att gissa.

Google Stitch eller alternativen: vad ska du välja?#

Jag jämförde verktygen utifrån de faktorer som faktiskt spelar roll när man vibe-kodar med en begränsad budget:

Arbetsflödet jag själv använder: Stitch för att utforska designen → Claude Code för att bygga och skapa logik. För en vibe coder med begränsad budget vinner Stitch eftersom det är gratis och skapar ett unikt utseende från grunden för din produkt. Om du vill förstå hela utbudet av verktyg på marknaden har jag gått igenom dem i huvudartikeln vad du kan koda med 2026.

Var brister Google Stitch: vilka begränsningar har det?#

Här är en ärlig lista så att du inte blir besviken vid den tredje skärmen:

• Bara gränssnitt. Ingen backend, databas eller publicering till webbhotell. Du behöver Claude Code för det (eller Lovable om du vill ha allt på ett ställe).
• Begränsad redigering i verktyget. Du kan inte flytta ett enskilt element med musen – bara ändra det genom en prompt och generera det på nytt. Det är inte Figma.
• Icke-determinism. Samma prompt ger olika resultat. Bra för att utforska idéer, opraktiskt när du behöver upprepningsbara resultat.
• Kvot. Du når gränsen för kostnadsfria genereringar (för närvarande dagligen); du kan inte köpa fler, utan måste vänta tills kvoten återställs. Det exakta antalet varierar, så kontrollera gränssnittet.
• Experimentell status. Google Labs garanterar inte långsiktigt stöd. Tjänsten kan ändras eller läggas ned.
• Geografisk begränsning och autentiseringsproblemet med MCP i Claude Code, som nämns i avsnitten om tillgänglighet och konfiguration.

När Stitch passar dåligt: om du har en strikt varumärkesmanual för många projekt, om designen redan finns i Figma eller om du behöver en app med backend som redan är publicerad.

Vad händer härnäst?#

Bygg det minsta arbetsflödet med en skärm: beskriv produkten i Stitch, generera startsidan, exportera dess HTML/CSS och be Claude Code sammanställa DESIGN.md och bygga sidan från de lokala filerna. När du ser den lila gradienten försvinna av sig själv blir resten lättare.

Att designa med Stitch är en teknik inom kontextteknik. Det fullständiga systemet kombinerar en AI-klon, det andra hjärnkontoret och kontextteknik så att Claude kan förlita sig på förberedda regler och kontext.

AI-klonen, det andra hjärnkontoret och kontextteknik är viktiga för produkten. Att designa med Stitch är den första byggstenen i den här kombinationen.

För att arbeta vidare med modeller kan du gå till Ailoot.