Je website redesignen met Claude Design: van schets tot werkende pagina

Beschrijf je pagina, laat Claude Design een wireframe maken, werk dat chattend uit naar een HiFi ontwerp en zet het door naar HTML of Claude Code.

Je weet dat je website niet meer goed is. De teksten kloppen niet, de opbouw is onduidelijk en het ziet er verouderd uit. Maar een designbureau inhuren kost duizenden euro's en zelf iets bouwen voelt als een brug te ver. Claude Design is een derde weg.

Claude Design is geen plugin en geen tool die statische afbeeldingen genereert. Het is een interactieve HTML-omgeving waarin je wireframes, HiFi ontwerpen en werkende pagina's bouwt vanuit een gesprek. Je beschrijft wat je wil, Claude bouwt het, en je stuurt bij totdat het klopt.

Claude Design is beschikbaar via claude.ai/design en alleen toegankelijk voor betaalde abonnementen: Pro, Team, Enterprise en Max. De gratis versie geeft geen toegang.

Begin met een design system, niet met een ontwerp

De meest gemaakte fout is direct beginnen met ontwerpen. Sla die stap niet over.

Claude Design heeft een ingebouwde optie om een design system in te stellen. Je koppelt je huisstijl via een GitHub-link of uploadt je eigen stijlregels. Heb je dat niet, dan beschrijf je het handmatig: je primaire kleur, je lettertype, of je merk zakelijk of toegankelijk is, en wat voor gevoel je wil uitstralen.

Doe je dit niet, dan vult Claude de lege plekken op met generieke standaarden. Het ontwerp klopt technisch, maar ziet er niet uit als jouw bedrijf. Twee minuten investeren in een design system bespaart je later veel correctierondes.

Stap 1: de wireframe

Beschrijf je pagina in gewone taal. Je hoeft geen ontwerpjargon te kennen. Zeg wat er op de pagina moet staan, in welke volgorde en voor wie het bedoeld is.

Een voorbeeld van hoe dat eruit ziet:

"Maak een wireframe voor de homepage van mijn loodgietersbedrijf. Bovenaan een korte headline met mijn belangrijkste belofte, daaronder drie redenen om voor mij te kiezen, dan een sectie met recente klantreviews en onderaan een contactformulier. De pagina moet vertrouwen uitstralen voor huiseigenaren die snel iemand nodig hebben."

Claude Design genereert daar een klikbaar HTML-wireframe van. Je kunt door de secties navigeren alsof het een echte site is.

Wat er daarna gebeurt is waar het interessant wordt. Claude stelt vervolgvragen. Het vraagt of de volgorde klopt, of je een specifieke sectie wil uitbreiden en wat er eventueel mist. Je beantwoordt die vragen in het gesprek en Claude past het wireframe aan. Zo werk je niet naar een eindresultaat toe in één stap, maar bouw je het op via een gesprek.

Kloppen de verhoudingen niet? Zeg het. Wil je de reviewsectie hoger op de pagina? Typ het. Claude begrijpt gewone instructies en past het ontwerp direct aan. Je ziet het resultaat meteen.

Stap 2: van wireframe naar HiFi ontwerp

Als de structuur goed zit, zet je hem om naar een volledig uitgewerkt ontwerp. Dat doe je met één opdracht: "Werk dit wireframe uit naar een HiFi ontwerp op basis van mijn design system."

De overgang van wireframe naar HiFi duurt ongeveer 90 seconden. Het resultaat is een volledig visueel ontwerp met typografie, kleuren en opmaak, direct inline bewerkbaar.

Hier begint het echte tweaken. Klik op een tekst om hem direct aan te passen. Verander een kleur door een hex-waarde in te typen. Wil je een andere sfeer in de hero-sectie, beschrijf het in het gesprek en Claude herschrijft die sectie.

Als je de primaire accentkleur aanpast, werkt die wijziging door in elk element op de pagina dat die kleur gebruikt. Je hoeft niet elk onderdeel los bij te werken.

Claude denkt ook mee. Als iets visueel niet klopt, benoemt het dat en stelt een concrete aanpassing voor. Je bent niet alleen aan het reageren op wat Claude maakt, Claude reageert ook op wat jij wil bereiken.

Stap 3: doorzetten naar HTML of Claude Code

De output van Claude Design is al HTML, geen statische afbeelding. Dat betekent drie dingen voor jou als ondernemer:

Je kunt het direct meegeven aan een developer als concrete briefing. Geen onduidelijke omschrijvingen meer, maar een werkend voorbeeld van precies wat je wil.

Je kunt het live zetten via een tool als Webflow of Framer door de HTML te importeren, zonder zelf te hoeven coderen.

Of je zet het door naar Claude Code voor verdere bouw. Claude Code leest het ontwerp, begrijpt de structuur en bouwt daar functionaliteit op. Denk aan een contactformulier dat echt verstuurt, een productpagina die uit je CMS trekt of een boekingssysteem dat werkt.

Wat je realistisch mag verwachten

Claude Design is sinds april 2026 beschikbaar als research preview. Het werkt goed voor landingspagina's, homepages en eenvoudige bedrijfssites. Voor complexe webshops met veel productpagina's of maatwerktoepassingen is het een startpunt, geen eindproduct.

Ga naar claude.ai/design, stel je design system in en beschrijf je homepage in drie zinnen. Je hebt binnen tien minuten iets staan wat je aan iemand kunt laten zien.

Ik wil mijn website vernieuwen maar heb geen designer of developer. Kan ik dat zelf doen met Claude en hoe pak ik dat aan?

Veelgestelde vragen