原型规范工坊 wzn16/proto-spec

proto-spec — 规范驱动的多页 HTML 原型技能

用「访谈定规范 → 冻结 SPEC 与 tokens → 按规范批量生成 → 脚本质检」的流程制作多页 HTML 演示原型，替代 Axure 类工具。产物是纯静态页面目录：双击 index.html 即可演示，无构建、零依赖、可断网。

给谁用

- 需要「能点、能看、风格统一」的原型来对齐需求的产品/售前/开发人员；
- 使用任何支持技能机制（读取 SKILL.md 并照做）的 AI 编码工具的用户。

安装

三种方式任选其一：

1. 让智能体安装（推荐）：对你的 AI 助手说——「请帮我安装这个技能：https://github.com/wzn16/proto-spec」
2. 命令安装：npx skills add wzn16/proto-spec（需要 Node.js，仅安装工具本身依赖）
3. 手动安装：把整个 proto-spec/ 目录复制到你的 AI 工具的 skills 目录。

无需任何密钥或账号配置。

怎么用

对 AI 说人话即可，例如：

- 「用 proto-spec 给这个订单系统做一套后台原型，这是草图：<图片>」
- 「按 proto-spec 流程先跟我确认设计规范，再生成 5 个页面」
- 「用 proto-spec 体检一下 <项目目录> 这个原型」

也可以只要规范不要页面（模式 C），或对已有原型项目跑质量门（模式 D）。

产物

你的项目/ ├── SPEC.md + pages-manifest.json # 冻结的设计规范与页面清单 ├── index.html # 站点地图（演示入口） ├── pages/ # 全部原型页（可点击互跳） ├── assets/ templates/ # 共享样式、交互脚本、页面模板 └── qa/ # 质量门报告（与截图，若环境支持）

配置

无需任何配置：没有密钥、没有账号、没有网络依赖。唯一环境要求是质量门脚本可用的 python3（≥3.10，macOS/Linux 出厂自带；缺失时 AI 会降级为人工自查并在交付说明中声明）。
产物（静态 HTML）对查看者零配置，双击 index.html 即可。

质量门

内置 Python 3 标准库脚本：G1 规范符合性（禁裸色值/档外间距）、G3 死链与三方对账、 G2 截图验证（可选，环境具备截图能力时）、G5 总验收。交付前 AI 必须引用报告计数字段。

兼容与边界

- 产物：纯 HTML/CSS/原生 JS，file:// 直开，无外部请求；
- 脚本：Python ≥3.10，仅标准库；
- G2 截图门为能力接口：宿主具备截图能力才执行，否则声明跳过；
- 不做：真实业务逻辑、后端、数据库、登录鉴权、条件逻辑仿真（分支用状态页表达）。

数据边界

技能本体不联网、不收集数据；产物默认全本地。引入外部字体/图标/图片会破坏断网演示，属于生成阶段的违规项，脚本会拦截。

协议

MIT © 2026 wangzhaonan

路线图

- ✅ v0.3 美学家族库：F0 冷静企业·蓝 / F1 墨纸编辑·黑白 / F2 暖陶人文·赤 / F3 数据驾驶舱·暗 / F4 终端机能·磷光（访谈按气质关键词整包推荐）
- ✅ v0.4 商务交付第一批：G4 可访问性门（对比度机检）/ 家族保真机检 / 精修层 III 第一批（动效 token、reduced-motion、字距分级）
- ✅ v0.5 商务交付第二批：模式 E 单页轻量模板 / 元素级交接注记（data-note + 报告导出）/ 交付 README 生成器 / 精修层 III 第二批（表格状态与密度、表单细节、空状态变体、focus ring）/ 家族 F5 清新活力·彩、F6 暖砂政务·青绿
- 🔜 持续：精修层 III（暗色模式、缓动 token、表格密度档、空状态三级）——候选清单见仓库 discussions