AI website kopieren (Skill): van inspiratie naar pixel-perfecte clone

De verwarring rond "website kopieren"

Als je zoekt naar "AI website kopieren" kom je in een vreemde situatie terecht. De Nederlandse zoekresultaten staan vol met AI copywriting tools: tools die tekst schrijven voor websites. Maar dat is niet wat jij bedoelt. Jij wilt een bestaande website visueel namaken. De layout, de kleuren, de fonts, de sfeer. Pixel-perfect.

Die semantische verwarring, tussen copywriting en cloning, is precies waarom deze KREATE skill bestaat. Er is namelijk geen enkel Nederlandstalig artikel dat uitlegt hoe je methodisch een website kunt klonen met AI. Tot nu.

De copy-website skill is een complete methode die je leert hoe je met Playwright, een reverse brand guide en Next.js elke website kunt reverse-engineeren en nabouwen. Geen magie. Een bewezen 4-stappen workflow.

Waarom handmatig nabouwen altijd tegenvalt

Iedere developer of maker kent het: je ziet een website die precies de juiste uitstraling heeft. Mooie layout, strak kleurgebruik, perfecte spacing. Je opent DevTools, begint handmatig CSS over te typen, en drie uur later zit je vast in een wirwar van inconsistente margins en vergeten font-weights.

De klassieke aanpak faalt op drie punten:

• Je mist design tokens. Computed styles in DevTools geven je losse waarden, maar je ziet niet het systeem erachter: welke spacing scale gebruikt de site? Wat is de typografie-hierarchie? Welke kleuren zijn primair en welke accent?
• Je bouwt zonder blauwdruk. Je begint met coderen voordat je het hele design hebt gedocumenteerd. Halverwege merk je dat het grid anders werkt dan je dacht, en je kunt opnieuw beginnen.
• Je QA is nattevingerwerk. Je kijkt even of het "er wel goed uitziet" in plaats van systematisch screenshots te vergelijken. Subtiele verschillen in line-height, letter-spacing en border-radius glippen erdoor.

Wat de copy-website skill oplost

De KREATE copy-website skill vervangt het giswerk door een methodische pipeline. In plaats van handmatig CSS te grabbelen, laat je AI het zware werk doen in vier heldere stappen:

Stap 1: Playwright extractie. Een headless browser bezoekt de doelwebsite en extraheert ALLES automatisch. Niet alleen de zichtbare tekst en afbeeldingen, maar ook de complete design tokens: alle computed colors, font families, font sizes, font weights, line heights, letter spacings, border radii, box shadows, en transitions. Plus de layout structuur per sectie en de exacte afmetingen van elk element.

Stap 2: Reverse brand guide. De ruwe extractie wordt omgezet in een gestructureerd design document. Net zoals een merk een brand guide heeft om consistentie te bewaken, bouwt de skill een "reverse" brand guide die exact vastlegt: het kleurensysteem (background, surface, primary, text), de typografie-hierarchie (display font, body font, sizing scale), spacing tokens, border-radius schaal, shadow definities, en een complete component-inventaris.

Stap 3: Next.js rebuild. Met de reverse brand guide als blauwdruk wordt een Next.js project opgezet. Tailwind configuratie krijgt de exacte design token waarden. Componenten worden gebouwd volgens de component-inventaris. Geen giswerk: elk font, elke kleur, elke spacing komt rechtstreeks uit de brand guide.

Stap 4: Visuele QA loop. Dit is de gamechanger. Playwright maakt screenshots van het origineel en van jouw clone. Die worden naast elkaar gelegd en vergeleken. Waar verschillen zitten, wordt de code aangepast. Dan opnieuw screenshots, opnieuw vergelijken. Deze loop herhaalt zich tot de screenshots identiek zijn. Pas dan is de clone klaar.

Probeer het zelf: Reverse Brand Guide Generator

De eerste stap van de methode, het extraheren van design tokens en het bouwen van een brand guide, kun je direct zelf testen met de gratis KREATE tool hieronder. Voer een URL in en krijg binnen enkele seconden een volledige analyse van het design systeem van die website.

Open de Reverse Brand Guide Generator in een nieuw tabblad

Wat de skill wel en niet kan

Laten we eerlijk zijn over de grenzen van deze aanpak. De copy-website skill is krachtig, maar het is geen magie.

Wat de skill WEL kan:

• Statische pagina's en landingspagina's pixel-perfect klonen
• Design tokens uit elke moderne website extraheren
• Een gestructureerde reverse brand guide genereren die je als startpunt gebruikt
• Next.js componenten bouwen die exact matchen met het origineel
• Visuele QA uitvoeren om afwijkingen te detecteren en te fixen

Wat de skill NIET kan:

