prototype-canvas
SolidStart and operate the local tldraw design canvas in this repo. Launch the dev server, add or switch boards under mockups/canvases/, drive shapes through the bounded window.snapCanvas bridge, and act on annotated screenshots of the canvas. Use when asked to open/launch the canvas, put a mockup on the canvas, annotate or draw on it, fix overlapping frames after a layout.json edit, or respond to a screenshot of the canvas with notes drawn on it.
Install
Quality Score: 82/100
Skill Content
Details
- Author
- ReScienceLab
- Repository
- ReScienceLab/super-prototyping
- Created
- 4 weeks ago
- Last Updated
- today
- Language
- HTML
- License
- Apache-2.0
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
bo-canvas
BO Canvas - move and resize the parts of an EXISTING section by hand on a screenshot (hero text, background image, logo, nav, buttons, any component), then paste back a ready prompt with the exact target boxes. MUST USE when the user says "BO canvas", "use BO canvas", "bo-canvas", "resize canvas" or "move canvas", or wants to drag / resize / reposition parts of a section they screenshotted ("make the hero text bigger and move the button to the right, let me show you"). Sibling of plan-canvas - plan-canvas picks between design DIRECTIONS, BO canvas adjusts the size and position of what is already there.
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 reference underneath its mockup. Use when asked to 100% copy / clone an app's UI, rebuild screens from screenshots or Mobbin, extract a design system from reference images, or check a mockup against its reference.
design
Create a design canvas - a multi-artboard visual design published as an Artifact that runs Claude Design's canvas editor (an early preview of Claude Design inside Claude Code). You DRAFT the design as .dc.html artboards laid out on one pan/zoom canvas; where saving is enabled for the user's account they refine every element visually (click-to-select, a properties panel, inline text editing, undo/redo) and Save publishes a new version for everyone, otherwise they get a view-and-export (PNG/PDF) preview of your draft. Good for UI mockups and screen flows, landing pages, marketing and social graphics, and print pieces - posters, flyers, brochures as single-page artboards; memos and reports as one flowing artboard. Use when someone wants a design, mockup, wireframe, UI or screen design, landing page, poster, flyer, brochure, banner, card, one-pager, or any visual layout they would rather tweak by hand than in code. Only for CREATING or re-seeding a canvas; an existing one is edited in its published Artifact.