Een mooiere website met Refero en Claude

Bijgewerkt 16 oktober 2026 · 5 minuten

Je zoekt vier websites die je mooi vindt en laat Claude daar een mengpaneel van bouwen. Daarin probeer je per blok uit welke stijl past bij jouw foto's. Wat je kiest, zet je vast in één bestand voor je website.

Wat je nodig hebt

De site styles.refero.design. Bekijken en kopiëren kan zonder account.
Een account op claude.ai. Claude Design zit in elk abonnement, ook in het gratis abonnement. Met gratis zit je wel sneller aan je limiet, want elke ronde bijsturen telt mee.
Vijf tot tien eigen foto's in JPG of PNG, het liefst groot.
De teksten van één pagina van je website, bijvoorbeeld je homepage.
Tijd. Ik deed er zelf veertien dagen over, verspreid over drie weken.

Stappen

Elke opdracht staat in een eigen vak. Scroll naar beneden om de hele opdracht te lezen, want vaak gaat hij verder dan je scherm. Met de knop Kopieer rechtsboven in het vak neem je alles in één keer over. Je kunt de tekst ook zelf selecteren en kopiëren.

Zoek vier stijlen op Refero. Ga naar styles.refero.design. Daar staan ruim tweeduizend stijlen van bestaande websites. Kies bovenaan Trending, Popular of Newest, of zoek op een sfeer zoals "minimal". Klik op een stijl die je aanspreekt.
Kopieer per stijl de DESIGN.md. Een DESIGN.md is een tekst die de stijl van een website beschrijft: de kleuren, de letters en de ruimte. AI kan er direct mee bouwen. Rechts op de pagina staat het tabblad DESIGN.md. Kies Extended voor de volledige versie en klik op Copy. Plak hem in een notitie met de naam van de site erboven. Doe dit voor alle vier.
Open Claude Design. Ga naar claude.ai en klik in de zijbalk op Design. Kies onder Make something new voor Design. Claude bouwt je ontwerp naast het gesprek, zodat je meteen ziet wat er gebeurt.

Voeg je foto's toe en plak de opdracht. Klik op het plusje onder in het berichtvak en voeg je foto's toe. Plak daarna deze opdracht en vul de haakjes in:

Hieronder staan vier DESIGN.md's van websites die ik mooi vind. Ik heb ook [aantal] foto's van mijn eigen bedrijf toegevoegd.

Mijn bedrijf: [wat je doet en voor wie, in één zin]
Het gevoel van mijn site: [drie woorden, bijvoorbeeld rustig, warm en deskundig]

Stap 1. Zet per site de letters, de kleuren en de ruimte op een rij, in een korte tabel.

Stap 2. Bouw één pagina van mijn website als mengpaneel, met deze blokken:
- bovenaan een grote foto met mijn kop: [je kop]
- een blok over wat ik aanbied: [twee of drie diensten]
- een blok over mij met een foto
- een blok met een reactie van een klant: [tekst]
- onderaan een knop: [bijvoorbeeld Plan een kennismaking]

Geef elk blok een knop waarmee ik wissel tussen stijl A, B, C en D. Geef elk fotoblok een keuze uit al mijn foto's. Zet bovenaan een knop die alle blokken tegelijk op één stijl zet.

Gebruik alleen de kleuren, letters en maten uit de DESIGN.md's.

DESIGN.md stijl A ([naam site]):
[plak hier]

DESIGN.md stijl B ([naam site]):
[plak hier]

DESIGN.md stijl C ([naam site]):
[plak hier]

DESIGN.md stijl D ([naam site]):
[plak hier]

Probeer uit en stuur bij. Klik door de blokken en kijk welke stijl werkt met je foto's. Een yogastudio met zachte lichte foto's merkt bijvoorbeeld al snel dat zwarte vlakken er koud uitzien. Wil je iets anders, plak dan:

Ik heb gekozen: kop in stijl [letter], aanbod in stijl [letter], over mij in stijl [letter], reactie in stijl [letter] en knop in stijl [letter].

Pas dit aan:
- [bijvoorbeeld: de kop is te groot op mijn telefoon]
- [bijvoorbeeld: de achtergrondkleur van stijl B met de letters van stijl C]
- [bijvoorbeeld: foto 3 bovenaan]

Laat de wisselknoppen staan, zodat ik verder kan vergelijken.

Bekijk de pagina ook op je telefoon voordat je kiest.

Zet je keuze vast als huisstijl. Ben je tevreden? Plak dan:

Zet wat ik nu gekozen heb vast als de huisstijl van mijn website, in één bestand.

Zet erin:
- de kleuren met naam, kleurcode en waar ik ze gebruik
- de letters voor koppen en voor gewone tekst, met groottes
- de ruimte tussen blokken en de ronding van knoppen
- welke soort foto waar komt
- een korte lijst van wat ik nooit doe

Schrijf het in gewone taal. Zet onderaan dezelfde waarden als CSS-variabelen, zodat een webbouwer ze kan overnemen. Maak de pagina zelf ook definitief, zonder wisselknoppen.

CSS-variabelen zijn de vaste namen voor kleuren en maten in de code van een website.

Download alles. Klik rechtsboven op Export. Kies de zip-download voor alle bestanden samen. Bewaar ook het huisstijlbestand uit stap 6.
Maak er een echte website van. Het ontwerp in Claude is nog geen website met je eigen domeinnaam. Je hebt drie routes:
- Je houdt je websitebouwer, zoals Wix of Squarespace. Je neemt de kleuren en letters uit je huisstijlbestand over in de instellingen en bouwt je pagina na.
- Je geeft het huisstijlbestand en de export aan een webbouwer.
- Je bouwt verder met Claude Code. Dat vraagt meer technische stappen.

Is het gelukt?

Heb je een pagina die past bij je foto's, en een huisstijlbestand met je kleuren en letters? Dan heb je de stijl voor je website gevonden.

Bouwt Claude Design de wisselknoppen niet goed? Plak dezelfde opdracht dan in een gewoon gesprek in Claude. Loop je ergens anders vast, open dan een chat in Claude en plak dit stappenplan erin. Vertel erbij bij welke stap het misgaat. Kom je er samen niet uit? Stuur me een berichtje op Instagram.

Wil je dat je website ook vertelt wat jij doet, in jouw woorden? Ik kijk graag met je mee, plan dan een kennismaking.

Let op

Gebruik de stijlen als inspiratie en meng ze. Neem geen site letter voor letter over en gebruik nooit het logo of de teksten van een ander merk.
Sommige stijlen gebruiken letters waarvoor je moet betalen. Vraag Claude om in je huisstijl alleen letters te zetten die je vrij mag gebruiken.
Kies je beste foto's. Twintig bestanden per gesprek is het maximum.
Voor dit stappenplan heb je geen betaald Refero-abonnement nodig.

Waar sta jij met je bedrijf?

Dit stappenplan is één taak. Er is vast meer werk dat AI van je kan overnemen. Doe de AI-scan: een paar vragen over je bedrijf. Daarna zie je waar je staat, welke kansen er liggen en wat je eerste stap is.

Doe de AI-scan

Wil je meer van dit soort stappenplannen? Volg me op Instagram of meld je aan voor de nieuwsbrief onderaan deze pagina.