Wat is Google Stitch?
Google Stitch is een AI-designtool van Google waarmee je vanuit een tekstbeschrijving complete schermontwerpen genereert, inclusief design tokens, kleuren en typografie.
Stitch maakt deel uit van Google's nieuwe generatie creatieve AI-tools. In plaats van pixel voor pixel een ontwerp op te bouwen in Figma of Adobe XD, beschrijf je gewoon wat je wil zien. "Een login-scherm met een groot welkomstbericht, een emailveld, een wachtwoordveld en een groene knop." Stitch genereert het complete ontwerp in seconden.
Het platform werkt met projecten en schermen. Een project is je container (bijvoorbeeld "Klantportaal"), en elk scherm is een individuele pagina of view binnen dat project. Je kunt meerdere schermen genereren, varianten maken en ze allemaal voorzien van dezelfde visuele stijl.
In het kort: Google Stitch = jij beschrijft het scherm, AI ontwerpt het. Je krijgt een visueel ontwerp dat je kunt verfijnen, voorzien van een design system en exporteren naar code.
Hoe werkt het technisch?
Stitch draait op Google's Gemini-modellen. Wanneer je een prompt stuurt, analyseert het model je beschrijving en genereert een volledig schermontwerp met correcte layout, spacing, kleuren en typografie. Het resultaat is geen afbeelding maar een gestructureerd ontwerp dat je kunt bewerken en exporteren.
Elk ontwerp bestaat uit componenten: knoppen, invoervelden, kaarten, navigatiebars en meer. Deze componenten respecteren standaard designpatronen, zodat het resultaat er meteen professioneel uitziet.
Claude Design MCP uitgelegd
Via het Model Context Protocol (MCP) kan Claude rechtstreeks met Google Stitch communiceren. Je geeft opdrachten in het chatvenster en Claude bouwt je ontwerpen.
MCP is een open standaard die AI-assistenten zoals Claude verbindt met externe tools en diensten. De Stitch MCP-server geeft Claude toegang tot alle functies van Google Stitch: projecten aanmaken, schermen genereren, design systems beheren en ontwerpen bewerken.
Wat kan Claude via de Design MCP?
Nieuwe projecten aanmaken, bestaande projecten openen en schermen binnen een project bekijken.
Vanuit een tekstprompt een volledig schermontwerp laten maken door Stitch's AI-engine.
Kleuren, lettertypes, hoekrondingen en een licht/donker modus instellen en toepassen op al je schermen.
Meerdere versies van een scherm genereren om verschillende richtingen te verkennen.
Het voordeel: Je blijft in je vertrouwde Claude-omgeving werken. Je hoeft Google Stitch niet apart te openen. Claude stuurt je opdrachten door, ontvangt het resultaat en toont je een preview. Alles vanuit een gesprek.
De MCP-verbinding werkt bidirectioneel: Claude kan data naar Stitch sturen (een prompt, een design system) en data ophalen (een scherm-preview, een lijst van projecten). Dit maakt een naadloze workflow mogelijk.
Van tekst naar schermontwerp
Het kernproces: je beschrijft wat je wil zien, en AI maakt een volledig visueel ontwerp. Hier leer je hoe je dat stap voor stap doet.
Start met een nieuw project in Stitch. Geef het een duidelijke naam zoals "Klantportaal drukkerij" of "Evenementen-app". Dit is je container voor alle schermen.
Beschrijf het scherm dat je wil: "Een overzichtspagina met een lijst van lopende orders, elk met status, klantnaam en deadline. Bovenaan een zoekbalk en filteropties." Wees specifiek over layout en inhoud.
Stitch genereert het ontwerp in enkele seconden. Je krijgt een volledig uitgewerkt scherm met correcte verhoudingen, typografie en kleurgebruik.
Pas het ontwerp aan: "Maak de statuslabels kleurgecodeerd: groen voor klaar, oranje voor in productie, rood voor vertraagd." Stitch past het scherm direct aan.
Niet zeker welke richting je op wil? Laat Stitch meerdere varianten genereren. Vergelijk ze en kies de beste als basis.
Tip: Vermeld altijd het apparaattype (desktop, tablet of mobiel) in je prompt. Stitch optimaliseert de layout automatisch voor het gekozen schermformaat.
Design systems en huisstijl
Een design system zorgt ervoor dat al je schermen dezelfde visuele taal spreken. Met Stitch stel je dit eenmalig in en pas je het toe op elk ontwerp.
Een design system in Stitch bestaat uit meerdere onderdelen die samen de visuele identiteit van je project bepalen. Je kunt kiezen uit presets of alles zelf instellen.
De onderdelen van een design system
| Onderdeel | Wat het doet |
|---|---|
| Kleurenpalet | Primaire kleur, accentkleuren en verzadigingsniveaus. Je kunt een preset kiezen of je eigen hex-codes opgeven. |
| Typografie | Het lettertype voor je hele project: Inter, Roboto, Space Grotesk en meer. Consistent over alle schermen. |
| Vormgeving | De hoekronding van knoppen, kaarten en invoervelden. Van scherp en zakelijk tot rond en speels. |
| Modus | Lichte of donkere modus, met aangepaste achtergrondkleuren voor beide varianten. |
| Design MD | Vrije-tekst instructies in markdown voor specifieke stijlregels die niet in de standaardopties passen. |
Praktisch: Heb je al een huisstijl? Geef Claude je merkkleur als hex-code (bv. #1B8A93), je voorkeurslettertype en je stijlvoorkeuren. Claude maakt het design system aan en past het toe op al je schermen in een keer.
Het design system werkt als een globale sjabloon. Elk nieuw scherm dat je genereert, erft automatisch de kleuren, lettertypes en vormen van je design system. Zo houd je alles consistent zonder handmatig te hoeven controleren.
Van ontwerp naar productie-code
Het echte voordeel van AI-gestuurd ontwerpen: je ontwerp is niet zomaar een plaatje, het is de blauwdruk voor werkende code.
Traditioneel maak je eerst een ontwerp in Figma, dan geeft een developer het door aan code. Met Stitch en Claude vervalt die tussenstap. Je ontwerp bevat al de structuur en componenten die nodig zijn om er direct code van te maken.
Twee routes naar code
Stitch kan schermen exporteren als frontend-code. Het platform genereert HTML, CSS en componentstructuren die je direct kunt gebruiken in je project.
Vraag Claude om het Stitch-ontwerp om te zetten naar productiecode. Claude leest de schermstructuur en genereert React, HTML of een ander framework naar keuze. Je krijgt werkende code die visueel overeenkomt met je ontwerp.
De workflow in de praktijk
Een typische workflow ziet er zo uit: je beschrijft je schermen in Claude, Stitch genereert de ontwerpen, je verfijnt ze tot je tevreden bent, en dan vraag je Claude om de code te schrijven. Het hele traject van idee tot werkende applicatie kan in een enkele sessie.
Claude kan ook context meenemen uit je bestaande codebase. Als je al een project hebt met bepaalde componenten of een specifiek framework, dan schrijft Claude de nieuwe code zodat die naadloos aansluit bij wat er al is.
Belangrijk: De gegenereerde code is een startpunt. Controleer altijd de output en test de functionaliteit. AI is snel maar niet onfeilbaar. Gebruik het als versnelling, niet als vervanging van kwaliteitscontrole.
Praktijkvoorbeelden voor de grafische sector
Concrete toepassingen van AI-gestuurd ontwerpen die relevant zijn voor drukkerijen, sign-bedrijven en grafische professionals.
Een volledig klantportaal met orderstatus, bestandsupload en facturatie-overzicht. Ontworpen in Stitch, gebouwd met Claude Code.
Een visuele tool waar klanten formaat, materiaal en afwerking kiezen en live een prijsindicatie zien. Het schermontwerp dient als basis voor de app.
Een intern scherm met real-time overzicht van orders in productie, capaciteitsbezetting en deadlines. Ontworpen voor groot scherm in de werkplaats.
Een snel ontworpen landingspagina voor een vakbeurs met inschrijfformulier, agenda en standlocatie. In een uur van idee naar live pagina.
Case: Printelligence Infotheek
De pagina's die je nu leest zijn een voorbeeld van de workflow. De layout en het design system van deze Infotheek-reeks zijn ontworpen met AI-tools en gebouwd in HTML via Claude Code. Het design system (kleuren, typografie, componenten) is eenmalig vastgelegd en wordt hergebruikt voor elke nieuwe uitgave.
Dit toont de kracht van een consistente design-workflow: je investeert een keer in je visuele taal en genereert daarna razendsnel nieuwe content die er altijd professioneel uitziet.
Vergelijking met traditionele tools
Hoe verhoudt de AI-aangedreven workflow zich tot de tools die je al kent?
| Aspect | Figma / Adobe XD | Stitch + Claude |
|---|---|---|
| Leercurve | Weken tot maanden | Minuten: je beschrijft wat je wil |
| Snelheid | Uren per scherm | Seconden per scherm |
| Design system | Handmatig opbouwen | Automatisch genereren en toepassen |
| Varianten | Elke variant handwerk | Meerdere varianten in een klik |
| Naar code | Developer nodig | Claude genereert direct code |
| Prijs | Abonnement per gebruiker | Gratis (Stitch) + Claude-licentie |
Nuance: Stitch vervangt Figma niet volledig. Voor complexe interactieve prototypes, animaties en gedetailleerde pixelwerk blijft Figma sterker. Maar voor de snelle route van idee naar werkend ontwerp is de AI-workflow onverslaanbaar.
Wanneer kies je wat?
Gebruik Stitch en Claude als je snel een visueel ontwerp nodig hebt, als je geen designervaring hebt, of als je een prototype wil tonen aan een klant of collega. Kies voor Figma als je een uitgebreid interactief prototype moet bouwen met micro-animaties en pixel-perfecte controle.
De beste aanpak? Combineer beide. Gebruik Stitch voor de eerste ontwerpfase en exporteer naar Figma als je extra verfijning nodig hebt. Of begin in Stitch en ga direct naar code als het ontwerp goed genoeg is.
Tips en best practices
Haal het meeste uit Google Stitch en de Design MCP met deze praktische richtlijnen.
Do's
Stel eerst je kleuren, lettertype en stijl in voordat je schermen gaat genereren. Zo is elk scherm meteen consistent met je huisstijl.
Beschrijf niet alleen wat er op het scherm staat, maar ook de layout: "links een navigatiemenu, rechts de content" werkt beter dan "een pagina met navigatie".
Laat meerdere versies genereren voordat je een richting kiest. Dit kost nauwelijks extra tijd en geeft je veel meer ontwerpopties.
Don'ts
Gegenereerde code is een startpunt, geen eindproduct. Controleer altijd op fouten, toegankelijkheid en responsiveness voordat je publiceert.
Een complex scherm met tientallen elementen? Bouw het op in stappen. Eerst de hoofdstructuur, dan de details per sectie.
Geavanceerde workflows
Als je de basis onder de knie hebt, kun je met deze technieken je designproces verder versnellen.
Design system als merkbewaker
Leg je volledige huisstijl vast in een Stitch design system: primaire kleur, secundaire kleuren, lettertype, hoekrondingen en een markdown-bestand met extra regels. Deel dit met je team zodat iedereen ontwerpen maakt die consistent zijn met je merk.
Multi-device ontwerpen
Ontwerp hetzelfde scherm voor desktop, tablet en mobiel. Stitch past de layout automatisch aan op het gekozen apparaattype. Zo controleer je in minuten of je ontwerp op alle schermformaten werkt.
Iteratief verfijnen met edit-prompts
Na de eerste generatie kun je schermen bewerken met gerichte opdrachten. "Verplaats de zoekbalk naar de bovenkant" of "Maak de kaarten groter en voeg een afbeelding toe." Dit is sneller dan opnieuw genereren en behoudt de elementen die je al goed vindt.
Combineer met Vibe Coding
De krachtigste workflow: ontwerp je schermen in Stitch, exporteer naar code via Claude, en gebruik Claude Code om er een werkende applicatie van te maken. Je gaat van schets naar live product in een enkele sessie, zonder designer of developer in te schakelen.
De volgende stap: Als je comfortabel bent met Stitch en de Design MCP, verken dan de mogelijkheid om je ontwerpen te koppelen aan echte data via MCP-servers. Zo maak je van statische schermen dynamische applicaties. Dat is het gevorderde Builder-niveau.
Meer lezen en bronnen
Handige bronnen om verder te leren en te experimenteren met AI-gestuurd ontwerpen.
Google's AI-designtool voor het genereren van schermontwerpen vanuit tekst. Gratis te gebruiken met een Google-account.
De open standaard die AI-assistenten verbindt met externe tools. Documentatie en specificaties.
De AI-coding assistent van Anthropic. Werkt naadloos samen met de Stitch MCP voor ontwerp-naar-code workflows.
De industriestandaard voor UI-design. Goed om te kennen als aanvulling op AI-tools voor complexe projecten.
Meer gidsen, masterclasses en praktische AI-toepassingen voor de grafische sector.
Je hoeft geen designer te zijn
om professioneel te ontwerpen.Je hebt een visie nodig,
de juiste woorden,
en AI doet de rest.
