Back to the notebook

Building the prototyping tool I needed as a PM

prototypingdesign systemskills

I design screens with Claude. As a product manager I need two things at once. The prototype has to sit on the real product: its components, data shaped like its own, flows and scenarios as tangled as the real ones. And it has to be fast: three UX ideas compared this afternoon, not next sprint.

The tools I tried each pick one side. Claude Design, Lovable and Figma Make are fast, but they bring their own components and their own data; in my tests of Claude Design (October 2026), every state and every scenario was faked by hand. A dev branch and Storybook have the real thing, but every change is slow, and versions never sit side by side.

Claude Design

  • Production design system: partly
  • Data shaped like production: no
  • Data scenarios: no
  • Versions side by side: partly

Dev branch

  • Versions side by side: no
  • Light to iterate: no
  • A link to share: partly
  • Nothing to install: partly
  • Free visual exploration: no

Lovable

  • Production design system: no
  • Data shaped like production: no
  • Data scenarios: partly
  • Versions side by side: no
  • Free visual exploration: partly

Storybook

  • Data shaped like production: partly
  • Data scenarios: partly
  • Versions side by side: partly
  • Nothing to install: partly
  • Free visual exploration: no

Figma Make

  • Production design system: partly
  • Data shaped like production: no
  • Data scenarios: no
  • Versions side by side: no

protolab

  • A link to share: partly
  • Nothing to install: no
  • Free visual exploration: partly

So I built protolab. It has its costs: it needs the app's repo to run, and a link leaves my machine only once the lab is deployed. But of everything I tried, it is the best balance between the real product and speed.

What it keeps, what it adds

One page in protolab, marked up. Pick a number.

Kept from production

  1. Notebook, installed as a package. The row, the chip and the button are the ones in production.

    Version A · rows

    yourapp.com/lab/p/orders?a.layout=rows&s.volume=typical

    Link copied
    Orders5Button
    AllPaidShippedRefundedChip
    Léa Martinpaid€84.0024 Oct
    Tomás Ruizshipped€19.9024 Oct
    Aiko Tanakapaid€212.4023 Oct
    Noah Beckerrefunded€46.0022 Oct

    + 1 more order

    EntryRow
    protolab
    Version
    Data

    Version B · cards

    yourapp.com/lab/p/orders?a.layout=cards&s.volume=typical

    Link copied
    Orders5
    AllPaidShippedRefunded
    Léa Martinpaid€84.00
    Tomás Ruizshipped€19.90
    Aiko Tanakapaid€212.40
    Noah Beckerrefunded€46.00

    + 1 more order

    protolab
    Version
    Data

Added by the lab

The engine is open source: romeohunneaul/protolab. It installs in a Next.js project and builds with that project's own components.

Inspired by an internal prototyping tool I used on a fintech engagement.

Ask about François

Answers come from the data behind this site, nothing else. When it does not know, it says so.