Van Claude Design naar een echte website

Claude Design geeft je twee routes naar een website: de export als losse HTML, of de overdracht aan Claude Code, dat het ontwerp in een echt project zet. De HTML-export is genoeg voor één pagina die zelden verandert. Voor een site met meer pagina’s, een formulier en teksten die je zelf aanpast, kies je de overdracht, en regel je daarna beheer, SEO per pagina en hosting.

Damian Madronal Munoz, oprichter

Bijgewerkt op 30 oktober 20266 min leestijd

Claude Design maakt in een middag een ontwerp dat er af uitziet. Anthropic bracht het uit op 17 april 2026. Je exporteert naar Canva, PDF, PPTX of HTML, en je kunt het ontwerp overdragen aan Claude Code. Een Figma-bestand krijg je er niet uit. Hieronder staat wat elke route je oplevert, met de stappen per route, en wat je daarna nog zelf moet bouwen.

Herken je dit?

Je ontwerp staat in Claude Design en je weet niet hoe het op je eigen domein komt.
Je hebt de HTML gedownload en vraagt je af of dat al een website is.
Je vraagt om een tweede pagina, en die krijgt net andere knoppen en afstanden dan de eerste.
Het contactformulier in het ontwerp doet niets als je op verzenden klikt.
Voor elke tekstwijziging ga je terug naar Claude Design en exporteer je opnieuw.

Claude Design maakt een ontwerp, geen website

Claude Design is gemaakt om te laten zien hoe iets eruit moet zien: een pagina, een prototype, een presentatie. Wat in het ontwerp staat, klopt op het scherm. Een website heeft ook dingen die je niet ziet. Een adres waar hij draait. Een plek waar de teksten staan, los van de opmaak. Een dienst die het formulier verstuurt. Een titel en beschrijving per pagina voor Google. Niets daarvan is zichtbaar in een ontwerp, dus de tool maakt het niet.

Dat is geen fout van Claude Design. Het is de grens van wat een ontwerptool doet. Je kiest dus vooraf welke route je neemt, want dat bepaalt hoeveel van dit werk bij jou terechtkomt.

De HTML-export is genoeg voor één pagina

Kies deze route voor een losse pagina die zelden verandert: een aankondiging, een vacature, een eenvoudige visitekaartjessite.

1. Exporteer en open het bestand op je eigen computer

Klik rechtsboven in je project op Export en kies standalone HTML. Open het bestand in je browser. Klik elke link aan, kijk of de lettertypes en afbeeldingen laden en verklein het venster tot telefoonbreedte. Wat hier al misgaat, gaat online ook mis.

2. Zet erin wat een zoekmachine leest

Open het bestand in een teksteditor en kijk naar het begin. Daar horen de taal, een titel en een beschrijving te staan. Ontbreken ze, of staat de taal op Engels, pas het dan aan.

<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Installatiebedrijf voor warmtepompen | Bedrijfsnaam</title>
  <meta name="description" content="Wij plaatsen en onderhouden warmtepompen. Binnen een week een offerte.">
</head>

Het begin van de HTML: taal, schaal op mobiel, titel en beschrijving van deze ene pagina.

3. Zet het online

In het Export-menu staan ook diensten waar je het ontwerp direct naartoe stuurt, waaronder Netlify en Vercel. Dat geeft je snel een link om te delen. Voor je eigen domein, HTTPS en een formulier dat echt mailt, volg je een HTML-export online zetten. Die stappen zijn voor elke tool gelijk.

Met Claude Code wordt het ontwerp een project

Heeft je site meer dan één pagina, of wil je straks zelf teksten aanpassen, neem dan deze route. Claude Code bouwt het ontwerp in echte code, in een project dat je kunt bijhouden.

1. Begin met een framework dat vooraf bouwt

Maak eerst een leeg project in een framework dat elke pagina vooraf als HTML klaarzet. Wij bouwen in Nuxt; deze site draait er zelf op. Next.js en Astro kunnen het ook.

npm create nuxt@latest mijn-site
cd mijn-site

Een nieuw Nuxt-project in de map mijn-site.

2. Draag het ontwerp over

Kies in Claude Design bij Export voor de overdracht aan Claude Code: naar Claude Code op je eigen computer, of naar Claude Code Web. In Claude Code haal je het ontwerp met het commando /design in je project. Claude Code werkt dan verder vanuit je ontwerp, niet vanuit een screenshot.

3. Geef een opdracht met grenzen

