saas-prototype-designlisted

# SaaS 原型设计 ## 这个 Skill 解决什么 1. **风格一致性** — 多人 / 多 Agent 同时改原型时，设计语言不漂移 2. **效率** — 复用现成 chrome / token / 组件模式，新页面 30 分钟到 1 小时完成 3. **历史版本保护** — Agent 大改时不会覆盖之前精心迭代的功能 4. **避坑** — 固化 企业 SaaS 项目踩过的 20+ 个返工经验，新项目不重蹈覆辙 ## 触发场景 - 「做一个高保真原型」「画产品 demo」 - 「按 v1 风格做新页面」「跟 v1 设计语言 一致」 - 「修条件查询区 / 表格工具栏」 - 「派 Agent 改原型 + 保护历史版本」 - 「设计 SaaS 管理后台 UI」「企业级 admin / portal 界面」 ## 何时不用 - ❌ 生产前端工程(本 skill 产出评审 / 对接用高保真原型,不是生产代码规范) - ❌ C 端营销页 / 官网落地页(设计语言是企业后台向) - ❌ 画产品架构图 / 功能架构图 → 用 `saas-arch-diagrams` - ❌ 从原型反推 PRD → 用 `prd-writer` Stage 0.5(本 skill 只管原型本身,衔接点是 prototype-meta 的 prd-mapping 字段) ## 主工作流:从 0 做一个新页(7 步) 1. **起手**:复制 [`templates/page-skeleton.html`](templates/page-skeleton.html),改 prototype-meta + `<title>` + sidebar 菜单组 2. **铺数据**:示例行换成真实业务语料(原则 12 · 每个字段答得出"真实系统谁产出它") 3. **搭区块**:按页面类型选组件——列表页 = filter-form + list-toolbar + tbl + pager;详情用 drawer 不开新页;多步表单用 wizard(速查见下两节) 4. **接交互**:行点击 drawer / modal 新建(反模式 28 写法)/ 每个 tab 都有内容(原则 10)/ 批量操作真实联动(§18) 5. **过反模式**:对照 [`references/anti-patterns.md`](references/anti-patterns.md) 高频 5 类自查——文案残留 / tab 空白 / 占位按钮 / 评审注解混入 UI(1e)/ PM 术语 6. **跑自检**:`bash scripts/check-residual.sh <file>` 7 项全过 7. **留痕**:更新 prototype-meta(version / last-modified / key-features);此后任何大改先 `bash scripts/snapshot.sh <file>` ## 不可违反的 12 条原则（来自实战返工） | # | 原则 | 反例 | |---|---|---| | 1 | **原型是交付物，不带 PM 规划性术语** | "主战场" / "本期" / "v0.x 启用" / "远期" / "MVP" 一律不出现在页面 | | 2 | **端的定义纯粹** | 端只能是「运营 / 供应商 / 客户 / 第三方平台」客户端；「后端 / 业务服务 / 中间件」**不是端** | | 3 | **服务和页面分层**