Google Stitch + Claude Code: websites ontwerpen zonder de “AI-uitstraling”

Aanvullende instructies voor het werken met Ailoot vind je in de documentatie.

Waarom zien websites die met Claude Code zijn gebouwd eruit als “AI-slop”?#

In het praktijkvoorbeeld begon het werk aan de homepage voor een belapp met een leeg project en een verzoek aan Claude Code om een landingspagina te bouwen. Het resultaat was de klassieker: slate-950 als achtergrond, indigo-500 als accent, vet Inter in de kop en daaronder drie identieke kaarten met schaduwen. Dezelfde lay-out als bij de eerste v0, de eerste Lovable en de eerste ChatGPT-generatie. Ik herschreef de prompt vijf keer en voegde “premium”, “niet zoals iedereen” en “modern” toe — de pagina bleef eruitzien als een WordPress-thema uit 2015.

De logica is eenvoudig: zonder beperkingen neemt het model het statistische gemiddelde van wat het heeft gezien. En het heeft een miljoen identieke landingspagina’s gezien die met Bootstrap en Tailwind zijn gebouwd. Om een resultaat te krijgen dat niet doorsnee is, moet je de agent specifieke aanwijzingen geven: welke kleuren, welke lettertypen, welke tussenruimtes en welke componenten als standaard moeten gelden. Voor een model betekent het woord “mooi” “de mediaan van 2020”. Bijvoeglijke naamwoorden veranderen dat niet; je hebt exacte parameters nodig.

Ik heb dezelfde kloof onderzocht in een gids over kant-en-klare ontwerpsystemen met Refero—daar neem je de stijl van iemand anders (Apple, Linear, Stripe) en geef je die aan de agent. Google Stitch pakt het van de andere kant aan: in plaats van de stijl van iemand anders over te nemen, genereer je je eigen stijl op basis van je beschrijving.

Wat is Google Stitch en hoe helpt het?#

Stitch is een experiment van Google Labs dat in mei 2025 tijdens Google I/O werd geïntroduceerd. In het promptveld beschrijf je hoe de app eruit moet zien (of upload je een screenshot, een schets op een whiteboard of een pagina van een concurrent), waarna Stitch interfaceschermen genereert op een oneindig canvas. Onder de motorkap gebruikt het Gemini 2.5 Pro en Flash. Gemini 3 werd in december 2025 toegevoegd voor verfijndere lay-outs.

Dit is voor ons handig:

• Vibe Design — beschrijf de uitstraling in woorden (“minimalistisch en premium, zoals Stripe”) en krijg meerdere visuele richtingen om uit te kiezen.
• Referenties — upload een afbeelding van Dribbble of Pinterest; Stitch behoudt de lay-out en past je vereisten toe.
• Exporteren in drie formaten: naar Figma (met bewerkbare lagen), als schone HTML/CSS en via MCP, rechtstreeks naar de agent.

Het verschil met kant-en-klare stijlen zoals Refero is belangrijk. Refero is een bibliotheek met ontwerpsystemen die al uit echte websites zijn gehaald; je neemt een bestaand merk. Stitch genereert vanaf nul een systeem voor jouw product. Geen ontwerp als referentie en wil je een eigen uitstraling? Dan gebruik je Stitch. Snel de stijl van een bekend product toepassen? Dan gebruik je Refero. Ze vullen verschillende stappen in en vullen elkaar goed aan.

Claude heeft zelf ook een ingebouwde ontwerpmodus; daarover schreef ik in een gids over Claude Design. Stitch is anders omdat het een kant-en-klaar systeem in een extern bestand levert dat de agent telkens leest wanneer die iets bouwt.

Vereisten voor toegang tot Google Stitch#

Stitch is niet in elk land beschikbaar: een vertegenwoordiger van Google schreef op het officiële forum dat de dienst beschikbaar is voor gebruikers van 18 jaar en ouder in 212 landen en dat de lijst wordt uitgebreid. In beperkte regio’s zie je bij een bezoek precies één bericht: “Sorry, Stitch is unavailable.”

Je hebt een Google-account nodig — je kunt alleen daarmee inloggen.

Wat doe je wanneer Stitch MCP-autorisatie de Claude Code-workflow blokkeert?#

Online staat veel onzin over het verbinden van MCP, en de helft van de instructies werkt simpelweg niet. Veel gidsen, waaronder populaire Engelstalige, raden bijvoorbeeld aan het pakket @google/stitch-mcp te installeren met de opdracht npx -y @google/stitch-mcp@latest. Dat pakket bestaat niet — npm geeft 404 terug. Kopieer die opdracht niet; dat kost je alleen tijd. Kies daarom integraties waarvan de installatie en verificatie bij een echte taak zijn bevestigd.

