用途:为没有参考截图可复制的场景,在原型画布上设计新屏幕、流程或组件,输出自包含 HTML 画板。若有可测量的参考截图,应改用 clone-prototype。所有内容渲染于 mockups/canvases/<slug>/,运行方式见 prototype-canvas,其 references/layout.md 说明目录和 layout.json 规则。
使用条件:插件自带模板目录与示例,但 sp 和 refkit 独立提供,插件不能自行运行安装器。若不在 PATH 中,或 sp --version 低于随技能发布的版本,运行 uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools",重装时可加 --force;版本更高则不要重装,以免降级。
主要能力与流程:
- 先找令牌:扩展现有画板时逐字节复用其 00-design-tokens.html 块;克隆真实应用先跑 clone-prototype 前两阶段;全新产品则复制模板目录,改 NAME 和前缀,选平台原生栈、中性色阶、一个强调色和一个危险色,并保留证据表记录选色理由。新增令牌是决策:某屏需要令牌块外的颜色或尺寸,要么将其加入块中(所有文件同步),要么该屏设计有误。
- 接地内容:文案、数字和状态应取自真实来源(本地化文件、现有屏幕、规格),不用想象中的内容;优先用真实图标、标志、插图并以 data: URI 嵌入;同时设计空、加载、错误、长字符串和最长可预期数字等非理想状态。
- 一个生成器一行屏幕:写一个脚本生成目录内全部 .html,只改脚本不改输出。画板约束:完全自包含,sandbox="" 下无外部 CSS、JS、字体和图片,仅 data: URI 与内联 SVG;画板框 478 × 980,溢出静默裁剪;iPhone 框架 393 × 852 pt,1pt = 1px,含 54px 状态栏、125 × 36 灵动岛、139 × 5 主屏指示条;避免 SF Symbols 私用字形。无障碍不可跳过:真实对比度、≥ 44pt 点击目标、纯图标控件加 aria-label。
- 提案对比:当被要求“给些选项”时,每个提案做成一行中的完整画板,通常三个,且是真正不同的方案,底部写一行理由。
- 迭代与验证:用户标注截图后,先复述理解再修改,改生成器而非画板,重跑生成器,逐条回应标注。
验证命令:refkit shoot "$B"/.html -o "$B/scratch/shots" --scale 2 与 refkit montage "$B"/scratch/shots/.png -o "$B/scratch/board.png" --height 520。查看拼图,检查是否被裁剪、文本换行、内边距一致,并用 grep -o '#[0-9A-Fa-f]{6}' 比对颜色是否都在 :root 内。每轮改动后必须重新渲染。
限制:插件不能自行运行安装器;画板无外部资源;如需平台原生字体或特定系统图标,资料未提供具体清单与替代方案。