In één avond een geanimeerde website bouwen met Claude Code

Lees meer over werken met modellen in de Ailoot-documentatie.

Waaraan herken je een door AI gebouwde website op het eerste scherm?#

Je vraagt een agent om een landingspagina in elkaar te zetten. Veertig minuten later heb je een werkende website: de secties staan erin, er is een responsive indeling en de knoppen werken. En vrijwel meteen krijg je het gevoel dat je dit ergens eerder hebt gezien.

De oorzaak is mechanisch. Het model is getraind op een enorme verzameling voltooide pagina’s, en die verzameling was sterk vertekend. Thousands of tutorials and starter templates copied the same default colors, skewing the sample.

Duizenden tutorials en starttemplates namen die kleur over, waardoor de steekproef scheefgroeide, en het model leerde dat knoppen paars zijn. Hetzelfde mechanisme geldt voor lettertypen, afgeronde hoeken en schaduwen.

De ‘AI-look’ is intussen veranderd. In de documentatie voor de skill frontend-design beschrijft Anthropic nu andere looks.

Het kernprobleem: slop ontstaat wanneer er niets specifieks is om te kopiëren en het model simpelweg alle webstijlen bij elkaar middelt.

‘Slop’ betekent hier machinaal gegenereerd werk dat tot een generiek resultaat is gemiddeld, zonder eigen stijl.

De praktische conclusie is dat de agent een beperkte ontwerpgrammatica nodig heeft in plaats van een open opdracht. Zeg je ‘maak het mooi’, dan neemt hij het gemiddelde. Geef je hem een specifiek palet, een paar lettertypen en één bepalend visueel middel, dan bouwt hij daarmee verder.

Beweging is in dit beeld het opvallendste signaal. Zelfs een statische pagina met perfecte typografie oogt nog als een template, omdat levende websites ademen: elementen verschijnen terwijl je scrolt, de cursor verandert dingen en overgangen tussen schermen breken niet abrupt af.

Wat heb je nodig om met Claude Code een geanimeerde website te bouwen?#

Laten we de tools één voor één bekijken, want over de prijzen bestaat veel verwarring.

GSAP is de animatiebibliotheek achter een aanzienlijk deel van de bekroonde websites. Webflow kocht de bibliotheek in oktober 2024, en vrijwel meteen gingen geruchten rond dat alles gratis was geworden. Dat klopt niet helemaal: destijds bevestigde Webflow dat de bestaande prijzen zouden blijven gelden. De bibliotheek werd eind april 2025 gratis, met versie 3.13.

In de release van 3.13 staat specifiek dat voorheen betaalde plug-ins zoals SplitText en MorphSVG ook gratis werden, inclusief voor commercieel gebruik. De huidige versie per juli 2026 is gsap@3.15.0.

Gratis betekent overigens niet open source. De licentie blijft propriëtair en verbiedt het bouwen van een visuele animatie-editor op GSAP die met Webflow concurreert. Er zijn geen beperkingen voor websites, klantprojecten of commercieel werk.

Anthropic’s skill frontend-design is een verzameling instructies die verandert hoe de agent aan een interface werkt. In de beschrijving van de repository staat:

De skill bevat een methode in twee rondes. Eerst stelt de agent een tokensysteem samen: vier tot zes benoemde kleuren, lettertypen voor ten minste twee rollen, een indelingsschema in tekstschetsen en één bepalend visueel middel voor de pagina. Daarna beoordeelt hij zijn eigen plan aan de hand van de opdracht. Pas daarna schrijft hij code.

Het bericht noemt 75 skills, de repositorybeschrijving vermeldt er 78 en er staan er nu 91 in de bestandsstructuur. De auteur zegt dat ook openlijk: controleer de repository met een zoekopdracht, want de beschrijving is verouderd.

Hoe voorkom je dat Claude Code templates blijft maken?#

We beginnen met het regelsbestand, want dat geldt voor elk verzoek en kost niets.

Een nuttig uitgangspunt is een blok anti-template guardrails. De logica is eenvoudig: noem de specifieke keuzes waar het model standaard naartoe neigt en verbied ze expliciet.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

Het blok is bewust in het Engels geschreven: het model volgt korte technische instructies nauwkeuriger in de taal van de documentatie.

