---
title: "super-prototyping"
description: "Rebuild and design product UI as self-contained HTML artboards on a local tldraw canvas. Clone a real app from screenshots by measurement, design new screens from measured tokens, and drive the canvas that shows them."
canonical: https://agentpluginsdirectory.com/plugins/super-prototyping
last-updated: 2026-09-21
---

# super-prototyping
Rebuild and design product UI as self-contained HTML artboards on a local tldraw canvas. Clone a real app from screenshots by measurement, design new screens from measured tokens, and drive the canvas that shows them.
- Slug: super-prototyping
- Publisher: ReScience Lab
- Repository: https://github.com/ReScienceLab/super-prototyping
- Manifest: plugin.json
- Version: 1.5.2
- License: Apache-2.0
- Category (editorial): other
- Skills: 4 (brand-kit, clone-prototype, new-ui-mock, prototype-canvas)
- MCP servers: 0
- Stars: 76
- Repository created: 2026-08-29
- Repository last pushed: 2026-09-21
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/super-prototyping
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What super-prototyping does, in the publisher's words

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.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/ReScienceLab/super-prototyping/HEAD/README.md

## Skills

- brand-kit: Collect a product's official brand and promotional material and put it on its prototype canvas as image rows, one row per surface. Covers the company's own brand kit, the App Store, Google Play and Microsoft Store listings, verified social accounts, the newsroom and the marketing site; writing asse…
- clone-prototype: Clone a real app's screens as pixel-accurate, self-contained HTML artboards on the prototype canvas. Overlay a grid on the reference and sample colours visually, derive one measured design-token block, generate one HTML file per screen from a single script, verify by re-rendering, and park the refe…
- new-ui-mock: Design a new screen, flow or component as a self-contained HTML artboard on the prototype canvas, built from the board's existing design tokens rather than invented values. Covers picking or extending the token block, generating a row of screens from one script, iterating against annotated screensh…
- prototype-canvas: Start and operate the local tldraw design canvas that shows HTML artboards. Launch the dev server against a project's board folders, add or switch boards, drive shapes through the bounded window.snapCanvas bridge, and act on annotated screenshots of the canvas. Use when asked to open/launch the can…

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.