Claude Design, Google Stitch of Figma Make?
Kies Claude Design als je daarna in Claude Code verder bouwt, Google Stitch als je snel schermen wilt die je naar Figma of HTML meeneemt, en Figma Make als je team al in Figma werkt met een eigen bibliotheek. Geen van de drie levert een website die je zo online zet: formulieren, vindbaarheid per pagina, beheer en hosting regel je daarna.
Alle drie maken ze in een paar minuten schermen uit een prompt. Op dat punt lijken ze op elkaar. Het verschil zit in wat er daarna gebeurt: waar je het ontwerp mee naartoe neemt, wat voor code eruit komt en wat je betaalt om door te gaan. Hieronder per tool voor wie hij is, wat je exporteert, wat hij kost en waar hij ophoudt. Daarna een test waarmee je zelf kiest.
Herken je dit?
- Je hebt in twee of drie tools iets gemaakt en weet niet welke je doorzet.
- Het ontwerp is af, maar je weet niet hoe het een website wordt.
- Je credits of je limiet zijn op voordat het ontwerp klaar is.
- Je ontwerper werkt in Figma, jij in een AI-tool, en niets past op elkaar.
Het verschil zit in wat er na het ontwerp gebeurt
Een scherm genereren kunnen ze alle drie goed genoeg. Wie een website wil, moet kijken naar de route erna. Waar gaat het ontwerp heen: naar een codeertool, naar Figma, naar een eigen prototype? En hoe neem je je huisstijl mee, zodat het volgende scherm er net zo uitziet als het eerste?
Claude Design
Van Anthropic, beschikbaar sinds 17 april 2026. Gebouwd voor wie na het ontwerp verder wil in code, of voor wie presentaties en prototypes maakt.
- Toegang: op elk plan van Claude, ook het gratis plan. Het telt mee in dezelfde gebruikslimiet als de rest van Claude; een apart tegoed is er niet meer.
- Export: onder meer een zip, PDF, PPTX, Google Slides en losse HTML, en doorsturen naar Canva. De overdracht aan Claude Code gaat verder waar je in het ontwerp was.
- Huisstijl: je zet een designsysteem op vanuit een GitHub-repository, designbestanden, uploads of je lokale code. Elk nieuw project neemt dat systeem automatisch over.
- Beperkingen: geen eigen Figma-export, nog geen versiegeschiedenis, en samen tegelijk in één ontwerp werken is volgens Anthropic nog basaal.
De officiële uitleg staat in de handleiding van Claude Design.
Google Stitch
Een experiment van Google Labs. Gebouwd voor wie snel schermen wil verkennen en ze daarna naar een ontwerper in Figma of naar code wil brengen.
- Export: naar Figma, naar HTML met Tailwind, en naar Google AI Studio en Antigravity. Echte applicatiecode maak je via AI Studio, niet in Stitch zelf.
- Huisstijl: Stitch bewaart designregels in een DESIGN.md, die je tussen projecten en andere tools meeneemt. Hoe je die schrijft, staat in een DESIGN.md maken voor je AI-tools.
- Voor ontwikkelaars: sinds maart 2026 is er een MCP-server en een SDK, zodat een codeertool Stitch rechtstreeks kan gebruiken.
- Kosten: Google publiceert er geen prijslijst voor. Reken erop dat de voorwaarden van een Labs-experiment kunnen veranderen.
- Beperkingen: Stitch maakt schermen en front-end code. Een backend, een formulier dat mailt of een CMS maakt het niet.
Wat Google zelf over de laatste versie schrijft, staat in de aankondiging van Stitch op de blog van Google.
Figma Make
Onderdeel van Figma. Gebouwd voor teams die al in Figma werken en een werkend prototype willen op basis van hun eigen ontwerpen.
- Toegang: volledig beschikbaar voor Full seats op een betaald plan. Op andere plannen en seats kun je het proberen.
- Kosten: Make werkt op AI-credits, en elke prompt kost er een aantal, afhankelijk van de taak. Een Full seat krijgt 500 credits per maand op het gratis Starter-plan, met een daglimiet van 150, en 3.000 op het Professional-plan. Credits vervallen aan het eind van de maand.
- Huisstijl: stijl uit een bibliotheek van je team meegeven kan alleen op een betaald plan.
- Export en publiceren: code exporteren kan met een Full of Dev seat. Gepubliceerde apps zijn openbaar via hun adres, maar zoekmachines indexeren ze standaard niet. Op het Starter-plan publiceer je alleen op het open web als je ook naar de Figma Community publiceert.
- Beperkingen: de koppeling met Supabase zet eenvoudige opslag op, geen volledige SQL-database. Hoeveel credits een opdracht kost, weet je vooraf niet.
De details staan in de veelgestelde vragen over Figma Make en in hoe AI-credits werken.
Zo kies je
Bouw je na het ontwerp verder in Claude Code, of wil je dat iemand anders dat doet, dan sluit Claude Design het best aan: de overdracht neemt het ontwerp mee. Moet een ontwerper het in Figma afmaken, dan zijn Stitch en Figma Make de logische keuze. Werkt je team al in Figma met een eigen bibliotheek, dan heeft Figma Make het voordeel dat je huisstijl er al in zit.
Twijfel je, test dan met één pagina in twee tools.
Een test met één pagina
- Schrijf je huisstijl één keer op, in een DESIGN.md of als lijst met kleuren, lettertypes en verboden patronen.
- Geef beide tools dezelfde prompt en dezelfde huisstijl.
- Exporteer het resultaat als HTML of code, niet als screenshot.
- Open de export in je browser en bekijk de broncode: staat de tekst in de HTML, of verschijnt hij pas na JavaScript?
- Maak het venster 390 pixels breed en kijk of de pagina nog werkt.
- Tel de kleuren in de code. Hoe dat gaat, staat in waarom is mijn AI-design inconsistent.
Ontwerp de homepage van een installatiebedrijf.
Secties: een kop met één knop naar de offerteaanvraag, de diensten, het werkgebied, contact.
Gebruik alleen de kleuren en lettertypes uit DESIGN.md.
Geen stockfoto's, geen verzonnen reviews, geen verzonnen cijfers of klantlogo's.De tool met de beste export wint, niet de tool met het mooiste eerste scherm.
Veelgemaakte fouten
- Kiezen op het eerste scherm. Het eerste resultaat zegt weinig. Het tiende scherm, en de export ervan, zeggen veel meer.
- Denken dat de export een website is. Een HTML-export is een begin. Een domein, een formulier dat echt mailt en hosting horen er nog bij; dat staat in een HTML-export van je AI-design online zetten.
- Je huisstijl per tool opnieuw uitleggen. Schrijf hem één keer op en geef overal hetzelfde bestand mee, anders krijg je per tool een andere stijl.
- Credits opmaken aan kleine wijzigingen. In Figma Make kost elke prompt credits. Een tekst of een kleur pas je sneller en goedkoper aan in de code-editor van Make zelf.
Wanneer je hulp nodig hebt
Heb je gekozen en moet het ontwerp een echte website worden, dan is dat precies wat we doen bij AI-design omzetten naar een echte website: met een CMS, formulieren, hosting en beheer. Per tool staat de route in van Claude Design naar een echte website en van Google Stitch naar een echte website. Staat er al een site die Google niet vindt, kijk dan bij AI-website niet gevonden in Google. Alle gidsen staan in het overzicht van AI-design.
Veelgestelde vragen
Welke van de drie is gratis?
Kan ik van Claude Design naar Figma?
Welke tool maakt de beste code?
Veranderen deze voorwaarden nog?
Verder lezen
Een ontwerp uit Claude Design, Stitch of Figma Make dat een echte website moet worden, en dat er niet als AI uit mag zien.
- Design omzetten naar website
- Je ontwerp uit Claude Design, Google Stitch, Figma Make of een screenshot wordt een website die snel laadt, gevonden wordt en die je zelf bijhoudt.
- AI-website niet in Google
- Je site uit Lovable, Bolt, v0 of Claude Code staat niet in Google. Vaak krijgt een zoekmachine een lege pagina. Wij zorgen dat elke pagina als HTML klaarstaat.
- AI-design laten verbeteren
- Een review van je AI-site met de fixes erbij: de AI-patronen eruit, consistentie, typografie, mobiel en toegankelijkheid. Vaste prijs na een blik op je site.
- Claude Design naar website
- De HTML-export of de overdracht aan Claude Code, en wat je daarna nog regelt: beheer, een formulier, SEO per pagina en hosting.
- Stitch naar website
- Exporteren naar Figma of naar HTML met Tailwind, DESIGN.md meenemen, en bouwen wat Stitch niet maakt: alles achter de schermen.
- HTML-export online zetten
- Statische hosting, je eigen domein, HTTPS, een contactformulier dat echt mailt en bezoekers meten met een cookiemelding.
- AI-design in WordPress
- Waarom HTML plakken niet werkt, en hoe je het ontwerp nabouwt: als eigen blokthema, met patronen in je huidige thema of in een pagebuilder.
- AI-design in Framer of Webflow
- Importeren via Figma of de browserextensie, nabouwen met componenten en variabelen, en terugkerende inhoud in CMS-collecties.
- Teksten zelf aanpassen
- Waarom elke tekstwijziging nu een prompt is, en drie manieren om teksten bewerkbaar te maken: eigen bestanden, een git-CMS of een headless CMS.
- Kapot op mobiel
- Vaste breedtes, koppen die van het scherm lopen, menu’s die alleen op hover werken en een pagina die zijwaarts schuift: zo test en repareer je het.
- Inconsistent AI-design
- Elke pagina een ander grijs, elke knop een andere hoek: waarom een AI-tool per scherm nieuwe waarden kiest, en wat je ertegen doet.
- DESIGN.md maken
- Eén bestand met je kleuren, typografie, afstanden, componenten en verboden patronen, dat je designtool en je codeer-agent bij elke opdracht lezen.
- Design tokens voor AI
- Kleuren, lettergroottes, afstanden en afrondingen als benoemde variabelen in je code, zodat een AI-tool kiest uit jouw set in plaats van zelf waarden te verzinnen.
- Huisstijl in AI-design
- Je logo als SVG, de kleurwaarden uit je huisstijlhandboek en de echte fontbestanden aanleveren, en daarna controleren waar de tool toch afweek.
- AI verandert te veel
- Je vraagt een andere knopkleur en de hele sectie verschuift. Waarom dat gebeurt, en hoe je met afbakening, versiebeheer en vaste componenten alleen verandert wat je bedoelt.
- Toegankelijk AI-design
- Lichtgrijze tekst, verdwenen focusranden, lege alt-teksten en menu’s die niet met het toetsenbord werken: zo vind en repareer je ze in een AI-design.
- Haperende scroll-animaties
- Blokken die bij het scrollen invliegen, haperen op een telefoon of laten de pagina verspringen. Waarom, en hoe je ze met CSS en een paar regels JavaScript licht maakt.
- AI-website herkennen
- Acht keuzes die een AI-tool maakt als niemand iets anders vraagt, en per keuze waar hij vandaan komt.
- Minder generiek maken
- Zes ingrepen die een AI-website uit het gemiddelde halen, in de volgorde waarin ze het meeste doen.
- Designprompt zonder AI-look
- De acht onderdelen van een prompt die een AI-designtool keuzes geeft in plaats van ruimte voor zijn standaard.
- AI-teksten herkennen
- Typische Nederlandse AI-zinnen, waarom ze zo klinken en hoe je ze herschrijft, met voorbeelden voor en na.
- Lettertype kiezen
- Waarom AI standaard Inter kiest, hoe je zelf een combinatie kiest, en hoe je die met de juiste licentie snel en zelf gehost op je site zet.
- AI-afbeeldingen
- Waarom gegenereerde beelden je site goedkoop laten ogen, wat je in plaats daarvan doet, en wanneer je moet melden dat een beeld met AI is gemaakt.
Wij maken van je ontwerp een echte website
De kennismaking is gratis. We reageren binnen één werkdag.