用途:将真实 App 的界面复刻成像素级、自包含的 HTML 画板,放到原型画布上。产物落在 mockups/canvases/<slug>/,画布会自动读取,文件夹按来源命名(如 notion-ios)。
流程分七个阶段,必须按顺序执行,不能跳步;令牌先于 HTML,取样先于令牌。每个颜色与尺寸都必须能追溯到测量结果,而不是「看起来差不多」。
主要能力:内置 refkit 工具集(grid / sample / bands / bbox / scan / hairline / font / shoot / diff / blend / tokens / batch / ink / crops / key / montage)以及 artgen,用于偶尔必须绘制的素材;二者是 PATH 上的命令,shoot 额外需要 Google Chrome(Windows 上可用 Edge)。
阶段要点:Phase 0 收集参考图,保存为 $B/assets/refs/ 下的独立裁切,并检查色彩空间(设备截图常为未标记 Display P3,需先整体转 sRGB 再取样),记录一次缩放比例。Phase 1 先在图上画网格再用眼睛查看,逐元素记录区域后再取样,产出带证据列的令牌表并写入 probes.json。Phase 2 在任何屏幕之前先写设计系统,一个 :root 块逐字节内联进每个画板。Phase 3 用一个生成脚本输出全部 .html,并随画板一起提交;画板在 sandbox 的 iframe 中渲染,必须完全自包含,所有图像用 data: URI,图标用内联 SVG。
使用方式:安装命令 uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools";reinstall 更低版本时加 --force;用 sp root 取插件根目录;从 $KIT/mockups/canvases/templates 复制骨架,改 NAME 与前后缀后替换占位行;最后用 python3 mockups/canvases/<slug>/gen.py 重新生成。
限制:画板尺寸 478 × 980,溢出会静默裁切,需用 refkit shoot ... --check-overflow 检查;状态栏统一使用模板版本,不复制截图中的状态栏;避免 SF Symbols 私用字形;文案需逐字转写并保留换行。资料未提供价格、授权、支持平台等信息。