Vele studio’s en geen voordeur

Studio draaide alleen als demo. Nu wordt het een open platform. Gebouwd door twee Claudes en mij ertussen.
Studio.pb.nl heeft dertien studio’s. Packshots, e-com, sieraden, campagnes, karakters. Alles werkt.
Maar open was het nooit. Studio draaide alleen als demo, bij een paar bedrijven. Geen voordeur. Geen pagina die zegt wat dit is. Geen plek om credits te kopen. Een gereedschapskist, geen product.
Dat gaat veranderen. Studio wordt een open platform, met credits, tickets en een betaalsysteem.

Twee Claudes

Voor het eerst werkte ik met twee Claudes tegelijk. Eén als ontwerper, in Design, op een ontwerpbord in de Claude-app. Eén als programmeur: Claude Code, lokaal op mijn Mac, in de echte app. Ze praten niet met elkaar. Ik loop heen en weer met screenshots en opdrachten. De nieuwe designfunctie van Claude is echt wel een hele toffe nieuwe ontdekking.
“Het is voor het eerst dat ik met jou als design Claude werk en dat we samen de programmeur en de aanstuurder zijn. Ik vind het wel echt supervet.”

Vier ontwerpversies later stond het. Zeventien schermen, een klein CMS, een eigen logo en een huisstijlboek. Is echt niet F*cking normaal, dat we een design deck maken (in al html) een huisstijl + boek en alles gedocumenteerd en uitgewerkt samen in diverse opdracht .md files voor claude code! Effe op een zondagmiddag ......WOW!

“Klaar!”

En vandaag eerste deel naar Claude Code. Alle kleuren, alle maten, elke pagina. Claude Code ging bouwen en meldde dat hij klaar was. En nog eens. En nog eens.
Mijn screenshots en Vercel deployments bekijkend zeiden iets anders. Labels in de verkeerde letter. Dropdowns waar knoppen hoorden. Drie studio’s nog gewoon in het oude ontwerp.
Twee correctierondes later zei ik: “Ik wil elke pixel goed.” Maar op het oog is “klaar” een mening.

Dan meten we het

Dus ging Claude Code zelf meten. De ontwerper renderde alle 23 schermen als referentie. Claude Code bouwde een script met Playwright en pixelmatch, dat ontwerp en app per element vergelijkt: letter, maat, kleur en afstand. In zijn instructiebestand kwam een nieuwe regel: een pagina is pas klaar onder de 1% verschil, en nooit meer “klaar” zeggen zonder het percentage erbij.

En dit clade code geven als opdracht werkte ook top:

// De bron van waarheid is de Claude Design-export in [map met de HTML + .md-bestanden].
Bouw een verificatie-setup, voordat je verder bouwt:

1. Installeer playwright, pixelmatch en pngjs als devDependencies.
2. Maak scripts/verify-design.ts dat per pagina:
   - de originele HTML en mijn lokale pagina opent op 1440px en 390px breed
   - fonts laat laden (document.fonts.ready) en animaties uitzet
   - full-page screenshots maakt en een pixelmatch-diff genereert in /diffs (met percentage)
   - van alle zichtbare tekst- en blokelementen getComputedStyle + getBoundingClientRect
     uit beide pagina's haalt en een tabel geeft van elke afwijking > 1px of andere waarde
3. Zet in CLAUDE.md als harde regel:
   - Neem waarden letterlijk over uit de originele CSS. Niet afronden naar Tailwind-stappen;
     gebruik arbitrary values of de originele CSS.
   - Een pagina is pas klaar als diff < 1% én de stijl-tabel leeg is.
   - Meld nooit "klaar" zonder het diff-percentage en de tabel te tonen.
4. Draai het nu op de bestaande pagina's en laat me de resultaten zien, vóór je iets fixt.
// Plak hier je code...

De eerste meting kwam terug. Nul verschillen.
Te mooi. Claude Code had het inlogscherm vergeleken met het ontwerp. En nul verschillen betekende niet dat alles klopte. Het betekende dat er niets gekoppeld was. Het script vergeleek niets met niets, en vond dat prima.
Nu heeft elk element een vast label, per scherm 19 tot 187 stuks. Plus een spelregel, want een slimme programmeur vindt altijd een kortere weg: een pagina met nul gekoppelde elementen telt als mislukt.

Wat je straks ziet

Op de genereerknop staat wat een beeld kost, vóór je klikt. Je tegoed staat onderin het menu. Het menu heeft vier groepen met elk een eigen tint. In het CMS kies ik per studio het beeldmodel: Nano Banana Pro, Nano Banana 2.1 of Seedream 5 Pro. En met één schakelaar krijgt de hele studio de kleuren en het logo van een bedrijf waarmee we samenwerken.
Studio heeft nu een voordeur. Claude Code is nog aan het meten.

En dit word effe knallen deze weken om te zien hoe ver we dit live krijgen. Gaaf project.

Claude & Peet