De animatieregel staat niet voor niets tussen de verboden keuzes voor kleuren en schaduwen. Opacity op het eerste scherm schaadt direct de snelheidsmaatstaf, zoals we hieronder bespreken.

Nu de skill. Je kunt Anthropic’s officiële skills via de plug-in installeren:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Eén detail: designskills zijn niet afzonderlijk te installeren; de plug-in example-skills installeert ze alle twaalf tegelijk. Wil je er maar één, kopieer de map dan handmatig—Claude Code pikt die op zonder de sessie opnieuw te starten:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Andere skills uit deze verzameling die handig kunnen zijn: theme-factory met tien kant-en-klare thema’s waarvoor eerst bevestiging van een mens nodig is, web-artifacts-builder om met kant-en-klare componenten in React te bouwen, en algorithmic-art voor generatieve afbeeldingen. Een apart artikel legt uitgebreid uit hoe je skills voor een taak kiest: hoe kies je skills voor Claude Code.

De regels en de skill vullen elkaar aan: de regels verbieden slechte keuzes en de skill legt een proces op—eerst het systeem, daarna de kritiek en tot slot de code.

Waar vind je kant-en-klare visuele richtingen en animatieprompts?#

De bewegingsmethodes die erin staan zijn: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Als niet-programmeur heb je meer aan de kant-en-klare visuele richtingen. Kies er een in plaats van het vage ‘maak het modern’ en geef het model de beperkte grammatica die het miste:

• clean-minimal-beige-light-mode - licht beige minimalisme
• dark-glass-clean-layout - donker glas
• documentary-brutalist-agency - brutale documentaires stijl
• editorial-portfolio-chapters - portfolio verdeeld in hoofdstukken, zoals een tijdschrift
• orange-clean-paper-saas - een website voor een dienst in papierstijl met een oranje accent
• solar-duotone-bold - een krachtige tweekleurige stijl
• tech-green-dark-mode-modern - donkere technische stijl met groen
• light-mode-paper-technical - licht technisch papier

Er zijn ook technische skills voor 3D-afbeeldingen en effecten: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

De repository heeft geen installatieopdracht—de auteur zegt in de roadmap duidelijk dat die er komt zodra de integratiemethode is vastgesteld. De enige instructie voor Claude Code luidt:

Hieronder staat een manier om de skill te installeren. Deze opdracht staat niet in de repository; het is een installatieadvies:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Hoe geef je een agent in één regel actuele GSAP-documentatie?#

Een veelvoorkomend probleem met animatiebibliotheken is dat de agent zich een verouderde manier herinnert om ze te koppelen. Hij schrijft een import vanuit een oud pad, registreert een plug-in zoals dat twee jaar geleden gebeurde en de code werkt niet.

De oplossing is om de documentatie zelf in de context te zetten. GSAP biedt die aan in een machinevriendelijk formaat:

https://gsap.com/llms.txt

Het bestand is vandaag ongeveer 25 kilobyte groot. Elke documentatiepagina is ook beschikbaar in een markdownversie—voeg gewoon .md toe aan de URL.

In de praktijk ziet het er zo uit:

Lees https://gsap.com/llms.txt en https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Maak vervolgens één scène op de startpagina: de kop verschijnt terwijl je
voorbij het eerste scherm scrolt en de afbeelding rechts verschuift langzamer
dan de tekst. Gebruik alleen transform en opacity. Geen transition-all.

De Motion-bibliotheek (voorheen Framer Motion) heeft hetzelfde bestand en dat is nog groter. Motion wordt verspreid onder MIT en blijft echt open source; de huidige versie is motion@12.42.2. Als het project in React staat en alleen eenvoudige onthullingen nodig heeft, kun je Motion kiezen; gebruik voor complexe scrollscènes GSAP met de plug-in ScrollTrigger.

