Je kunt in één middag van een Figma-ontwerp naar een live, gedeployde website gaan met Claude — geen codeerervaring nodig. De workflow is eenvoudig: ontwerp in Figma, exporteer of beschrijf het ontwerp aan Claude, genereer de code, deploy op Vercel of Netlify. Het kost helemaal niets als je gratis niveaus gebruikt.

Mensen plaatsen "$5.000 website in 2 uur"-clips op X, maar de meeste slaan de daadwerkelijke stappen over. Deze gids vult die gat. Elke prompt is opgenomen, elk beslissingspunt is uitgelegd, en de afwegingen zijn eerlijk.

Snelle feiten
Stack
Figma → Claude → Vercel of Netlify
Tijd
1,5–3 uur voor een website met 4–6 pagina's
Kosten
Gratis niveaus, of ~€20/mnd met Claude Pro
Vaardigheid
Geen codering — ontwerpgevoel helpt
Het beste voor
Landingspagina's, portfolio's, kleine bedrijfssites, MVP's
Laatst geverifieerd
April 2026

Waarom Dit Nu Werkt (En Een Jaar Geleden Niet)

Een jaar geleden betekende een ontwerp met AI in code omzetten dat je een screenshot plakte en een ruwe benadering terugkreeg die uren opruiming nodig had. Vandaag betekent Claude's 1M-token contextvenster dat je een volledig designsysteem kunt invoeren — kleuren, typografie, afstand, componentdetails — en code van productiekwaliteit terugkunt krijgen die je ontwerp bij de eerste poging nauwkeurig overeenkomt.

Het belangrijkste inzicht: de kwaliteit van wat je krijgt hangt bijna volledig af van hoe goed je het ontwerp beschrijft. Vage beschrijvingen produceren vage websites. Specifieke, gestructureerde beschrijvingen produceren specifieke, gepolijste websites.

Wat Je Nodig Hebt

Drie tools, allemaal met gratis niveaus:

Figma — voor je ontwerp. Gratis niveau werkt prima. Als je geen ontwerp hebt, pak dan een gratis template uit de Figma Community en pas deze aan.

Claude — voor codegeneratie. Gratis niveau geeft je Sonnet, wat dit goed aankan. Pro (€20/mnd) geeft je Opus 4.7 voor complexere sites.

Vercel of Netlify — voor deployment. Beide hebben gratis niveaus. Verbind je GitHub-repo, push code, en je site gaat live.

Stap 1: Bereid Je Figma-Ontwerp Voor

Voordat je Claude erbij haalt, krijg je Figma-bestand in orde. Deze stap bepaalt de kwaliteit van alles wat volgt.

Je ontwerp moet duidelijk gedefinieerde pagina's hebben (Home, Over, Contact, enz.), consistente afstand en uitlijning, een zichtbare kleurenpalet (noteer de exacte hexwaarden), geïdentificeerde lettertypen, en responsieve breekpunten voor desktop en mobiel indien mogelijk.

Maak je geen zorgen over pixelperfectie. Claude handelt implementatiedetails goed af. Wat belangrijk is, is dat je ontwerp de structuur, hiërarchie en visuele stijl duidelijk communiceert.

Pro tip: Geef je Figma-lagen betekenisvolle namen. "Hero Section," "Feature Cards," "Pricing Table" zijn veel nuttiger voor jou bij het schrijven van prompts dan "Frame 247."

Stap 2: Exporteer Je Ontwerpinformatie

Claude kan een Figma-bestand niet rechtstreeks lezen, dus je moet je ontwerp in informatie omzetten die Claude kan gebruiken. Je hebt drie benaderingen, van gemakkelijkste tot meest nauwkeurig:

Benadering A: Screenshot + beschrijving. Maak volledige schermafbeeldingen van elke pagina in je ontwerp. Upload deze naar Claude samen met een geschreven beschrijving van de lay-out, kleuren en interacties. Dit is de snelste benadering en werkt verrassend goed.

