Van Google Stitch naar een echte website
Google Stitch exporteert naar Figma en naar HTML met Tailwind, en legt de designregels vast in een DESIGN.md. Kies Figma als er nog ontworpen wordt, en HTML als het ontwerp vastligt en iemand er code van maakt. Een werkende site wordt het pas als je de schermen samenvoegt tot één project en zelf bouwt wat Stitch niet maakt: formulieren, inloggen en alles wat gegevens opslaat.
Stitch maakt in een paar minuten een reeks schermen die bij elkaar lijken te horen. Wat je daarna hebt, is een ontwerp per scherm. Hieronder staat welke export je kiest, hoe je de schermen samenvoegt tot één site en wat je zelf moet bouwen omdat Stitch het niet doet.
Herken je dit?
- Je hebt acht schermen in Stitch en weet niet of je naar Figma of naar HTML moet exporteren.
- Elk geëxporteerd scherm is een los bestand met een eigen kopie van het menu en de footer.
- Het menu op de contactpagina is net anders dan op de homepage.
- Het formulier, de inlog of de zoekbalk werkt alleen in het ontwerp.
- Een nieuw scherm past niet bij de vorige, omdat je regels uit het eerste gesprek niet meer meetellen.
Stitch ontwerpt schermen, geen werkende site
Stitch is een ontwerptool. Elk scherm staat op zichzelf: een eigen bestand, een eigen kopie van de onderdelen die op elke pagina terugkomen. Dat is handig om te laten zien, en onhandig om bij te houden. Wijzig je in een website het menu, dan wil je dat op één plek doen.
Daarnaast is er geen achterkant. Een formulier in Stitch is opmaak: het heeft geen adres om naartoe te sturen. Een inlogscherm heeft geen accounts. Werkende code, met logica erin, maak je via Google AI Studio. Voor een bedrijfswebsite heb je die stap meestal niet nodig, wel een paar losse diensten.
De export bepaalt wie verder bouwt
Kies de Figma-export als een ontwerper verder werkt, of als je de site in Framer of Webflow wilt bouwen. Die halen hun ontwerp het makkelijkst uit Figma.
Kies HTML met Tailwind als het ontwerp vastligt en jij, een developer of een AI-tool er code van maakt. Tailwind is een set kleine CSS-klassen in de HTML zelf, zoals px-6 voor ruimte links en rechts.
Kies AI Studio als je een app wilt met logica erin, zoals een rekentool of een omgeving waar klanten inloggen. Dat is geen website meer, en het hoort bij apps afmaken en beveiligen.
Zo wordt een Stitch-ontwerp een site
1. Bewaar de DESIGN.md naast je export
Stitch legt kleuren, typografie en componentregels vast in een DESIGN.md. Download dat bestand en zet het in dezelfde map als je export. Claude Code, Cursor en andere tools lezen het mee, zodat nieuwe pagina’s dezelfde regels volgen. Wat er in een goede DESIGN.md hoort, staat in een DESIGN.md maken voor je AI-tools.
2. Kijk hoe Tailwind geladen wordt
Open een geëxporteerd scherm in een teksteditor. Staat er in de head een script van cdn.tailwindcss.com, dan bouwt de browser van elke bezoeker de CSS op bij het laden. Tailwind noemt die Play CDN zelf alleen bedoeld voor ontwikkeling. Bouw de CSS daarom één keer vooraf en laad hem als gewoon bestand.
npm install tailwindcss @tailwindcss/cli
/* src/input.css */
@import "tailwindcss";
@theme {
--color-merk: #1f5c4a;
--font-kop: "Archivo", sans-serif;
}
npx @tailwindcss/cli -i ./src/input.css -o ./css/style.css --minifyStaat er in de export een eigen kleurenset in een script, zet die waarden dan in het @theme-blok. Vervang daarna het script door <link rel="stylesheet" href="/css/style.css">.
3. Maak één versie van elk onderdeel
Leg de schermen naast elkaar en kies per onderdeel de versie die je houdt: de header van de homepage, de footer van de contactpagina. In losse HTML-bestanden blijft dat kopiëren. In een project met componenten staat elk onderdeel één keer. Laat je een AI-tool de schermen ombouwen, zeg dan precies welke versie leidend is.
In de map stitch/ staan zes HTML-schermen uit Google Stitch en een DESIGN.md.
Bouw ze na als pagina’s in dit Nuxt-project.
- Header en footer één keer, als component. Neem de versie uit home.html.
- Gebruik alleen kleuren, lettertypes en afstanden uit DESIGN.md.
- Wijkt een scherm daarvan af, volg DESIGN.md en meld welk scherm het was.
- Elke pagina een eigen title en description.
- Formulieren: alleen de opmaak. De verzending koppelen we apart.4. Bouw wat Stitch niet maakt
Een formulier dat mailt, haal je bij een formulierdienst of je eigen server. Een cookiemelding en statistieken zet je er zelf in. Teksten die je zelf wilt aanpassen, horen in een beheeromgeving: zie zelf teksten aanpassen in je AI-website. Controleer ten slotte de telefoonversie met AI-design kapot op mobiel.
5. Zet het online
Hosting, je eigen domein, HTTPS en het formulier staan stap voor stap in een HTML-export online zetten.
Veelgemaakte fouten
- Elk scherm als losse pagina online zetten. Het werkt op dag één. Bij de eerste wijziging aan het menu pas je acht bestanden aan, en mis je er één.
- De Play CDN laten staan. De site laadt trager en hangt af van een script dat daar niet voor bedoeld is. Vooraf bouwen kost één commando.
- DESIGN.md weggooien na het ontwerpen. Dan kent de volgende tool je regels niet, en krijgt elke nieuwe pagina eigen kleuren en afstanden.
- Een app uit AI Studio zien als een af product. Hij werkt in de preview. Waar hij draait, wie hem bijhoudt en of de gegevens erin veilig staan, moet je nog regelen.
Wanneer je hulp nodig hebt
Zijn er meer dan een paar schermen, moet het formulier aankomen en wil je zelf teksten aanpassen, dan bouwen wij de schermen om tot één site: AI-design omzetten naar een echte website. Lijken de schermen nog niet genoeg op elkaar om te bouwen, begin dan bij AI-design laten verbeteren. De andere gidsen staan bij van AI-design naar een echte website.
Veelgestelde vragen
Kan ik de Stitch-code gebruiken in React of Vue?
Wat is het verschil tussen de Figma-export en de HTML-export?
Kan ik een Stitch-ontwerp in Framer of Webflow gebruiken?
Heeft Stitch een database of inlog?
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.
- 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.
- AI-designtools vergeleken
- Wat Claude Design, Google Stitch en Figma Make kunnen, wat ze kosten, wat je eruit exporteert en waar je vastloopt als het een echte website moet worden.
- 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 bouwen je Stitch-schermen om tot één website
De kennismaking is gratis. We reageren binnen één werkdag.