Er zijn ook opties die alleen in de browser werken en geen bibliotheken gebruiken. Overgangen tussen paginastaten via de View Transitions API kregen op 14 oktober 2025 baseline-ondersteuning—maar alleen binnen één pagina; de versie voor meerdere pagina’s wordt in Firefox helemaal niet ondersteund. CSS-scrollanimaties hebben nog geen baseline-ondersteuning: Chrome ondersteunt ze, Safari heeft ze onlangs geleerd, maar in Firefox moet je ze handmatig in de instellingen inschakelen, dus voor gewone lezers werken ze simpelweg niet. Vraag de agent eerst te controleren of de browser ze überhaupt ondersteunt en laat anders de standaardovergang staan.

Hoe maak je van een website die je mooi vindt een prompt?#

De meest gebruikelijke manier om uit te leggen wat je wilt, is een voorbeeld laten zien. Dat werkt niet rechtstreeks met een agent: die ziet de website niet, maar tekst.

De skill video-to-superprompt overbrugt die kloof. De repositorybeschrijving: zet een videoreferentie om in een gedetailleerde prompt voor reproductie of inspiratie. De skill analyseert de opname in lagen: verhaal, indeling, beweging, typografie en 3D-afbeeldingen. De uitvoer is één kant-en-klare prompt.

De belangrijkste regel is nadrukkelijk geformuleerd:

De tweede skill, html-to-interaction-prompts, werkt met broncode: hij vindt alles wat beweegt—reacties op de cursor, 3D-afbeeldingen, scroll-effecten, lagen die met verschillende snelheden bewegen—en splitst de pagina op in afzonderlijke prompts, één voor elke sectie, knop, hoverstatus of elk effect. Het uitgangspunt is dat het gedrag van de bron de waarheid is en dat je geen effecten op basis van een screenshot verzint wanneer de code beschikbaar is.

De derde skill, stitched-full-page-capture, lost een praktisch probleem op. Een gewone schermafbeelding van een volledige pagina met lazy loading en 3D-afbeeldingen wordt grijs en leeg, omdat de opname wordt gemaakt voordat de pagina is gerenderd. De skill scrolt scherm voor scherm door de pagina, wacht tot alles tot rust is gekomen en voegt het resultaat samen.

Er is ook een manier zonder schermopname: koppel de agent via MCP aan een bibliotheek met live interfacevoorbeelden. De officiële server van Mobbin kan met één opdracht worden geïnstalleerd:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Open daarna een nieuwe sessie, selecteer de server uit de lijst en meld je aan in de browser. De agent krijgt toegang tot schermafbeeldingen van echte, werkende apps: er staan er meer dan 621,500 vermeld. Dit zijn schermafbeeldingen van voltooide producten, geen componenten of code. Belangrijke kanttekening: de Mobbin-server werkt niet met het gratis abonnement; hij is beschikbaar bij betaalde abonnementen (per juli 2026). Er is een apart artikel over Google Stitch over het koppelen van externe diensten aan een agent, met dezelfde methode om een ontwerpsysteem naar Claude Code te halen.

Stap voor stap: in één avond een geanimeerde website#

1. Een project opzetten

   Heb je nog geen project, begin dan met een lege map. Maak die aan, open hem in een terminal en voer daar claude uit. Vraag in je eerste prompt om een basisstructuur: ‘bouw een skelet voor een website van één pagina voor mijn bedrijf (beschrijf wat het is), gewone HTML en CSS, geen bibliotheken.’ Er verschijnt een verzameling bestanden—dat is de hoofdmap van je project, waar je vanaf nu alles doet.

2. De regels in CLAUDE.md zetten

   Kopieer het blok Anti-Generic Guardrails naar een bestand CLAUDE.md in de hoofdmap van het project. Staat er nog geen bestand, vraag de agent het dan aan te maken. De regels zijn voor Tailwind geschreven; gebruikt je basisstructuur gewone CSS, zeg dan tegen de agent: ‘pas deze principes toe op gewone CSS’—de betekenis van de regels verandert niet. Bekijk een uitleg van vier regels voor CLAUDE.md voor hoe het bestand zelf werkt en wat je er verder in kunt zetten.

3. De skill frontend-design installeren

   Gebruik de plug-in example-skills of kopieer de map frontend-design, zoals hierboven beschreven. Met de opdracht /doctor kun je controleren of de skill geladen is.