• Dynamische webapps met complexe backend logica klonen
• JavaScript interacties en state management 1-op-1 repliceren
• Auteursrechtelijk beschermde content publiek maken (dat mag simpelweg niet)
• Websites met server-side rendering logica of API-endpoints overnemen
• Authenticatie-systemen of betaalmuren kopieren

De skill is ontworpen voor front-end replicatie: het visuele design, de layout, de sfeer. Voor inspiratie, learning, en als startpunt voor je eigen project. Niet voor identiek publishen onder een andere naam.

De KREATE-methode in 4 fasen

De workflow is opgedeeld in vier heldere fasen. Elke fase heeft een duidelijke input, een AI-actie, output, en een check-moment.

Fase 1: Extractie (5 minuten). Je geeft een URL op. Playwright opent de site op 1440px desktop en 375px mobiel. JavaScript in de browser extraheert alle computed styles. Je krijgt een gestructureerd JSON-bestand met alle design tokens, een volledige pagina screenshot, en een layout-map van elke sectie. Check: zijn alle secties herkend? Zijn de kleuren compleet?

Fase 2: Reverse brand guide (10 minuten). De ruwe extractie wordt getransformeerd naar een leesbare brand guide. Overbodige eenmalige kleuren worden weggefilterd. Het echte kleurensysteem komt naar boven. De typografie-hierarchie wordt helder: H1, H2, H3, body, caption. Spacing tokens worden gegroepeerd in een consistente schaal. Check: voelt de brand guide als een echt designsysteem, niet als een dump?

Fase 3: Rebuild (20-30 minuten). Een Next.js project wordt opgezet met Tailwind. De CSS custom properties krijgen exact de waarden uit de brand guide. Componenten volgen de component-inventaris: nav, hero, features, testimonials, CTA, footer. Check: compileert de app zonder fouten? Zijn alle secties aanwezig?

Fase 4: Visuele QA loop (10-30 minuten). Playwright neemt screenshots van origineel en clone. Een visuele vergelijking detecteert afwijkingen in header height, hero alignment, CTA styling, kleurverschillen, typografie, en spacing. Elke afwijking wordt gefixt en opnieuw getest. De loop stopt pas als de screenshots matchen. Check: zijn alle secties visueel identiek op desktop en mobiel?

Stappenplan: van URL naar pixel-perfecte clone

Hier is het concrete stappenplan dat je vandaag nog kunt volgen:

1. Kies je doelwebsite

Begin met een relatief eenvoudige statische site of landingspagina. Een portfolio, een SaaS landing page, of een agency site. Vermijd dynamische webapps met veel JavaScript interactie voor je eerste clone.

2. Run de Reverse Brand Guide Generator

Gebruik de KREATE tool hierboven om een eerste brand guide te genereren. Dit geeft je direct inzicht in het design systeem van de site, inclusief kleurenpalet, typografie-schaal, en spacing tokens.

3. Zet je Next.js project op

Met de brand guide als blauwdruk start je een nieuw Next.js project met Tailwind. De CSS custom properties in globals.css krijgen de exacte waarden uit de brand guide: kleuren als HSL waarden, font families, border-radius tokens, en shadow definities.

4. Bouw component voor component

Begin met de navigatie. Dan de hero sectie. Dan feature secties, testimonials, CTA's, en footer. Elke component krijgt zijn stijlen uit de brand guide, niet uit je eigen voorkeuren.

5. Draai de visuele QA loop

Open het origineel en jouw clone naast elkaar. Vergelijk per sectie: header height, hero alignment, CTA styling, kleurnauwkeurigheid, typografie, spacing. Fix wat niet klopt en check opnieuw.

Een werkend voorbeeld: de prompt structuur

Hier is een publiek veilig voorbeeld van hoe je de AI instructie geeft voor het reverse-engineeren. Dit is een skeleton, geen complete implementatie:

// Stap 1: Extractie prompt skeleton
navigeer naar [URL] met Playwright op 1440px viewport.
maak full-page screenshot en sla op als ground-truth.
extraheer alle computed styles via getComputedStyle():
  - fonts, colors, spacing, shadows, transitions
  - layout structuur per section element
  - alle image URLs met dimensies en alt tekst
output als gestructureerd JSON bestand.

// Stap 2: Analyse prompt skeleton
analyseer de JSON extractie en identificeer:
  - het echte kleurensysteem (niet eenmalige waarden)
  - de typografie-hierarchie (display, body, mono)
  - de spacing schaal (is het 4px, 8px, of 10px based?)
  - de component-inventaris (nav, hero, features, footer)
genereer een gestructureerde reverse brand guide.

Dit skeleton toont de structuur, niet de volledige prompts. De complete set aan geoptimaliseerde prompts, inclusief de exacte Playwright scripts en de Next.js scaffold configuratie, zit in de volledige skill.

Handmatig nabouwen vs. AI copy-website skill

Veelgemaakte fouten bij website cloning

