Landingspagina maken met AI: in een middag live zonder code

Een landingspagina maken met AI klinkt misschien als een project voor later, maar het is precies het soort klus dat je in een middag af hebt. Je hebt geen designer nodig, geen developer en ook geen ingewikkelde workflow. Ik zet tegenwoordig Framer en Relume naast elkaar, gooi er een korte prompt in en heb binnen een uur een eerste versie waar ik mee verder kan.

Wat ik wel heb geleerd: de AI is niet degene die jouw pagina goed maakt. Jij maakt hem goed door te kiezen, te schrappen en de teksten scherp te zetten. De tools doen het zware werk, jij doet het laatste zetje.

Wat je nodig hebt

Meer heb je niet: een Framer-account, een Relume-account en een duidelijk onderwerp. Framer is een no-code websitebouwer met een AI-modus. Relume is een soort bouwdoos voor secties en wireframes die je daarna in Framer of Webflow zet. Een eigen domein is handig maar niet verplicht, Framer geeft je een tijdelijk webadres.

Een landingspagina maken met AI in 4 stappen

Stap 1: Begin met een prompt, niet met een leeg canvas

Open Relume of de AI-knop in Framer en beschrijf je pagina alsof je een briefing schrijft voor een freelancer. Hoe concreter je bent, hoe bruikbaarder het eerste ontwerp. Een prompt die voor mij werkt: ‘Maak een landingspagina voor een online cursus over intervaltraining. Doel is een aanmelding voor een gratis proefles. Toon: nuchter, sportief, geen marketingtaal. Eén duidelijke knop.’ Meer hoef je niet te zeggen.

Stap 2: Laat de AI de eerste opzet bouwen

Framer zet een complete pagina in elkaar met kop, secties, knoppen en een formulier. Relume geeft je losse blokken die je in een canvas schuift. In beide gevallen krijg je meer dan genoeg om te reageren. Mijn ervaring: verwacht geen perfectie. De eerste versie is een praatplaat. Je kijkt vooral naar de volgorde en of de belangrijkste actie er meteen uitspringt.

Stap 3: Maak de teksten concreet

AI-tekst wil graag gewichtig doen. Je krijgt zinnen als ‘wij transformeren jouw idee in een naadloze ervaring’. Dat zegt niks. Herschrijf ze naar iets wat je zelf zou zeggen. Zet er een getal bij, een tijd, een voorbeeld. Van ‘wij leveren innovatieve oplossingen’ naar ‘je krijgt binnen een dag een eerste opzet en daarna twee feedbackrondes’. Dat verschil is waar een landingspagina maken met AI staat of valt. De bouwer doet de layout, jij zorgt dat het niet als robottaal klinkt.

Stap 4: Live zetten en op je telefoon testen

Framer publiceren is één klik. Koppel je eigen domein als je dat hebt, anders gebruik je de tijdelijke link. Open de pagina daarna op je telefoon. Klik elke knop, vul het formulier in, stuur een testbericht naar jezelf. Vaak zitten de fouten in kleine dingen: een knop die net buiten beeld valt, een lettertype dat te klein is, een formulier dat geen bevestiging stuurt. Check dat even, want daar hoor je later niet automatisch over.

Framer of Relume: wat gebruik je wanneer

Dit is geen wedstrijd, dit is een volgorde. Relume helpt je snel schuiven met secties en structuur. Framer is sterker als je een strak eindresultaat wilt met animaties en een vormgeving die niet schreeuwt dat je een template gebruikt. Mijn vaste werkwijze is: begin in Relume met de opbouw, exporteer naar Framer en werk daar de details bij.

Waar AI-tekst de mist in gaat

AI houdt van grote woorden en opsommingen. Als je niet oplet staat je pagina vol met ‘revolutionair’, ‘vloeiende workflows’ en ‘ontdek de kracht van’. Daar klikt niemand op. Lees je pagina hardop voor. Alles wat je niet tegen een collega zou zeggen, schrap je. De beste AI-tekst voelt alsof iemand je even bijpraat, niet alsof een brochure is opgehoest.

Een voorbeeld. AI zegt: ‘Onze missie is om gebruikers een naadloze en intuïtieve ervaring te bieden die verder gaat dan standaardoplossingen.’ Jij maakt er: ‘Je stelt je pagina in drie stappen in. Werkt het niet, dan stuur je me een bericht.’ Zelfde strekking, maar nu lees je verder.

Veelgestelde vragen

Kan ik echt zonder code een landingspagina maken met AI?

Ja. Framer en Relume bouwen de technische kant voor je. Je schuift met blokken, past teksten aan en klikt op publiceren. Alleen voor exotische koppelingen met een eigen backend heb je soms een stukje code nodig, maar voor een standaard landingspagina kom je er zonder.

Hoe lang duurt het gemiddeld?

Reken op twee tot drie uur voor een eerste versie als je een goede prompt gebruikt. Daarna nog een uur voor teksten, mobiel checken en het formulier testen. Dus ja, een middag is realistisch. De eerste keer duurt langer, daarna weet je waar de knoppen zitten.

Moet ik Framer en Relume allebei hebben?

Nee. Je kunt alles in Framer doen met de AI-knop. Relume is handig als je eerst alleen de opbouw wilt bepalen en daarna pas de vormgeving. Veel mensen gebruiken Relume als schetsblok en Framer als eindstation. Kies wat het minste gedoe geeft.

Wat als de AI rare of vage teksten maakt?

Aanpassen. De AI geeft je een eerste kladje. Vraag daarna gerust: ‘Maak deze zin korter en concreter, zonder marketingwoorden.’ Blijf net zo lang schaven tot je het zelf zou zeggen. De AI heeft geen smaak, jij wel.

Is zo’n pagina goed vindbaar?

De basis kun je zelf instellen. Zet je zoekterm in de paginatitel, de omschrijving en minstens één tussenkop. Framer heeft die velden gewoon per pagina. Veel meer dan dat is voor een eerste versie niet nodig.

Begin met een klein project dat je al kent. Dat kan een e-book zijn, een mini-tool of een aanmeldpagina voor een workshop. Zo zie je binnen een middag wat werkt en wat niet. Als je nog geen onderwerp hebt, kijk eerst even bij wat je allemaal kunt maken met AI.