super-prototyping

An app and a set of agent skills for rebuilding and designing product UI as self-contained HTML artboards on a local tldraw canvas, with the measuring toolkit the skills drive. Your boards stay in your project, and the app upgrades around them.

The point of it is a replica you can defend. Every colour and every metric on a cloned board traces back to a measurement of the source capture, and the capture itself is parked on the canvas directly under the replica, so the two are one glance apart rather than one memory apart.

How you use it: install the app, open the canvas, then hand Claude Code your screenshots and ask for the sp-clone-prototype skill. It grids the capture, samples it region by region, writes one measured token block, generates every board from a single gen.py, then re-renders those boards and diffs them against the capture until the numbers hold. sp-new-ui-mock does the same for screens that have no reference to measure. Both write .html files into canvases/<board>/, and the canvas picks them up as shapes with no registry, no build step and no design tool.

Five community projects

Five of the app folders in canvases/, each shared to the community as a project that opens read-only in the app. That folder's own README.md lists them all. Each is a real sp-clone-prototype run, rebuilt from measured samples with the evidence recorded for every token. Open any of them with ?canvas=<slug>, and one board of it with ?canvas=<slug>#<file>. The address follows whatever is open, the page and the board in the inspector, so the URL in the bar is always the link to share.

duolingo-ios, eight screens that are mostly picture

Replica on top, its source capture directly below it. The captures are cropped to the same 393 × 852 screen and masked to the same 52pt corner radius, so the two rows line up pixel for pixel. Six screens of the learning path and the two modal sheets.

luma-ios, twelve screens and the process behind them

Six of the twelve. The replica draws a Dynamic Island the capture does not have: the source composites it out, the iOS frame spec draws it, and this run keeps the frame and excludes the top 56pt from its numbers.

notion-ios, eighteen screens

Replica on top, its source capture directly below it. @3x captures, same crop and same scale.

claude-ios, fifteen screens across four flows

Six of the fifteen. Home, a streaming answer, voice mode, an artifact card, the Add to Chat sheet and a photo answer. The serif answer column is set in Georgia standing in for Tiempos, matched on cap height and about 11% wider.

raycast-ios, eleven screens across three flows

Replica on top, source capture directly below it. Same crop, same scale, so the two rows line up pixel for pixel. The Models sheet and Presets flows; the six "Ask AI" screens are on the same board.

Install

On macOS, Homebrew installs the app:

brew install --cask ReScienceLab/tap/super-prototyping

Then open Super Prototyping. The cask installs the same Super-Prototyping-<version>-<arch>.dmg every release attaches, so downloading that instead gives the same app, signed and notarised from v1.5.2 on.

On Windows, releases after v1.5.2 attach Super-Prototyping-<version>-x64.exe. It installs for the current user and asks for no administrator. It is not signed, so the first time it runs Windows says "Windows protected your PC": choose More info, then Run anyway.

From then on the app updates itself. On launch it looks for a newer release, downloads it in the background and asks once to restart; Later installs it when you quit. The first launch's welcome shows the version, and a click on it checks again. v1.5.3 and earlier do not, so update those once by hand, with brew upgrade --cask super-prototyping or the new installer.

The app is the canvas in a window, and it needs no terminal and no bun. It opens straight onto its home page, which is no project's, and asks over it which agent you will work with, Claude Code or Codex. New projects are made in Documents/Super Prototyping from the home page or the + on the tab bar, and each shows its canvases. The home page's Community section lists the projects people shared, each opening read-only as a tab, and sp duplicate <id> copies one into your projects. The agent works in the panel on the left, with or without a project open, and remembers the conversation until you start a new one. It runs in a folder of its own under Documents/Super Prototyping/.workspaces, which holds the skills, kept at the app's version.

The app is also the whole install for an agent outside it. On macOS, every launch links sp, refkit and artgen onto ~/.local/bin, adds that to your shell's PATH once, and links the skills into ~/.claude/skills, ~/.agents/skills (Codex and the agents that share it), ~/.hermes/skills and ~/.factory/skills, wherever that agent is installed. Every link goes through ~/.local/share/super-prototyping/current, which the app points at itself on each launch, so an update moves the skills and the commands with it. With Codex installed it also lets Codex run the three commands without asking, as a prefix_rule in ~/.codex/rules/default.rules. The commands run the toolkit inside the app with uv. On Windows the app links the skills the same way, as junctions, and runs uv tool install on its toolkit, which puts the commands in ~\.local\bin; uv's own installer already put that directory on PATH. sp uninstall takes all of it back.

An agent that has the skills and not the app installs it itself: the sp-canvas skill's scripts/install.sh downloads the app into /Applications (or ~/Applications) and opens it. When the app has found a newer release, every command prints a [super-prototyping:notice] line on stderr, and sp upgrade has the app install it.

Start a project

Your project holds boards and nothing else — no canvas app, no toolkit, no skills to keep in step:

mkdir -p my-product-design/canvases && cd my-product-design
cp -r "$(sp root)/canvases/templates" canvases/<slug>
python3 canvases/<slug>/gen.py

sp root prints the tree inside the app. The community projects above are not in it: sp fetch <id> prints a folder holding a copy of one.

Run the canvas

sp open               # the app, on its home page
sp start              # the same canvas in a browser, without the app

Every project is a folder under ~/Documents/Super Prototyping, made from the home page's New project, and served at /p/<name>/; PROTOTYPING_PROJECTS_DIR moves that folder. No folder elsewhere is ever opened as a project, so a project's Delete cannot trash code you did not make there. sp open starts the app if it is not running and prints the address. sp start is for where the app cannot run. From a checkout without a build, it downloads the canvas built for that version into ~/.cache/super-prototyping/, then serves it on 127.0.0.1:5173 with node or bun, opens the browser, and prints the address. --port N (or SP_CANVAS_PORT) moves the port, sp status and sp stop do what they say. sp paths lists the two directories it writes, and sp clean removes them.

Deep-link a page with ?canvas=<slug>, and one board of it with ?canvas=<slug>#<file>: it opens in the inspector with the camera on it, and clicking any board writes that link into the address bar. Right-clicking the canvas offers Force refresh; choose it after editing a layout.json. A board folder added after boot appears on its own.

The workflow

Six skills, in skills/ (which .claude/skills/ and .agents/skills/ symlink to, so this checkout loads what an install does):

The rule the whole thing is built around: **every colour and every metric in a clon