用途
sp-clone-prototype 是 super-prototyping 技能库中的一个技能，目标是把真实应用的屏幕克隆为像素级准确、完全自包含的 HTML 画板，并放置在原型画布上。输出写入 canvases/<slug>/ 目录后由画布自动识别，文件夹以来源应用命名（如 notion-ios）。
主要能力与工作流程
技能定义了七个阶段，要求严格按序执行，不得跳步：先令牌后 HTML，先取样后令牌。最终 HTML 中的每种颜色和每项尺寸都必须可追溯到一次测量，而非“看起来差不多”的猜测。
- Phase 0 采集参考：尽可能获取最高分辨率截图，每屏单独裁剪保存到 $B/assets/refs/。可用 Mobbin MCP 搜索截图。取样前须检查色彩空间，未标记的 Display P3 截图需先转换为 sRGB，因为该工具链所有命令读取原始字节，P3 与 sRGB 同屏饱和色可相差 5–10 个色阶。用 scale = 屏幕内宽像素 / 设备点宽记录比例，并以高度交叉校验（偏差超过约 1% 则需重新裁剪）。
- Phase 1 叠加网格并目视读取：使用 refkit grid 在图上绘制网格（每 10 源像素青色、每 50 源像素红色并标注），逐元素记录区域坐标后再取样。产出为带证据列的令牌表：没有证据的项不能成为令牌。测量需写入 probes.json（每项含 id、img、cmd、box），Phase 4 会重放校验。每个探测框需附一行合理性说明，证明窗口恰好包含目标元素。
- Phase 2 先建设计系统：编写单个 :root 块，逐字节一致地内联到每个画板（画板在 iframe srcDoc sandbox="" 中渲染，没有共享样式表）。顺序为：字体（真实平台字体栈，不用 Web 字体，用 refkit font 实测）、颜色（背景 → 填充 → 细线/边框/轨道 → 文字梯度 → 强调色）、圆角、复合字体简写、间距与几何常量。技能提供两个社区项目可参考：luma-ios（19 个画板）和 duolingo-ios（58 个令牌、8 个屏幕、128 块插画）。令牌板作为第一个生成的画板，是后续检查屏幕的契约；refkit tokens 会校验所有画板内联相同 :root 且不引用不存在的令牌。
- Phase 3 单一生成器产出 N 个画板：编写一个脚本生成全部 .html 文件并随画板提交（canvases/<slug>/gen.py），路径相对 file 解析，改生成器后重新运行，不手工编辑画板。硬性约束包括：完全自包含（无外部 CSS/JS/字体/图片，图片用 data URI，图标用内联 SVG 并存于 assets/icons/）、屏幕画板的 body 不设背景（让手机浮于画布）、画板盒 478 × 980 超出部分会被静默裁剪（用 refkit shoot --check-overflow 检查）、手机框 393 × 852 pt（1pt = 1px，54px 状态栏、125 × 36 灵动岛、139 × 5 Home 指示条）。iOS 状态栏一律采用模板提供的版本，不复刻截图中的时钟、徽标、灵动岛展开等。文案须精确转写，包括换行位置。
- 插画处理：界面元素（文字、按钮等）需重建，插画仅裁剪图片本身。
使用方式
技能通过命令行工具 sp、refkit、artgen 操作，均可从 PATH 调用；shoot 需要 Google Chrome（Windows 可用 Edge）。若命令未找到，运行 sh <sp-canvas 技能目录>/scripts/install.sh（Windows 为 install.ps1）。项目开始前需检查 .gitignore，将 ref-*.html、**/assets/refs/、scratch/ 加入忽略列表，避免提交第三方截图。所有中间产物放在 canvases/<slug>/scratch/ 下，引用通过变量 B=canvases/<slug> 统一寻址。可用 sp fetch <id> 获取社区只读项目副本作为参考。
适用场景
将移动端应用界面（如 Notion、Claude、Duolingo 等）复刻为可交付、可维护的 HTML 原型画板，并带上完整的设计令牌与测量证据。
限制
七个阶段须严格按序执行；每次测量受原始截图分辨率上限约束；未标记 P3 截图需先转换否则令牌会混入两种色彩空间；状态栏统一采用模板而非逐屏复刻，会在顶部 54pt 产生预期内的差异；画板溢出会被静默裁剪，需要显式检查；没有随画板提交生成器的画板被视为未完成。资料未提供该技能的收费、价格或平台支持信息。