Ik Bouwde een Complete App in 2 Uur Zonder Eerst Figma te Openen
Twee uur. Dat is hoe lang het duurde om van een lege terminal naar een volledig interactieve app te gaan met micro-animaties, hover-states en een compleet design system — allemaal zonder Figma ook maar één keer te openen.
En toen pushte ik het geheel terug naar Figma als bewerkbare lagen.
Ik besef dat die zin waarschijnlijk iets in je brein brak als je een ontwerper bent. Bij mij ook. De workflow die we allemaal hebben verinnerlijkt — ontwerpen in Figma, overdragen aan dev, drie weken wachten, iets terugkrijgen dat er niets uitziet als het mockup — is net volledig omgekeerd. Eerst bouwen, daarna naar Figma synchroniseren. Code-first design. En voordat je me vertelt dat dit een developer-workflow is die zich voordoet als designtool, laat me je zien wat ik daadwerkelijk heb gebouwd, want de output zou elke designlead voor de gek houden door te denken dat het uit een Figma-bestand van een senior productontwerper kwam.
Het geheim is de Figma MCP-integratie van Claude Code gecombineerd met een workflow die de meeste ontwerpers nog niet ontdekt hebben. Ik heb een week besteed aan het testen van drie specifieke use cases — design system vertaling, snel prototypen vanuit screenshots, en volledige landingspagina-conversie — en de resultaten deden me heroverwegen wat "ontwerper" überhaupt betekent in 2026.
Maar hier is de valkuil die niemand noemt in de tutorials: de omgeving verkeerd instellen zal je credits in een uur opbranden. Ik heb dat op de dure manier geleerd, en ik bespaar je dezelfde fout.
De Setup Die de Meeste Ontwerpers Fout Doen
Hier is het punt over Claude Code dat ontwerpers verwart de eerste keer dat ze ermee in aanraking komen. Ze horen "Claude," ze openen claude.ai, ze selecteren Opus 4.6 uit het model-dropdown, en ze beginnen te prompten voor code. Dertig minuten later zijn hun credits op en hebben ze een half-af HTML-bestand waar ze niets mee kunnen.
Zo werkt het niet. Helemaal niet.
Claude Code draait binnen een omgeving — zie het als een werkruimte die je bestanden organiseert, je AI-agents beheert en je een goede ontwikkelcontext geeft. De tool werkt het beste wanneer gekoppeld aan een editor zoals Cursor, hoewel je het ook kunt draaien via Google's AntiGravity of vergelijkbare platformen. Ik gebruik Cursor omdat het bestandsbeheer natuurlijk aanvoelt als je ooit VS Code hebt gebruikt.
De omgeving doet ertoe omdat Claude Code je projectstructuur moet zien. Het moet weten waar je CSS staat, waar je HTML-bestanden zijn, welke assets je hebt geïmporteerd. Wanneer je gewoon chat met Claude in een browservenster, genereert het geïsoleerde codefragmenten zonder projectbewustzijn. Wanneer je het draait binnen een goede omgeving, genereert het code die in je daadwerkelijke bestandsstructuur past, echte paden refereert en voortbouwt op wat er al bestaat.
Het opzetten kostte me de eerste keer ongeveer 15 minuten. Nu kan ik een nieuw project opzetten in minder dan 3 minuten. Hier is het proces:
Stap 1: Neem het juiste abonnement. Claude Code biedt gelaagde plannen. Het "Pro"-plan werkt voor experimentatie en leren. Als je echt projectwerk doet — vooral met meerdere agents die tegelijk draaien — geeft het "Max"-plan je onbeperkte credits en parallelle agent-ondersteuning. Voor ontwerpers die de waters testen, is Pro prima. Zodra je verslaafd bent (en dat zul je zijn), upgrade.
Stap 2: Installeer Claude Code als extensie in Cursor. Dit verbindt de AI direct met je projectwerkruimte. Elke prompt die je schrijft heeft volledige context van je bestanden.
Stap 3: Begin lokaal. Maak je projectmap aan, initialiseer het, en werk eerst lokaal. GitHub-integratie komt later wanneer je wilt hosten of delen. Maak de start niet te ingewikkeld.
Dat laatste punt doet er meer toe dan je zou denken. Ik heb drie ontwerpervrienden zien proberen Claude Code op te zetten door eerst een GitHub-repo aan te maken, deployment-pipelines te configureren, CI/CD op te zetten — allemaal voordat ze ook maar één regel code schreven. Ze volgden developer-tutorials, geen ontwerper-workflows. Begin lokaal. Krijg je eerste build werkend op je machine. Het cloud-gedoe kan wachten.
Nu, de Figma-synchronisatie — dit is het deel dat alles verandert voor ontwerpworkflows, en het instellen is eenvoudiger dan je zou verwachten.
Claude Code Verbinden met Figma (Het Deel Dat Alles Verandert)
Het synchroniseren van Claude Code met Figma vereist een persoonlijk toegangstoken. Hier is precies hoe je er een genereert:
- Open Figma, ga naar je accountinstellingen
- Navigeer naar het gedeelte "Personal Access Tokens"
- Genereer een nieuw token met volledige rechten — lezen, schrijven, alles
- Stel de vervaldatum in op 90 dagen (het maximum)
- Kopieer dat token onmiddellijk — Figma toont het maar één keer
Terug in Claude Code, draai het authenticatiecommando met je token. Eenmaal verbonden heb je een tweerichtingsbrug tussen je code-omgeving en Figma. Ontwerpen stromen in beide richtingen.
Waarom doet dit ertoe? Omdat de traditionele workflow eenrichtingsverkeer is. Ontwerp gaat naar dev. Dev interpreteert het. Dingen gaan verloren. Met de Figma-integratie van Claude Code kun je:
- Ontwerpspecificaties direct vanuit Figma in je code-prompts trekken
- Gegenereerde HTML/CSS terugpushen naar Figma als bewerkbare vectorlagen
- Beide omgevingen gesynchroniseerd houden terwijl je itereert
Ik zal eerlijk zijn — toen ik voor het eerst "push code terug naar Figma" hoorde, nam ik aan dat het een of ander rommelig gerasterd screenshot zou maken. Nee. De HTML-naar-Design pipeline converteert je code-output naar daadwerkelijke Figma-lagen. Bewerkbare tekst. Aanpasbare frames. Echte auto-layout. Het is niet elke keer pixel-perfect, maar het is dichtbij genoeg om in beide richtingen te blijven itereren.
Die bidirectionele stroom ontgrendelt iets dat ik niet verwachtte: de mogelijkheid om te prototypen in code (waar interacties echt werken) en dan te verfijnen in Figma (waar visuele afwerking sneller gaat). Het beste van twee werelden. Maar ik loop op de zaken vooruit — laat me je de drie use cases tonen waar deze setup echt schittert.
Use Case 1: Een Design System Vertalen naar Productiecode
Dit was mijn eerste experiment, en het overtuigde me van de hele workflow.
Ik had een bestaand design system in Figma — typografieschaal, kleurenpalet, schaduwdefinities, knopvarianten, spacing-tokens. Het soort fundament dat elk productteam bouwt en dan moeite heeft om te vertalen naar code die daadwerkelijk overeenkomt. Ik heb aan projecten gewerkt waar het design system Figma-bestand en de CSS-implementatie binnen twee weken uit elkaar dreven. Dat gebeurt omdat het handmatig onderhouden van beide vervelend en foutgevoelig is.
Dit is wat ik deed: ik opende het design system-bestand in Figma's Dev Mode, selecteerde de pagina's met mijn kerntokens, en kopieerde de componentreferenties. Toen dook ik in Claude Code met een specifieke prompt die beschreef wat ik wilde — een complete CSS-implementatie van het design system met goede custom properties, responsive typografie en componentklassen.
Claude Code genereerde de CSS- en HTML-bestanden in ongeveer 4 minuten.
De typografie klopte. De kleuren waren exacte hex-waarden gehaald uit de Figma-specs. De knopvarianten hadden de juiste padding, border-radius en state-stijlen. Ik opende de gegenereerde HTML in Live Server (een eenvoudige browserpreview-extensie) en vergeleek het zij aan zij met het Figma-bestand.
Het was niet perfect — de schaduwwaarden hadden lichte aanpassing nodig, en een van de font-weights defaultte naar 500 in plaats van 600. Maar dit waren fixes van 30 seconden. De structurele nauwkeurigheid was iets waar een developer een hele dag over zou doen om vanuit het niets te bouwen, ervan uitgaande dat ze de Figma-specs correct interpreteerden.
Pro tip: Bij het vertalen van design systems, voer Claude Code één categorie tegelijk. Dump niet je hele systeem in een enkele prompt. Doe eerst typografie, dan kleuren, dan schaduwen, dan componenten. De output is nauwkeuriger wanneer elke prompt een gerichte scope heeft.
De echte beloning kwam twee weken later toen een klant wijzigingen aan de primaire knopstijl aanvroeg. Ik werkte het bij in Claude Code, de CSS propageerde over elke pagina die dat component gebruikte, en ik pushte het bijgewerkte ontwerp terug naar Figma voor stakeholder-review. Eén wijziging, beide omgevingen bijgewerkt. Geen "welk bestand is de bron van waarheid?" verwarring.
Dit alleen al zou de setup-tijd rechtvaardigen. Maar de tweede use case is waar ik het meest plezier aan had.
Use Case 2: Snel Prototypen Vanuit Screenshots
Stel je dit voor. Je scrollt door Dribbble, of browst de site van een concurrent, of bekijkt een screenshot die een klant je stuurde met de notitie "zoiets." Normaal zou je Figma openen, de layout vanuit het niets namaken, de spacing benaderen, de typografieschaal raden. Een uur later heb je een statisch mockup.
Met Claude Code nam ik een screenshot van een ontwerp dat me beviel — een SaaS-dashboard met een sidebar-nav, metriekkaarten en een datatabel — sleepte het in mijn Claude Code-prompt, en beschreef wat ik wilde: "Maak een enkel HTML-bestand met embedded CSS dat deze layout nabootst. Voeg hover-animaties toe op de kaarten en een vloeiende sidebar-toggle."
Negentig seconden later had ik een werkend prototype in mijn browser.
Geen mockup. Geen wireframe. Een werkende, interactieve pagina met hover-states die daadwerkelijk reageerden op mijn cursor, een sidebar die inklapte met een vloeiende CSS-transitie, en metriekkaarten die goed schaalden wanneer ik het venster aanpaste.
Was het productierijp? Nee. De data was placeholder, de responsive breakpoints hadden werk nodig, en sommige spacing was licht afwijkend. Maar als startpunt voor verkenning — voor het testen of een layoutrichting goed aanvoelt voordat je uren investeert in high-fidelity design — is het ongeëvenaard.
Ik ben deze workflow gaan gebruiken voor klantontdekkingsgesprekken. In plaats van statische moodboards te presenteren, toon ik interactieve prototypes die ik bouwde in de 20 minuten voor de meeting. Klanten kunnen erdoorheen klikken, de browser resizen, zien hoe dingen bewegen. De feedback is dramatisch beter omdat ze reageren op iets dat echt aanvoelt.
Het snelheidsvoordeel is moeilijk te overdrijven. Een layoutverkenning die me 2-3 uur kostte in Figma duurt nu 5-10 minuten in Claude Code. Ik kan vier verschillende benaderingen genereren in de tijd die het vroeger kostte om er één te bouwen. En degene die niet werken? Ik verwijder het bestand en ga verder. Geen emotionele gehechtheid aan een zorgvuldig gemaakt Figma-frame.
Pro tip: Voor op screenshots gebaseerd prototypen, blijf bij enkele HTML-bestanden met embedded CSS. Vraag Claude Code niet om een framework of componentarchitectuur op te zetten voor snelle verkenningen. Hoe eenvoudiger de bestandsstructuur, hoe sneller de iteratie.
Hier wordt het echter interessant — want de derde use case is waar ik de grootste uitdagingen tegenkwam.
Use Case 3: Een Volledige Landingspagina Converteren van Figma naar Code
Dit was de ambitieuze test. Ik had een complete landingspagina ontworpen in Figma — hero-sectie, feature-grid, testimonials, prijzentabel, footer. Aangepaste illustraties, gradient-achtergronden, de hele productie.
Ik pakte de Figma-link en promptte Claude Code om het volledige ontwerp te converteren naar HTML en CSS.
De eerste output was... gemengd. De structuur klopte — elke sectie bestond, de layout-flow matchte het ontwerp, de typografie zat goed. Maar de aangepaste illustraties vertaalden niet (verwacht — AI kan geen vectorkunst namaken vanuit een linkreferentie), en sommige gradient-hoeken waren afwijkend.
Dit is wat ik leerde en wat het project redde: stuur niet de hele pagina in één keer. Breek het op in secties.
Ik herstartte het proces door Claude Code eerst de hero-sectie link te sturen. De output was significant nauwkeuriger — de gradient matchte, de headline-typografie was correct, de CTA-knop had de juiste padding en border-radius. Ik keurde het goed, stuurde dan de features-sectie, dan testimonials, en bouwde de pagina incrementeel op.
Sectie voor sectie kwam de landingspagina samen in ongeveer 45 minuten. Elke prompt was gericht, en Claude Code kon zijn volledige aandacht besteden aan het juist krijgen van één sectie in plaats van een hele pagina te benaderen.
De aangepaste illustraties waren de ene echte kloof. Ik exporteerde die uiteindelijk vanuit Figma als SVG's en dropte ze handmatig in de projectmap. Claude Code refereerde ze dan correct in volgende prompts. Niet volledig geautomatiseerd, maar een kleine handmatige stap in een verder gestroomlijnd proces.
Voor de laatste afwerking gebruikte ik iteratieve prompts: "Voeg een dark mode toggle toe die vloeiend overgaat" (duurde 2 minuten), "Maak dat de prijskaarten animeren bij scrollen" (90 seconden), "Voeg een mobiele navigatielade toe" (3 minuten). Elke toevoeging landde netjes omdat Claude Code de bestaande codestructuur begreep.
Het eindproduct — een volledig responsive, geanimeerde landingspagina met dark mode — zou me 2-3 dagen hebben gekost om met de hand te coderen of 4-5 uur heen-en-weer met een developer. Totale tijd van Figma-ontwerp tot werkende code: ongeveer 2 uur inclusief de valse start.
Het Eerlijke Verhaal: Wat Deze Tool Nog Niet Kan
Ik heb een vrij rooskleurig beeld geschetst, en dat is omdat de resultaten me oprecht imponeerden. Maar ik zou liegen als ik zei dat de workflow vlekkeloos was, en je verdient het om de beperkingen te kennen voordat je tijd investeert in het opzetten.
Claude Code genereert front-end code. HTML, CSS, JavaScript voor interacties en animaties. Als je project een backend nodig heeft — gebruikersauthenticatie, databaseverbindingen, server-side logica — stap je developer-territorium binnen. De tool genereert geen API-endpoints of databaseschema's vanuit een Figma-bestand. Voor marketingsites en interactieve prototypes doet dit er niet toe. Voor product-apps heb je nog steeds backend-ondersteuning nodig.
Aangepaste illustraties zijn een handmatige stap. Zoals ik noemde, moet complexe vectorkunst apart uit Figma geëxporteerd worden. Claude Code kan afbeeldingsbestanden in je project refereren, maar het kan geen handgetekende illustraties namaken vanuit een ontwerpspec. Verwacht assets handmatig te verwerken.
De Figma-naar-code nauwkeurigheid hangt af van de ontwerporganisatie. Als je Figma-bestand goede auto-layout, benoemde lagen en componentstructuren gebruikt, is de output van Claude Code opmerkelijk getrouw. Als je Figma-bestand een puinhoop is van absoluut-gepositioneerde frames met "Frame 247"-namen... weerspiegelt de output die chaos. Goede ontwerphygiëne in Figma leidt tot betere code-output. Net als bij menselijke developers, eerlijk gezegd.
Iteratie is vereist. Ik heb nooit een perfecte output gekregen bij de eerste prompt voor iets voorbij eenvoudige componenten. De workflow is: genereren, preview bekijken, gaten identificeren, prompten voor fixes, herhalen. Meestal 2-3 rondes. Dat is nog steeds dramatisch sneller dan traditioneel met de hand coderen, maar verwacht geen magie bij de eerste poging.
Creditverbruik varieert enorm. Simpele componentgeneratie raakt nauwelijks je budget aan. Volledige landingspagina-conversie met iteratieve verfijning kan 20-30% van de dagelijkse toewijzing van een Pro-plan verbruiken. Als je dit professioneel doet, budget voor het Max-plan en bespaar jezelf de angst van het kijken hoe credits wegtikken midden in een project.
Eén voorspelling die ik zal doen: binnen de komende zes maanden zal de Figma-naar-code nauwkeurigheid significant verbeteren naarmate deze modellen beter worden in het begrijpen van ruimtelijke relaties en design tokens. De kloof tussen "gegenereerd" en "met de hand gemaakt" is al kleiner dan de meeste mensen aannemen. Het sluit snel.
Wat Ontwerpers Eigenlijk Zouden Moeten Meten
Na een week deze workflow te gebruiken op klantprojecten en persoonlijke experimenten, zien de cijfers er zo uit.
Design system vertaling: 15-20 minuten voor een compleet tokensysteem (typografie, kleuren, schaduwen, knoppen). Handmatig equivalent: 4-6 uur.
Snel prototypen vanuit screenshots: 5-10 minuten per layoutverkenning. Handmatig equivalent: 2-3 uur per mockup.
Volledige landingspagina-conversie: 1,5-2,5 uur inclusief iteratie. Handmatig equivalent: 2-3 dagen ontwerper-developer samenwerking.
Figma sync roundtrips: Ik pushte code 8 keer terug naar Figma gedurende de week. 6 daarvan produceerden schone, bewerkbare lagen waar mijn team direct mee kon werken. 2 hadden kleine handmatige opschoning in Figma nodig. Dat is een 75% schone-sync rate, wat eerlijk gezegd mijn verwachtingen overtrof.
Doorlooptijd klantfeedback: Dit is de metriek waar ik het meest om geef. Interactieve prototypes gegenereerd op dezelfde dag betekende dat klanten feedback konden geven in de eerste meeting in plaats van te wachten op een tweede reviewronde. Twee projecten gingen van ontdekking naar goedgekeurde richting in een enkele sessie. Dat is me nog nooit overkomen met statische mockups.
De snelle winsten zijn duidelijk — snelheid, kosten, iteratiesnelheid. De langetermijnwinst is subtieler maar belangrijker: ontwerpers die interactieve prototypes en productierijpe front-ends kunnen bouwen hebben een fundamenteel andere positie in de industrie. Je wacht niet meer op iemand anders om je visie tot leven te brengen. Je bouwt het zelf en bewijst dat het werkt voordat iemand kan discussiëren over haalbaarheid.
De Workflow Die Echt Werkt
Na het testen van elke combinatie die ik kon bedenken, is dit de workflow waar ik op ben uitgekomen voor ontwerpprojecten:
Voor verkenning en conceptwerk: Begin in Claude Code. Genereer snelle prototypes vanuit screenshots of verbale beschrijvingen. Raak Figma niet aan totdat je een richting hebt gevonden die goed aanvoelt. Dit is contra-intuïtief voor ontwerpers die zijn opgeleid met Figma-eerst workflows, maar de snelheid van code-gebaseerde verkenning verandert de berekening.
Voor productie design systems: Bouw in Claude Code, synchroniseer naar Figma voor teamreview. Update in beide omgevingen naar behoefte. De bidirectionele synchronisatie zorgt ervoor dat geen van beide veroudert.
Voor landingspagina's en marketingsites: Ontwerp belangrijke secties in Figma voor stakeholder-goedkeuring, converteer dan naar code sectie per sectie in Claude Code. Voeg interacties en animaties toe in code (waar ze echt werken), push dan finale builds terug naar Figma voor documentatie.
Voor klantpresentaties: Toon altijd de interactieve versie. Statische mockups onderschatten je werk. Een 5-minuten Claude Code sessie voor een meeting kan een plat ontwerp omzetten in een klikbaar prototype dat deals sluit.
De rode draad door al deze: Claude Code vervangt Figma niet. Het geeft Figma een productiecapabele partner. Ontwerp en code stoppen met aparte fasen van een project te zijn en worden twee views van hetzelfde ding.
Als je me een jaar geleden had verteld dat ik ontwerpers zou aanraden om terminalcommando's te leren, had ik gelachen. Maar de terminal die ik gebruik vraagt me niet om JavaScript vanuit het niets te schrijven. Het vraagt me wat ik wil bouwen, en bouwt het terwijl ik creatieve beslissingen neem.
Dat is geen developer-workflow met een ontwerpermasker. Dat is wat ontwerptools al die tijd hadden moeten zijn.
🤝 Laten We Samenwerken
Op zoek naar het bouwen van AI-systemen, het automatiseren van workflows, of het opschalen van je technische infrastructuur? Ik help graag.
- 🔗 Fiverr (maatwerk builds & integraties): fiverr.com/s/EgxYmWD
- 🌐 Portfolio: mejba.me
- 🏢 Ramlit Limited (enterprise-oplossingen): ramlit.com
- 🎨 ColorPark (design & branding): colorpark.io
- 🛡 xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
