clone-prototype
Clone prototype
Seven phases, in order. Never skip ahead. Tokens before HTML, sampling before tokens. Every colour and every metric in the final HTML must trace back to a measurement, not to a guess that "looks about right". The one thing built out of order is Phase 5's reference row: it needs no measurement, so it goes up first (see Phase 5).
Output lands in mockups/canvases/<slug>/ and the canvas picks it up
automatically. The prototype-canvas skill covers how folders become tldraw
pages and how layout.json rows work. Name the folder for the source,
e.g. notion-ios.
Toolkit: refkit (grid / sample / bands / bbox / scan / hairline / font /
shoot / diff / blend / tokens / batch / ink / crops / key / montage), plus
artgen for the rare asset that has to be drawn. Both are commands on your
PATH; shoot additionally needs Google Chrome (on Windows, Edge will do).