4. Eén visuele richting kiezen

   Kies één visuele richting. Eén, geen twee of drie. Brutale documentaires stijl mengen met beige minimalisme levert precies het middelen op dat je probeert te vermijden. De mapnamen zijn beschrijvend, maar je kunt ze niet visueel bekijken: open de SKILL.md in de map die je aanspreekt en lees de beschrijving van het palet en de lettertypen—alles staat erin.

5. Een statische pagina bouwen

   Zonder ook maar één animatie. Begin met typografie, tussenruimte en raster. Vraag de agent een lokale preview te starten en open het adres dat hij je geeft. Wil je de pagina op je telefoon bekijken, zeg dan: ‘voer hem zo uit dat hij op andere apparaten in mijn netwerk wordt geopend’, dan geeft de agent je een adres.

6. Eén bewegingsscène toevoegen

   Slechts één. Meestal is dat het eerste scherm: de kop verschijnt en een achtergrondlaag beweegt langzamer dan de voorgrond. Geef de agent het bestand llms.txt uit de bibliotheek en beschrijf de scène concreet—wat beweegt, waar en in hoeveel milliseconden. Laat opacity op het eerste scherm met rust; verderop staat een aparte sectie over waarom.

7. Een regel voor verminderde beweging toevoegen

   Pas de CSS-regel en JavaScript-inrichting voor verminderde beweging uit de toegankelijkheidssectie toe. Controleer de pagina vóór publicatie met verminderde beweging ingeschakeld.

8. Publiceren en de snelheid controleren

   Publiceer op een gratis statische hostingdienst—Vercel, Netlify of GitHub Pages. Vraag de agent: ‘publiceer dit project op Vercel en geef me de link.’ Haal de uiteindelijke URL pas na publicatie door PageSpeed Insights: de dienst werkt met openbare URL’s en kan geen lokale pagina zien. Bekijk ‘Largest Contentful Paint’—de tijd die nodig is om het grootste element weer te geven; de groene zone loopt tot 2,5 seconden. De agent kan de lokale versie vóór publicatie meten: Chrome DevTools MCP opent de pagina in Chrome en toont dezelfde maatstaf.

Bij stap zes is de kans het grootst dat je het werk van de eerste vijf stappen verpest.

Waarom laat te veel animatie een website er nog meer AI-gegenereerd uitzien?#

Hier ontspoort het denken van bijna iedereen die zich met dit onderwerp bezighoudt: te weinig animatie oogt goedkoop, dus moet je er meer toevoegen.

Dat staat in precies de skill frontend-design die je hebt geïnstalleerd om het ontwerp te verbeteren. Anthropic waarschuwt tegen overdaad in het hulpmiddel dat de agent gebruikt om de pagina te versieren.

De skill noemt ook andere standaardtechnieken: een groot getal met een klein bijschrift en een kleurverloop als standaardreactie op elke opdracht; genummerde blokken zoals 01 / 02 / 03, die alleen passend zijn wanneer er daadwerkelijk een volgorde is.

Zo ziet overdaad er in de praktijk uit: de agent krijgt de opdracht ‘voeg animaties toe’ en voegt aan elke sectie een scroll-onthulling toe. De kop schuift binnen, drie kaarten verschijnen een voor een, testimonials schuiven vanaf de zijkant binnen en de voettekst vervaagt. Elk effect is afzonderlijk prima. Samen leveren ze een pagina op die nooit ophoudt met bewegen en nergens nadruk op legt.

Een live website werkt anders: één bewuste scène, meestal op het eerste scherm, en daarna terughoudendheid. Beweging werkt als nadruk—het heeft zin zolang het op één woord valt.

Dat levert een promptregel op. Formuleer hem zo: ‘maak één scène op het eerste scherm en laat al het andere statisch.’ Dat zijn maar een paar woorden meer dan ‘voeg animaties toe’, maar het resultaat is een orde van grootte beter.

Hoe schaden animaties de snelheid van een website?#

De drie maatstaven die Google gebruikt om een pagina te beoordelen zijn: de tijd om het grootste element weer te geven—hoogstens 2,5 seconden; de respons op een interactie—hoogstens 200 milliseconden; en de verschuiving van de indeling—hoogstens 0,1. Ze worden gemeten op het 75e percentiel van echte bezoeken.

