clone-prototype

# Clone prototype Six 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: `tools/refkit.py` (grid / sample / bands / bbox / scan / hairline / font / shoot / diff / blend / tokens / batch / ink / crops / montage). Needs `pillow` + `numpy`; `shoot` needs Google Chrome. Work in a scratch directory, not in the repo. ```bash REPO="$(git rev-parse --show-toplevel)" python3 "$REPO/tools/refkit.py" --help ``` --- ## Phase 0: collect references Get the highest-resolution capture you can; every later measurement is capped by it. - **The user's own screenshot** is usually the authority on *which* screens and *which* scroll state. Save each one as its own crop (`p1.png … pN.png`) before doing anything else. Image caches rotate and the attachment will disappear mid-task. - **Mobbin MCP** (`mcp__mobbin__search_screens`, `search_flows`), when available. Run one search per screen, `platform: "ios"`, and keep `task_intent` **identical** across every call in the r...