Benadering B: Figma Dev Mode-export. Als je Figma's betaalde plan hebt, gebruik dan Dev Mode om CSS-waarden, spacingtoken en componentspecificaties te exporteren. Feed deze aan Claude naast screenshots voor nauwkeurigere output.

Benadering C: Geschreven ontwerpsspecificatie. Schrijf een gedetailleerde beschrijving van elk onderdeel — header, hero, features, testimonials, footer — inclusief kleuren, lettertypen, grootten en lay-out. Dit kost langer maar geeft je de meeste controle over de output. Als je zonder Figma-ontwerp bouwt, is dit jouw pad.

Stap 3: Schrijf Je Initiële Prompt

Dit is waar de meeste mensen fout gaan. Ze schrijven "bouw me een website die eruitziet als deze screenshot" en krijgen generieke output. Hier is de promptstructuur die consequent kwaliteitsresultaten oplevert:

Bouw een website met [aantal] pagina's met de volgende specificaties: ONTWERPSYSTEEM: - Primaire kleur: [hex] - Secundaire kleur: [hex] - Achtergrond: [hex] - Tekst: [hex] - Lettertype: [lettertypenaam] voor koppen, [lettertypenaam] voor body - Grensradius: [waarde] - Spacingschaal: [waarden] PAGINA 1 — HOME: - Hero-sectie: [exacte beschrijving — koppelingtekst, ondertitel, CTA-knoptekst, achtergrondbehandeling] - Features-sectie: [aantal] kaarten, elk met [pictogram/afbeelding, titel, beschrijving] - Testimonials: [lay-outbeschrijving] - CTA-sectie: [beschrijving] - Footer: [koppelingen en lay-out] PAGINA 2 — OVER: [dezelfde detailniveau] TECHNISCH: - Gebruik Next.js met Tailwind CSS - Responsief voor mobiel - Soepel schuiven tussen secties - Alle afbeeldingen als placeholder divs met achtergrondkleuren (ik voeg later echte afbeeldingen toe)

Hoe specifieker je bent over wat de gebruiker ziet, hoe beter de output. Beschrijf niet de code — beschrijf de ervaring. Als je hulp nodig hebt om deze prompt aan te scherpen voordat je het verstuurt, kan onze gratis promptoptimizer helpen om het beter te structureren.

Stap 4: Controleer en Herhaal

Claude's eerste output legt meestal 60–80% van je ontwerp vast. De resterende 20–40% komt voort uit iteratie. Dit is de stap waar de meeste "vibe coding"-tutorials eindigen, maar het is waar de echte kwaliteit gebeurt.

Controleer de output door drie dingen te controleren: matcht de lay-out je ontwerp? Voelen de kleuren en typografie goed? Ziet het er goed uit op mobiel?

Herhaal dan met specifieke feedback. Zeg niet "maak het beter." Zeg:

  • "De hero-sectie heeft meer verticale vulling nodig — voeg 120px boven en onder toe"
  • "De feature-kaarten moeten in een 3-koloms raster op desktop zijn, enkele kolom op mobiel"
  • "De CTA-knop moet een hover-effect hebben — verzwak de achtergrond met 10% en vergroot licht"
  • "De voeterkoppelingen moeten in 4 kolommen worden gerangschikt: Product, Bedrijf, Resources, Legal"

Elke ronde feedback moet 3–5 specifieke problemen aanpakken. Drie rondes krijgen je meestal op 95% van je ontwerp.

Krijg je waarde hiervan? We publiceren elke week één diepgaande analyse over AI-workflows, tools en praktische gidsen. Sluit je aan bij de lezers die het als eerste krijgen →

Stap 5: Voeg Echte Inhoud en Afbeeldingen Toe