Laten we uitwerken waarom dit hier van belang is. Standaard bouwt de agent een onthulling als volgt: hij zet een sectie op opacity nul en verwijdert die instelling zodra de sectie in de viewport verschijnt. Staat die onthulling op het eerste scherm, dan kan de afbeelding volledig geladen en gedecodeerd zijn, maar de maatstaf telt hem nog steeds niet mee tot de weergave begint. Het is nog erger als een script opacity na het laden verwijdert—dan wacht de maatstaf op het hele script.

Er zijn twee manieren om dit op te lossen. Begin de onthulling óf met een kleine opacity-waarde die niet nul is, zodat de eerste weergave meetelt. Óf laat opacity op het eerste scherm met rust en animeer alleen de verschuiving.

Het tweede punt is wat goedkoop te animeren is en wat duur.

In gewone taal: de browser stelt het beeld samen uit lagen, en veranderingen in positie en opacity vinden plaats in de laatste, goedkoopste stap. Al het andere dwingt de browser de pagina opnieuw te berekenen. Metingen uit dezelfde documentatie: animeren met offsets voor top en left kost 37 milliseconden voor de indeling en 79 voor de weergave; hetzelfde visuele effect via transform kost voor beide nul.

En hier is een tegenstelling om te onthouden: opacity is goedkoop om samen te stellen, maar diskwalificeert een element voor de snelheidsmaatstaf. Een animatie die goedkoop is voor de browser en veilig voor de prestaties zijn dus twee verschillende dingen.

Nog iets over de eigenschap will-change, die agents graag ‘ter optimalisatie’ overal bij zetten. De documentatie van MDN zegt het tegenovergestelde:

Daar staat ook dat de eigenschap bedoeld is als laatste redmiddel voor bestaande prestatieproblemen. Ze werkt niet preventief. Een regel als will-change: transform, opacity op vijftig elementen is een typisch herkenningsteken van gegenereerde code.

Het verhaal is eenvoudiger bij verschuiving van de indeling. Google’s documentatie geeft animaties niet de schuld; integendeel, zorgvuldige overgangen helpen inhoud bij te werken zonder de lezer te laten schrikken. Het recept is hetzelfde: verander de schaal met transform in plaats van width en height, en verplaats met offsets in plaats van coördinaten.

En mensen die lichamelijk last hebben van beweging?#

Deze sectie is van belang om meer dan alleen beleefdheid. De doelgroep die bij een ondernemer koopt, bestaat precies uit mensen van veertig jaar en ouder.

Het W3C-consortium beschrijft de gevolgen zonder ze af te zwakken: misselijkheid en migraine, soms ernstig genoeg om te moeten gaan liggen.

Je kunt dit aanpakken met drie regels stijlen:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Houd drie punten in gedachten.

Schrijf de animatie als standaardgedrag en schakel die binnen deze regel uit—zo degradeert de pagina veiliger dan wanneer je het omgekeerde doet.

De specificatie zegt ‘verwijdert, vermindert of vervangt’—volledig verwijderen is niet eens de eerste optie. Een scherpe inschuiving vervangen door een korte vervaging werkt beter dan die helemaal afkappen: alle animaties uitschakelen breekt laadindicatoren en voortgangsbalken.

JavaScript-animaties hebben eigen voorkeurafhandeling nodig; een CSS-duuroverride annuleert geen GSAP-tijdlijn. Alleen matchMedia(...).matches opslaan doet niets zonder een vertakking op die waarde. Houd voor GSAP het element zichtbaar in gewone HTML/CSS en maak beweging alleen wanneer de gebruiker die toestaat:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

De titel mag geen verborgen of verschoven basisstijl hebben. Bij verminderde beweging blijft die zichtbaar en statisch. Verandert de voorkeur terwijl de pagina open is, dan draait GSAP de animatie terug zodra de query niet meer matcht. mm.revert() verwijdert de verzamelde animatie ook bij opruimen. Maak in Motion een overeenkomstige vertakking in de bibliotheekinrichting; alleen de CSS-regel is onvoldoende. Zie de GSAP-documentatie over matchMedia-levenscyclus en opruimen.

