Vibe codingNOV 2, 2026

Many Studios and No Front Door

Studio operated only as a demo. Now it becomes an open platform.

Figure 01.0 — Many Studios and No Front Door

Studio operated only as a demo. Now it becomes an open platform. Built by two Claudes and me in between.
Studio.pb.nl has thirteen studios. Packshots, e-com, jewellery, campaigns, characters. Everything works.
But it was never open. Studio operated only as a demo, at a few companies. No front door. No page explaining what this is. No place to purchase credits. A toolbox, not a product.
That is going to change. Studio becomes an open platform, with credits, tickets, and a payment system.

Two Claudes

For the first time, I worked with two Claudes simultaneously. One as a designer, in Design, on a design board in the Claude app. One as a programmer: Claude Code, locally on my Mac, in the actual app. They do not communicate with each other. I shuttle back and forth with screenshots and assignments. The new design feature of Claude is indeed a very cool new discovery.
“It’s the first time I’m working with you as design Claude and that we are both the programmer and the director. I think it’s really super cool.”

Four design versions later, it was set. Seventeen screens, a small CMS, a custom logo, and a brand style guide. It’s truly unbelievable that we create a design deck (all in HTML), a style guide + book, and everything documented and developed together in various assignment .md files for Claude code! Just on a Sunday afternoon... WOW!

“Done!”

And today, the first part to Claude Code. All colours, all sizes, every page. Claude Code started building and reported that it was done. And again. And again.
Reviewing my screenshots and Vercel deployments, they said something different. Labels in the wrong font. Dropdowns where buttons should be. Three studios still in the old design.
After two correction rounds, I said: “I want every pixel right.” But to the eye, “done” is an opinion.

Then We Measure It

So Claude Code went on to measure itself. The designer rendered all 23 screens as a reference. Claude Code built a script with Playwright and pixelmatch, comparing design and app per element: font, size, colour, and distance. A new rule was added to its instruction file: a page is only done under 1% difference, and never say “done” without the percentage.

And giving this task to Claude Code worked great too:

// The source of truth is the Claude Design export in [folder with the HTML + .md files].
Build a verification setup before you continue building:

1. Install playwright, pixelmatch, and pngjs as devDependencies.
2. Create scripts/verify-design.ts that per page:
   - opens the original HTML and my local page at 1440px and 390px wide
   - loads fonts (document.fonts.ready) and disables animations
   - takes full-page screenshots and generates a pixelmatch-diff in /diffs (with percentage)
   - retrieves getComputedStyle + getBoundingClientRect from all visible text and block elements
     from both pages and provides a table of each deviation > 1px or other value
3. Set in CLAUDE.md as a hard rule:
   - Literally take values from the original CSS. Do not round to Tailwind steps;
     use arbitrary values or the original CSS.
   - A page is only done if diff < 1% and the style table is empty.
   - Never report "done" without showing the diff percentage and the table.
4. Run it on the existing pages and show me the results before you fix anything.
// Paste your code here...

The first measurement came back. Zero differences.
Too good to be true. Claude Code had compared the login screen with the design. And zero differences did not mean everything was correct. It meant nothing was linked. The script compared nothing with nothing, and found that fine.
Now each element has a fixed label, per screen 19 to 187 pieces. Plus a rule, because a clever programmer always finds a shortcut: a page with zero linked elements counts as a failure.

What You Will See Soon

The generate button shows what an image costs before you click. Your credit is displayed at the bottom of the menu. The menu has four groups, each with its own shade. In the CMS, I choose the image model per studio: Nano Banana Pro, Nano Banana 2.1, or Seedream 5 Pro. And with one switch, the entire studio gets the colours and logo of a company we collaborate with.
Studio now has a front door. Claude Code is still measuring.