Vervang placeholdertekst met je werkelijke kopij. Vervang placeholder-afbeeldingsdivs met echte afbeeldingen. Als je hulp nodig hebt bij het schrijven van websitekopij, is Claude uitstekend hiervoor — feed het je merkbeschrijving en vraag om homepagekopij die bij je toon past.

Voor afbeeldingen, gebruik gratis stock van Unsplash of Pexels, of genereer aangepaste afbeeldingen met een AI-afbeeldingstool. Zet de afbeeldingsbestanden in je projectmap /public en update de src-attributen.

Stap 6: Deploy in Één Klik

Als je Next.js hebt gebruikt (aanbevolen), duurt deploying op Vercel 60 seconden:

  1. Push je code naar een GitHub-opslagplaats
  2. Ga naar vercel.com en log in met GitHub
  3. Klik "Import Project" en selecteer je repo
  4. Vercel detecteert Next.js automatisch en configureert alles
  5. Klik "Deploy"

Je site is live met een .vercel.app-URL. Verbind een aangepast domein in Vercel's instellingen als je er een hebt.

Netlify werkt bijna identiek — import van GitHub, auto-detect het framework, deploy. Beide platforms verwerken SSL, CDN en continue deployment automatisch. Elke keer dat je naar GitHub pushed, wordt je site bijgewerkt.

Weet je niet zeker welk deploymentplatform je moet gebruiken? We schreven een volledige vergelijking: Waar Deploy Je Na Vibe Coding?

Veel Voorkomende Fouten Die Mensen Tegenkomen

1. Claude alleen een screenshot geven zonder geschreven context. Screenshots helpen, maar Claude heeft geschreven beschrijvingen van kleuren, lettertypen, afstand en lay-out nodig om nauwkeurige code te produceren. De screenshot is een referentie — de tekst is de instructie.

2. Proberen alles in één prompt te bouwen. Een website met 6 pagina's met animaties, formulieren en een CMS is te veel voor één pass. Bouw pagina voor pagina, sectie voor sectie. Begin met de homepage, maak het goed, ga vervolgens naar de volgende pagina.

3. Responsiviteit voor mobiel overslaan. Als je mobiel niet in je prompt noemt, bouwt Claude een desktopallleen lay-out. Neem altijd "mobiel responsive" op in je technische vereisten en test de output op 375px breedte.

4. Interacties niet testen. Klik op elke knop, vul elk formulier in, scroll elke pagina. AI-gegenereerde code ziet er vaak goed uit maar heeft verbroken koppelingen, niet-functionerende formulieren of ontbrekende hover-states. Test voor deployment.

5. Perfectionisme voor deployment. Ship op 90% en herhaal. Je eerste deployment hoeft niet perfect te zijn — het moet live zijn. Je kunt updates in seconden pushen.

Bouw je voor klanten? Lees onze gids over 5 beveiligingsfouten die elke vibe coder maakt voordat je levert.

De Conclusie

De Figma-naar-Claude-naar-deploy-workflow is de snelste manier om een ontwerp in een werkende website om te zetten zonder zelf code te schrijven. De kwaliteit hangt af van de specificiteit van je prompts, niet van codeervaardigheden. Drie iteratieronden krijgen je meestal van eerste concept naar productieklaar.

Begin met een eenvoudig project — een portfolio of landingspagina — en werk één keer door de volledige cyclus. De tweede keer duurt half zo lang omdat je precies weet hoe je je prompts structureert.

Weet je niet zeker welk AI-tool het beste is voor je workflow? Neem onze 60-secondequiz Model Picker om erachter te komen, of zie de volledige State of AI Models-vergelijking.

Dit doen we elke week. Één diepgaande analyse over AI-tools, workflows en eerlijke standpunten — geen hype, geen vulling. Sluit je aan →

Openbaarmakingen: Sommige koppelingen in dit artikel zijn samenwerkingskoppelingen. We bevelen alleen tools aan die we persoonlijk hebben getest en regelmatig gebruiken. Zie ons volledig openbaarmakingsbeleid.