Je AI-design in Framer of Webflow zetten
Framer en Webflow halen een ontwerp het best binnen via Figma: beide hebben een officiële plug-in die Figma-lagen omzet naar hun eigen editor, en Framer kan met een browserextensie ook secties van een live webpagina kopiëren. Een export uit Claude Design gaat dus niet rechtstreeks, die uit Google Stitch wel via Figma. Na de import bouw je het na met componenten, variabelen en breakpoints, en zet je terugkerende inhoud in CMS-collecties.
Framer en Webflow zijn gemaakt voor sites die er ontworpen uit moeten zien, met een CMS en hosting erbij. Een HTML-export uit een AI-tool openen ze niet als bewerkbare pagina. Hieronder staat per tool hoe je het ontwerp binnenhaalt, hoe je het nabouwt zodat het beheerbaar blijft, en hoe je projecten, blogs of vacatures in een CMS-collectie zet.
Herken je dit?
- Je ontwerp staat in Stitch of Claude Design en je wilt het in Framer of Webflow verder bewerken.
- Na een import staan er honderden losse lagen met namen als Frame 4012.
- De letters zijn na het plakken vervangen door een standaardlettertype.
- Op tablet en telefoon schuift alles door elkaar.
- Je projecten of blogberichten zijn losse pagina’s, en een nieuwe toevoegen betekent een pagina kopiëren.
Een import neemt het uiterlijk over, niet de opbouw
Wat binnenkomt, is wat je zag: vlakken, teksten en afbeeldingen op hun plek. Wat Framer en Webflow bruikbaar maakt, komt niet mee. Een knop is nog geen component, een kleur nog geen variabele, een projectkaart nog niet gekoppeld aan het CMS. Hoe een pagina op een smaller scherm verandert, bepaal je per breakpoint opnieuw.
Zie de import dus als een ontwerp dat in de editor staat. Het echte werk is nabouwen in de structuur van de tool.
Zo haal je het ontwerp binnen
In Framer
- Via Figma. Exporteer vanuit Google Stitch naar Figma. Selecteer in Figma de lagen, start de officiële plug-in Figma to HTML with Framer, kopieer en plak op het canvas van Framer. De lagen komen binnen als bewerkbare elementen.
- Via de browserextensie. De extensie van Framer kopieert secties van een live webpagina. Zet je export uit Claude Design eerst online, zoals in een HTML-export online zetten, en kopieer hem dan per sectie.
- Controleer na het plakken. Framer raadt zelf aan om lettertypes, afbeeldingen, afstanden en het gedrag op kleinere schermen na te lopen. Upload je eigen lettertype als het vervangen is.
In Webflow
- Via Figma. De officiële plug-in Figma to Webflow zet Figma-lagen om naar elementen en stijlen in Webflow, en kan kleuren, tekststijlen en componenten meenemen.
- Via een AI-agent. Webflow beschrijft ook een route waarin een AI-agent het ontwerp overzet via de koppelingen met Figma en Webflow. Controleer daarna dezelfde dingen als bij de plug-in.
- Losse HTML alleen voor een klein stuk. Het element Code Embed neemt HTML, CSS en JavaScript aan, op een betaald siteplan. Gebruik het voor een widget, niet voor een hele pagina: wat erin staat, is in de Designer geen tekst meer.
Nabouwen met componenten maakt het beheerbaar
Doe dit in deze volgorde, in beide tools.
- Eerst de stijlen. Zet de kleuren uit je ontwerp als kleurstijlen in Framer of als variabelen in Webflow, en de koppen en lopende tekst als tekststijlen. Waar die waarden vandaan komen, staat in design tokens zodat AI consistent blijft.
- Dan de onderdelen. Maak van alles wat terugkomt een component: navigatie, footer, knop, kaart, formulier. Pas je het component aan, dan verandert het op elke pagina.
- Dan de opbouw. Vervang vaste posities door stacks in Framer of flex en grid in Webflow. Daardoor schuift een pagina vanzelf in elkaar op een smaller scherm. Loop daarna elk breakpoint langs. Wat er op mobiel meestal misgaat, staat in AI-design kapot op mobiel.
- Code alleen waar het moet. Beide tools kennen code-componenten in React, voor iets dat je met hun eigen elementen niet bouwt, zoals een rekentool. Houd het bij één of twee: wat in code staat, kan een redacteur niet aanpassen.
Terugkerende inhoud hoort in het CMS
Projecten, blogberichten, vacatures en teamleden zijn steeds dezelfde soort pagina met andere inhoud. Bouw daar één templatepagina voor en zet de inhoud in een CMS-collectie.
Maak eerst de velden aan in de collectie: naam, slug, samenvatting, afbeelding, datum. Importeer daarna je bestaande inhoud als CSV-bestand.
naam,slug,samenvatting,afbeelding,datum
Nieuwe hal,nieuwe-hal,Staalbouw en gevel voor een opslaghal.,https://www.jouwdomein.nl/img/hal.jpg,2026-09-12
Kantoor op de kade,kantoor-op-de-kade,Verbouwing van twee verdiepingen.,https://www.jouwdomein.nl/img/kade.jpg,2026-07-03In Framer moet elke kolom een veld met precies dezelfde naam hebben, en herkent Framer bestaande items aan hun slug, zodat een tweede import ze bijwerkt. Velden met meerdere afbeeldingen en embeds komen niet mee. In Webflow koppel je bij het importeren elke kolom aan een veld, en geef je afbeeldingen op als volledige URL. Koppel de velden daarna aan de templatepagina, en een nieuw project is een nieuwe rij in plaats van een gekopieerde pagina.
Veelgemaakte fouten
- De import als eindresultaat houden. Het ziet er goed uit op het scherm waarop je importeerde. Bij de eerste wijziging blijkt dat elke knop een los vlak is.
- Elk project als losse pagina bouwen. Tien gekopieerde pagina’s zijn tien plekken om een fout te herstellen. Eén template met een collectie is er één.
- De lettertypes niet nalopen. Een vervangen lettertype valt in de editor niet op, en op de live site wel.
- Alles in embeds en code-componenten stoppen. Dan werk je om de tool heen. Je betaalt voor een editor die je niet gebruikt, en niemand anders kan de site nog aanpassen.
Wanneer je hulp nodig hebt
Wij bouwden de website van A-Kwaliteit in Framer; twee weken na de kennismaking stond hij live. Twijfel je of je ontwerp in Framer, in Webflow of in code het best tot zijn recht komt, dan zeggen we wat wij zouden kiezen en waarom. Bouwen wij het in code, dan staat de aanpak bij een AI-design laten omzetten. Meer over de weg van ontwerp naar website lees je op de designpagina van onze AI-gidsen.
Veelgestelde vragen
Kan ik een ontwerp uit Claude Design in Framer krijgen?
Framer of Webflow?
Wordt een Framer- of Webflow-site goed gevonden?
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.
- 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 zeggen of Framer, Webflow of code bij je site past
De kennismaking is gratis. We reageren binnen één werkdag.