Houd ook rekening met een formeel toegankelijkheidscriterium. WCAG 2.2.2, een criterium van niveau A, vereist dat de gebruiker iets kan stoppen wanneer iets automatisch beweegt, knippert of scrolt, langer dan vijf seconden duurt en naast andere inhoud wordt getoond. Dit geldt voor carrousels die automatisch doordraaien en oneindige marquees, die agents graag invoegen.

Zeven plekken waar het misgaat#

1. Het eerste scherm is verborgen tot het vervaagt. Een element met opacity nul telt niet mee als kandidaat voor de weergavemaatstaf. Dit is de duurste fout, omdat die een maatstaf schaadt die van invloed is op zoekresultaten.

2. Alles wordt geanimeerd. Elke sectie schuift binnen, elke kaart verschijnt. Anthropic zegt duidelijk dat dit de indruk van een gegenereerd ontwerp vergroot.

3. Scrolljacking. Dit gebeurt wanneer een website het normale gedrag van het muiswiel vervangt door een eigen ‘cinematische’ logica.

In hetzelfde onderzoek ervoeren de meeste deelnemers op zijn minst lichte desoriëntatie.

4. Indelingseigenschappen worden geanimeerd. Coördinaten en afmetingen in plaats van transforms. 37 en 79 milliseconden tegenover nul.

5. Animaties zijn te lang. De bruikbare duur is 100 tot 400 milliseconden, waarbij 400 al erg langzaam is en alleen geschikt voor grote bewegingen. Agents gebruiken standaard graag een volle seconde.

Volgens zijn bevindingen loopt de bruikbare duur van 100 tot 400 milliseconden, waarbij 400 al erg langzaam is en alleen geschikt voor grote bewegingen. Agents gebruiken standaard graag een volle seconde.

6. Er is geen regel voor verminderde beweging. De agent voegt die niet vanzelf toe.

7. De website wordt trager bij elke interactie. Dit geldt specifiek voor React: een animatie die wordt aangemaakt zonder verwijzing naar het element en zonder opruiming, wordt bij elke componentupdate vermenigvuldigd. De pagina begint geleidelijk om onverklaarbare redenen te vertragen.

Er is een achtste valkuil. De aanpak waarbij ‘de agent een screenshot maakt en repareert wat hij ziet’ werkt uitstekend op statische pagina’s, maar met geanimeerde elementen raakt de agent verstrikt in een eindeloze bewerkingslus: hij ziet een tussenframe, denkt dat het een fout is, herstelt die en ziet weer een tussenframe. Bovendien kost elke schermafbeelding context.

Wat kost het en hoe voorkom je dat één website je maandlimiet opsoupeert?#

Een typisch verhaal uit Engelstalige vibe-codinggemeenschappen: iemand bouwt een flitsende pagina met een scroll door de ruimte, plaatst het resultaat en uit de discussie blijkt dat die ene website de hele maandlimiet heeft opgebruikt.

Dat is te verwachten. Animaties kosten om verschillende redenen tegelijk meer dan gewoon werk aan de indeling. Je kunt het resultaat niet controleren door de code te lezen; er zijn iteraties nodig. Bij elke wijziging moeten bestanden opnieuw worden gelezen. En een screenshotlus voor bewegende elementen voegt onnodige rondes toe.

Wat helpt:

Bouw één scène tegelijk en leg het resultaat vast. Een verzoek in één keer om ‘op de hele website animaties toe te voegen’ garandeert dat je te veel uitgeeft. Je kunt screenshotcontrole voor geanimeerde elementen uitschakelen en ze zelf visueel bekijken. Houd CLAUDE.md kort, zodat de regels niet bij elk verzoek context verbruiken. En geef de agent vooraf het bestand llms.txt van de bibliotheek, anders verzint hij een verouderde koppelingsmethode en gaat vervolgens zijn eigen verzinsel debuggen.

Het artikel waarom Claude Code het hele project opnieuw leest legt uit waar tokens naartoe gaan als je aan een project werkt; het artikel hoe je je Claude Code-limieten niet opgebruikt bespreekt manieren om het gebruik binnen de perken te houden.

Wat nu?#

Bouw je eerste pagina met de acht stappen. Kies één visuele richting, maak één scène op het eerste scherm en voer een snelheidscontrole uit.

Voor je volgende stappen—Ailoot.