super-prototyping
An agent plugin for rebuilding and designing product UI as self-contained HTML artboards on a local tldraw canvas, with the measuring toolkit and the agent skills that drive the work. Install it into any project; your boards stay in your project and the plugin 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 plugin, start the canvas, then hand Claude Code
your screenshots and ask for the 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. new-ui-mock does the same for
screens that have no reference to measure. Both write .html files into
mockups/canvases/<board>/, and the canvas picks them up as shapes with no
registry, no build step and no design tool.
Five worked examples
Five of the fourteen app folders in mockups/canvases/. That folder's own
README.md lists them all. Each is a real 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, six 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
Claude Code. Two commands, from inside any project:
/plugin marketplace add ReScienceLab/super-prototyping
/plugin install super-prototyping@super-prototyping
Then install the toolkit the skills call, once per machine:
uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools"
/plugin update super-prototyping picks up a new release; re-run the uv tool install line with --force to move the toolkit with it.
A smaller install. The full one is about 151 MB, because this repo is also
the workspace whose fourteen worked example boards the skills read, and a
marketplace install downloads the repo and then copies its worktree into the
plugin cache. If you only want the canvas and the toolkit, declare the
marketplace in ~/.claude/settings.json with sparsePaths and Claude Code
clones just those directories, cone mode:
{
"extraKnownMarketplaces": {
"super-prototyping": {
"source": {
"source": "github",
"repo": "ReScienceLab/super-prototyping",
"sparsePaths": [".claude-plugin", "skills", "canvas", "tools",
"mockups/canvases/templates"]
}
}
}
}
Measured at 6.7 MB installed, against 151 MB. Add
mockups/canvases/duolingo-ios to that list to keep the one example
clone-prototype reads most, or drop the key entirely to get everything.
Codex has the same field, spelled sparse_paths.
Codex, or anything else that reads a skills directory. Clone once, then link:
git clone https://github.com/ReScienceLab/super-prototyping.git ~/.super-prototyping
~/.super-prototyping/scripts/install-skills.sh
It installs the toolkit and symlinks skills/* into every product skill root
it finds (~/.codex/skills, ~/.hermes/skills, ~/.pi/agent/skills). The
skills are links, not copies, so git pull in that checkout updates every
product at once. The toolkit is a copy, so re-run the script after a pull to
move refkit, artgen and sp-canvas with it. --list shows what it would
do and changes nothing.
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/mockups/canvases && cd my-product-design
cp -r "$(sp-canvas root)/mockups/canvases/templates" mockups/canvases/<slug>
python3 mockups/canvases/<slug>/gen.py
sp-canvas root prints wherever the plugin landed. Every worked example above
is in there to copy from too.
Run the canvas
sp-canvas start
It finds the bundled canvas app, installs its dependencies on first run, boots
it on 127.0.0.1:5173 against ./mockups/canvases, and prints the address.
--canvases DIR points it somewhere else, --port N moves it, sp-canvas status and sp-canvas stop do what they say.
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. The bottom toolbar carries a
styles-panel toggle alongside tldraw's own tools; the top bar carries a
force-relayout button. Press it after editing a layout.json. A board folder
added after boot appears on its own.
The workflow
Three skills, in skills/ (which .claude/skills/ and .agents/skills/
symlink to, so this checkout loads what an install does):
| Skill | Use it for |
|---|---|
| clone-prototype | Copying a real app's screens. Grid the reference, sample colours visually, name the type face, derive one measured token block, generate the artboards, verify by re-rendering, park the reference underneath. |
| new-ui-mock | Designing new screens with no reference, built on existing tokens, including the empty/loading/error states and side-by-side proposals. |
| prototype-canvas | Running and operating the canvas: boards, layout.json, the window.snapCanvas bridge, annotated-screenshot review, the force-refresh. |
The rule the whole thing is built around: every colour and every metric in a cloned artboard traces to a measurement. Grid the reference image, look at it, name the element, then write the token. Values that "look about right" are how a replica quietly stops being one.
clone-prototype, phase by phase
Never skip ahead. Sampling before tokens, tokens before HTML.
| Phase | What actually happens | Looks like |
|---|---|---|
| 0Collectreferences | Save every capture to a scratch dir first, because image caches rotate mid-task. Record the capture scale once, in px per design pt, and cross-check it against height. A 0.76 px/pt strip cannot settle thin ink, so get one native @3x capture of any screen in the same app.Out: p1.png … pN.png, and one number: 300 / 393 = 0.7634. |
One settings row, both scales. The divider survives only one of them. |
| 1aGrid,then look | refkit grid p4.png -o g04.png --zoom 3 --minor 10 --major 50 draws a labelled grid onto the pixels. Then you read g04.png as an image and name the element each region belongs to before measuring anything. Coordinates picked blind produce numbers with no element attached, and those are the ones that land in the wrong token. Gutters, row pitch, insets and radii come off the same red labels.Out: a named region list, in design pt. |
Cyan every 10pt, red every 50. The preset rows land 64 apart. Read, not guessed. |
| 1bSample,region byregion | refkit sample p4.png 76 646 132 668 --pt 3 runs a census over one named region; --pt keeps both halves in design pt, so you type the numbers you just read off the red labels. Which line of the census you believe depends on what you pointed at:• page, card, sheet → flat fills. A pixel equal to all four neighbours is a real fill, not an antialiased edge• badge, dot, brand mark → all pixels, top entry, on a core-only crop; too small to have a flat interior• text → ink core, the darkest few percent. The mode of a text region is its background: 93% of that Mistral box is #F2F2F2• pitch, edges, radii → bands / bbox / scan• 1pt divider or border → refkit hairline instead; a hairline never reaches full coverage in a downscaled capture, so solve it from the ink deficit rather than picking it. A solve within |