De beschreven externe MCP-poging gaf in Claude Code Incompatible auth server. Die waargenomen fout is geen werkend installatierecept en bewijst niet dat elke huidige configuratie faalt. Ga niet door met een ongespecificeerde stap “verbind MCP”: gebruik de handmatige HTML/CSS-export hieronder totdat een exacte compatibele configuratie is gecontroleerd.

Voor de hier beschreven handmatige route hoef je geen sleutel of ongespecificeerde proxy in te stellen. Exporteer het geselecteerde scherm als HTML/CSS met de assets, controleer de lokale export en volg de zeven volledige stappen hieronder. Behandel de MCP-verbinding als onopgelost totdat een exacte compatibele configuratie is geverifieerd.

De workflow met Stitch en DESIGN.md is context engineering in zijn puurste vorm: je zet vooraf exacte tokens in de context van Claude, waarna het strikt volgens die tokens bouwt zonder te “raden wat ik bedoelde”. De volledige methodologie combineert de drie pijlers — de AI-kloon, het Tweede Brein en Context Engineering. Die combinatie maakt van Claude een hulpmiddel dat voorspelbare resultaten oplevert in plaats van een “assistent die gokt”.

Wat is DESIGN.md en waarom is het beter dan een screenshot?#

Dit is een belangrijk detail dat de meeste instructies verkeerd weergeven: Stitch heeft geen knop “Export DESIGN.md”. De agent stelt het bestand zelf samen. Volgens de officiële codelab van Google luidt de prompt ongeveer zo: “ga via Stitch MCP naar het project, haal het kleurenpalet en de typografie op en stel daaruit een DESIGN.md samen.” Die codelab veronderstelt een werkende MCP-verbinding. In de handmatige route hier leest Claude Code in plaats daarvan je geëxporteerde HTML/CSS en schrijft het gestructureerde bestand in de projecthoofdmap; het moet ontbrekende tokens markeren in plaats van ze uit een afbeelding te raden.

DESIGN.md bevat specifieke waarden in plaats van bijvoeglijke naamwoorden:

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

Laat Claude Code het bestand gebruiken door er vanuit CLAUDE.md naar te verwijzen (bijvoorbeeld met de regel “Gebruik voor het ontwerp van alle componenten DESIGN.md”) — dan haalt de agent in elke sessie dezelfde tokens op. Een knop van maandag en een kaart van vrijdag krijgen dezelfde stijl, omdat er één bron van waarheid is.

In deze configuratie werken twee lokale referenties samen. DESIGN.md bevat systeemregels voor kleur, typografie, tussenruimtes en componenten. De geëxporteerde Stitch-HTML/CSS en assets leveren de specifieke schermindeling. MCP is optioneel en geen voorwaarde voor deze route.

Hoe bouw je een website: het volledige traject van tekst naar ontwerp#

Dit is het volledige proces, op volgorde:

1. Open Stitch. Controleer beschikbaarheid in je land en meld je met je Google-account aan op stitch.withgoogle.com.
2. Beschrijf het product. Noem schermen en gebruikersreis; bevestig of bewerk de voorgestelde schermenlijst.
3. Voeg een referentie toe. Upload de bedoelde screenshot en geef kleuren, typografie en indeling aan die behouden moeten blijven.
4. Genereer en verfijn. Kies één scherm en werk dat uit voordat je het ontwerp uitbreidt.
5. Exporteer het gekozen scherm als HTML/CSS. Bewaar bestanden en benodigde assets in een referentiemap van je project. Open de export-HTML lokaal en controleer dat dit het gekozen scherm is; alleen een screenshot bevat geen exacte CSS-waarden.
6. Stel DESIGN.md samen uit de lokale export. Laat Claude Code de HTML/CSS lezen, echte kleur-, lettertype-, afstands-, indelings- en componentwaarden vastleggen en ontbrekende waarden voor jouw beslissing opsommen. Deze route vereist geen Stitch-API-sleutel of MCP-authenticatie.
7. Bouw en controleer één pagina. Geef Claude Code deze prompts en vervang de mapnaam door het echte lokale exportpad:

Lees de Stitch-HTML/CSS-export in refs/stitch-export/. Maak DESIGN.md in de projecthoofdmap met de waarden uit die bestanden. Benoem ontbrekende waarden in plaats van ze te verzinnen.

Bouw één pagina vanuit DESIGN.md en de lokale Stitch-export. Houd componenten modulair. Vergelijk de weergegeven pagina met de export op desktop- en mobiele breedte en controleer navigatie en interactieve toestanden afzonderlijk.

