12 april 2026

Mockup Maken met AI

Een mockup maken met AI betekent dat je een professioneel UI-ontwerp genereert door in gewone taal te beschrijven wat je nodig hebt. In plaats van uren te besteden in Photoshop of Figma, vertel je de AI wat voor pagina of scherm je wilt. De AI levert een compleet, afgewerkt ontwerp dat je direct kunt delen met klanten en exporteren naar code.

Waarom mockups nog steeds belangrijk zijn

Sommige teams denken dat ze mockups kunnen overslaan en direct naar code kunnen gaan. Dat klinkt efficiënter, maar in de praktijk leidt het tot eindeloze revisierondes. Je klant ziet de staging-omgeving, zegt "dit is niet wat ik bedoelde", en je bent terug bij af.

Een mockup voorkomt dat probleem. Het is een visuele afspraak tussen jou en je klant over hoe het eindresultaat eruitziet. Pas als die afspraak er is, ga je bouwen. Dat scheelt je tijd, geld en frustratie.

Het echte probleem was altijd dat mockups maken te lang duurde. Een designer had dagen nodig voor een set schermen. Met AI is dat verleden tijd.

Stap voor stap: mockup maken met dMaya

Stap 1: Beschrijf je project

Open dMaya en start een nieuw project. Beschrijf in gewone taal wat je nodig hebt. Bijvoorbeeld: "Ik heb een landingspagina nodig voor een SaaS-product dat projectmanagement doet. Strakke look, donker thema, met een hero sectie, features overzicht en pricing."

Hoe specifieker je bent, hoe beter het resultaat. Maar je hoeft niet alles in een keer goed te hebben. Je kunt altijd bijsturen in het gesprek.

Stap 2: AI genereert de mockup

De AI maakt een compleet UI-ontwerp op basis van je beschrijving. Geen wireframe of schets, maar een echt, afgewerkt design. Met typografie, kleuren, witruimte, content en responsive gedrag.

Dit is het grote verschil met traditionele tools. In Photoshop of Canva begin je met een leeg canvas en bouw je alles zelf op. In dMaya begin je met een compleet ontwerp en pas je aan wat niet klopt.

Stap 3: Itereer via chat

Nu begint het verfijnen. Je zegt tegen de AI: "Maak de hero groter", "Gebruik een lichter kleurenpalet", "Voeg een testimonial sectie toe onder de features". Elke aanpassing gebeurt via het gesprek. Je ziet direct het resultaat op het canvas.

Stap 4: Deel de preview link met je klant

Als het ontwerp er goed uitziet, genereer je een preview link. Die stuur je naar je klant of stakeholders. Zij openen de link in hun browser, bekijken het ontwerp en laten opmerkingen achter. Geen account nodig, geen installatie.

Dit is hoe bureaus in Amsterdam en Rotterdam al werken met dMaya. De klant ziet precies wat hij krijgt, geeft feedback, en je verwerkt die feedback in minuten in plaats van dagen.

Stap 5: Exporteer naar code

Zodra het ontwerp goedgekeurd is, exporteer je het als schone HTML, CSS en Tailwind code. Die code geef je door aan je developers, of je verbindt dMaya via MCP met Cursor of Claude Code. Dan kunnen developers het ontwerp direct ophalen vanuit hun eigen coding-omgeving.

AI-mockups vs traditionele mockup tools

In Photoshop bouw je elk element handmatig op. Dat geeft maximale controle, maar kost enorm veel tijd. Canva maakt het makkelijker met templates, maar je eindigt met generieke ontwerpen die niet specifiek genoeg zijn voor een klantproject.

Figma zit er tussenin. Het is krachtig en flexibel, maar je moet nog steeds alles met de hand bouwen. Voor een complete set schermen ben je zo een paar dagen bezig.

Met een AI-tool als dMaya heb je in minuten een eerste versie. De kwaliteit is vergelijkbaar met handwerk, maar de snelheid is een compleet andere orde van grootte. En doordat je itereert via een gesprek, voelt het natuurlijker dan klikken en slepen.

Wanneer gebruik je AI-mockups?

• Je hebt een klantpitch en weinig tijd om een presentatie voor te bereiden
• Je wilt snel meerdere visuele richtingen verkennen voordat je er eentje uitwerkt
• Je team heeft geen fulltime designer maar moet toch professionele ontwerpen leveren
• Je wilt een idee visueel valideren voordat je gaat bouwen

Voor meer over het maken van interactieve prototypes met AI, lees ons aparte artikel daarover.

Veelgestelde vragen