Fout 1: Beginnen met coderen zonder brand guide. Je ziet een mooie site en begint meteen CSS te schrijven. Zonder gestructureerd design document mis je het systeem achter de losse waarden.

Fix: Altijd eerst de reverse brand guide genereren. Het kost 10 minuten en bespaart uren aan giswerk en herstelwerk.

Fout 2: Alleen desktop checken. Je bouwt de clone op 1440px en het ziet er perfect uit. Maar op mobiel is de spacing verdubbeld en vallen elementen buiten het scherm.

Fix: Screenshots maken op minimaal 1440px, 768px, en 375px. De visuele QA loop moet alle drie de breakpoints checken.

Fout 3: One-time waarden behandelen als design tokens. Je ziet een kleur die maar een keer voorkomt en neemt die op in je palet. Je clone krijgt een inconsistente kleurenset die niet matched met het origineel.

Fix: Filter op frequentie: design tokens zijn waarden die op meerdere elementen terugkomen. Eenmalige kleuren zijn vaak content-specifiek, niet systemisch.

Fout 4: De clone publiek maken zonder toestemming. Je hebt een pixel-perfecte clone gebouwd en publiceert die onder je eigen domein. Dat is auteursrechtelijk niet toegestaan en kan juridische problemen opleveren.

Fix: Gebruik de clone als leerproces, inspiratie, of startpunt voor je eigen design. Pas kleuren, fonts, en layout aan tot het jouw eigen werk is. De skill is een leertool, geen plagiaat-machine.

Toepassing in je dagelijkse workflow

De copy-website skill is geen eenmalige truc. Het is een methode die je integreert in hoe je websites bouwt:

• Inspiratie verzamelen: Heb je een collectie van 5-10 sites die je mooi vindt? Genereer van elke site een reverse brand guide. Je krijgt een bibliotheek aan design systemen die je kunt mixen en matchen.
• Competitie-analyse: Wil je weten waarom de concurrent er strakker uitziet? Genereer hun brand guide. Je ziet exact welk kleurensysteem en welke typografie-schaal ze gebruiken.
• Redesigns: Een klant wil zijn huidige site vernieuwen maar niet helemaal opnieuw beginnen? Clone de huidige site, extraheer de brand guide, en gebruik die als basis voor het redesign.
• Leren van de besten: Wil je beter worden in UI design? Clone sites van Linear, Stripe, en Vercel. Bestudeer hun design systemen. Je leert meer van reverse-engineeren dan van 10 design tutorials.

Veelgestelde vragen

Hoe kan ik een website exact namaken met AI?

Gebruik de 4-stappen KREATE-methode: Playwright extractie van design tokens, reverse brand guide opbouwen, Next.js rebuild met exacte tokens, en Playwright visuele QA loop tot de screenshots matchen. De volledige skill met alle scripts staat in de KREATE Community.

Is website klonen legaal in Nederland?

Het klonen voor eigen leerdoeleinden en inspiratie is toegestaan. Het identiek publiceren van een gekloonde website zonder toestemming van de oorspronkelijke eigenaar is in strijd met de Nederlandse Auteurswet. Gebruik de skill om te leren van design systemen, niet om content te stelen.

Kan ik een website 1 op 1 kopieren naar mijn eigen domein?

Technisch wel, juridisch niet (zonder toestemming). De copy-website skill is bedoeld als leertool en als startpunt voor je eigen designs. Pas altijd kleuren, fonts, en layout aan tot het jouw eigen werk is voordat je publiceert.

Welke AI tools heb ik nodig om een website te klonen?

Je hebt Playwright nodig voor browser automatisering, een LLM zoals Claude Code, Codex, Gemini, OpenCode of ChatGPT voor de analyse en code generatie, en Next.js met Tailwind voor de rebuild. De KREATE skill bundelt alles in een werkende workflow.

Hoe lang duurt het om een website pixel-perfect te kopieren?

Met de copy-website skill: 30 tot 60 minuten voor een statische landingspagina, inclusief extractie, brand guide, rebuild, en visuele QA. Handmatig kost hetzelfde werk 4 tot 8 uur met minder nauwkeurigheid.

Werkt deze skill met ChatGPT en Claude?

Ja. De copy-website skill is ontworpen om te werken met Claude Code, Codex CLI, Gemini, OpenCode, en ChatGPT. De prompts en workflow zijn LLM-onafhankelijk. In de KREATE Community vind je versies voor elke LLM.

Wat is een reverse brand guide?

Een reverse brand guide is een gestructureerd document dat het design systeem van een bestaande website vastlegt: kleurenpalet, typografie-hierarchie, spacing schaal, border-radius tokens, shadow definities, en een complete component-inventaris. Het is het omgekeerde van een normale brand guide: in plaats van regels op te stellen voor toekomstig design, extraheer je de regels uit bestaand design.