Daarna doet Claude Code de rest: navigatie tussen schermen, responsiviteit bij de breakpoints in DESIGN.md, animaties en interactiviteit. Stitch levert statische schermen en een klikbaar prototype, maar bouwt geen werkende logica en publiceert niets op een hostingplatform — dat is de taak van de agent.

Hoe kom je van de “AI-uitstraling” af: wat moet je precies aanpassen?#

Dit zijn de concrete punten waarop een site niet meer meteen herkenbaar is:

• Kleur. Het paarse indigo-500 valt als eerste op. Stel de primaire kleur en accentkleur rechtstreeks in DESIGN.md in als exacte hexwaarden. Elke agent interpreteert “merkkleur blauw” anders.
• Lettertype. Inter is de veiligste en daardoor herkenbaarste “AI-lettertype”. Kies een expressieve combinatie: bijvoorbeeld een schreefloos lettertype voor de hoofdtekst en een karaktervol lettertype voor koppen. Stel dit in het ontwerp van Stitch in en noteer het in DESIGN.md.
• Een referentie in plaats van een bijvoeglijk naamwoord. Het model interpreteert “maak het modern” als “de mediaan van 2020”. De instructie “gebruik de lay-out van deze pagina” neemt het met een echte screenshot letterlijk. Upload een referentieafbeelding naar Stitch; je kunt smaak niet in woorden overbrengen.
• Tussenruimte en ademruimte. Een sjabloonachtige lay-out herken je aan de krappe, identieke blokken. Stel een ruime schaal voor tussenruimtes in DESIGN.md in — de agent zal de elementen vrijer rangschikken.

Specifieke aanwijzingen zijn beter dan subjectieve bijvoeglijke naamwoorden. Stitch is in wezen een machine die je “ik wil het zoals dit” omzet in precieze tokens, zodat de agent niets meer hoeft te raden.

Google Stitch of alternatieven: welke moet je kiezen?#

Ik heb de tools vergeleken op de aspecten die er echt toe doen als je met een beperkt budget aan vibe coding doet:

De workflow die ik zelf gebruik: Stitch om het ontwerp te verkennen → Claude Code om de site en logica te bouwen. Voor een vibe coder met een beperkt budget wint Stitch omdat het gratis is en vanaf nul een unieke uitstraling voor je product maakt. Wil je weten welke tools er op de markt zijn, dan bespreek ik ze in het hoofdartikel waar je in 2026 mee kunt coderen.

Waar schiet Google Stitch tekort: wat zijn de beperkingen?#

Hier is een eerlijke lijst, zodat je niet al bij het derde scherm teleurgesteld raakt:

• Alleen de interface. Geen backend, database of publicatie op een hostingplatform. Daarvoor heb je Claude Code nodig (of Lovable als je alles op één plek wilt).
• Beperkte bewerkingsmogelijkheden in de tool. Je kunt een afzonderlijk element niet met de muis verplaatsen — alleen aanpassen via een prompt en opnieuw genereren. Het is geen Figma.
• Niet-determinisme. Dezelfde prompt levert verschillende resultaten op. Goed om ideeën te verkennen, onhandig als je herhaalbare resultaten nodig hebt.
• Quotum. Je bereikt de limiet voor gratis generaties (momenteel dagelijks); je kunt er geen bijkopen, dus je moet wachten tot het quotum wordt vernieuwd. Het exacte aantal varieert, dus controleer de interface.
• Experimentele status. Google Labs doet geen toezegging voor ondersteuning op lange termijn. De dienst kan veranderen of worden stopgezet.
• Geografische beperkingen en het MCP-autorisatieprobleem in Claude Code, zoals genoemd in de gedeelten over beschikbaarheid en configuratie.

Stitch past minder goed als je een strikte merkgids voor veel projecten hebt, als het ontwerp al in Figma staat of als je een app nodig hebt met een backend die al is gepubliceerd.

Wat nu?#

Bouw de kleinst mogelijke workflow met één scherm: beschrijf het product in Stitch, genereer de homepage, exporteer HTML/CSS en vraag Claude Code om DESIGN.md samen te stellen en de pagina vanuit die lokale bestanden te bouwen. Zodra je ziet dat de paarse gradient vanzelf verdwijnt, wordt de rest makkelijker.

Ontwerpen met Stitch is één techniek binnen context engineering. Het volledige systeem combineert een AI-kloon, het Tweede Brein en context engineering, zodat Claude kan steunen op voorbereide regels en context.

De AI-kloon, het Tweede Brein en context engineering zijn belangrijk voor het product. Ontwerpen met Stitch is de eerste bouwsteen van deze combinatie.

Voor verder werk met modellen kun je naar Ailoot gaan.