Zonder grenzen zet Claude Code alles in één bestand, of verzint het effecten die niet in het ontwerp stonden. Schrijf daarom op hoe het project in elkaar moet zitten.

Bouw het ontwerp uit Claude Design na in dit Nuxt-project.
- Eén component per onderdeel dat terugkomt: header, footer, knop, kaart, formulier.
- Kleuren, lettertypes en afstanden als CSS-variabelen in één bestand.
- Elke pagina een eigen route, met een eigen title en description via useSeoMeta.
- Teksten niet in de componenten, maar in bestanden in content/.
- Prerender alle pagina’s, zodat elke pagina als HTML klaarstaat.
- Verander niets aan het ontwerp: geen nieuwe kleuren, schaduwen of animaties.

Een opdracht voor Claude Code: bouwstenen, teksten apart en elke pagina vooraf gebouwd.

Waarom die variabelen in één bestand moeten, staat in design tokens zodat AI consistent blijft.

4. Controleer de build, niet de preview

De preview van Claude Code draait in je browser, met JavaScript. Google krijgt de gebouwde bestanden. Bouw de site en zoek een zin uit een pagina terug in de HTML.

npm run generate
grep -c "Onze diensten" .output/public/diensten/index.html

Bouwt de site als losse HTML-bestanden en telt hoe vaak een zin in de dienstenpagina staat.

Krijg je 0 terug, dan staat de tekst niet in de HTML en wordt hij pas in de browser opgebouwd. Hoe je dat op de live site test, staat bij AI-website niet gevonden in Google.

Na beide routes maak je dit zelf

Claude Design levert geen beheeromgeving. Wil je teksten aanpassen zonder code of prompt, lees dan zelf teksten aanpassen in je AI-website. Het formulier verstuurt niets tot je het aan een dienst of server koppelt; dat staat in de hostinggids. En is het ontwerp alleen op desktopbreedte gemaakt, dan moet de mobiele versie er nog bij: AI-design kapot op mobiel.

Veelgemaakte fouten

Elke pagina los laten ontwerpen en exporteren. Je krijgt vijf HTML-bestanden met vijf versies van dezelfde header. Een nieuw menu-item is dan vijf keer werk, en de versies lopen steeds verder uit elkaar.
De preview als bewijs nemen. In Claude Design werkt alles, omdat er niets hoeft te werken. Test op het echte adres: het formulier, de links, de lettertypes en de snelheid op een telefoon.
Claude Code laten verbeteren zonder dat je erom vroeg. Een vage opdracht als “maak het mooier” levert nieuwe effecten en verschoven marges op. Waarom dat gebeurt, staat in AI past meer aan dan je vraagt.
Teksten in de componenten laten staan. Dan is elke tekstwijziging een codewijziging, en blijf je afhankelijk van een prompt voor een komma.

Wanneer je hulp nodig hebt

Wil je het ontwerp precies zo live, met een formulier dat aankomt, teksten die je zelf aanpast en een plek in Google, dan bouwen wij het om: AI-design omzetten naar een echte website. Staat de site online en wordt hij niet gevonden, begin dan bij AI-website niet gevonden in Google. Alle gidsen over ontwerpen met AI staan bij van AI-design naar een echte website.

Veelgestelde vragen⁠

Kan ik vanuit Claude Design naar Figma exporteren?

Niet rechtstreeks. Figma staat niet in het exportmenu. Wil je het ontwerp in Figma verder uitwerken, dan is Google Stitch de tool die dat wel kan; zie van Google Stitch naar een echte website.

Is de HTML uit Claude Design goed genoeg voor Google?

De tekst staat in de HTML, dus Google kan hem lezen. Wat je zelf toevoegt: een eigen titel en beschrijving per pagina, de juiste taal in de HTML-tag en een sitemap.

Kan ik de export in WordPress zetten?

Niet door hem te plakken. Je bouwt het ontwerp na in een thema of met blokken. Hoe dat gaat, staat in je AI-design in WordPress zetten.

Kan Claude Code ook mijn bestaande site aanpassen naar het nieuwe ontwerp?

Ja, als die site in code staat die Claude Code kan openen. Geef dan per pagina op wat er verandert en wat blijft, anders past het meer aan dan je vroeg.

Verder lezen⁠

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.
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.
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 maken van je Claude Design-ontwerp een website⁠

De kennismaking is gratis. We reageren binnen één werkdag.

Plan een kennismaking Bel direct