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 界面」 ## 不可违反的 12 条原则（来自实战返工） | # | 原则 | 反例 | |---|---|---| | 1 | **原型是交付物，不带 PM 规划性术语** | "主战场" / "本期" / "v0.x 启用" / "远期" / "MVP" 一律不出现在页面 | | 2 | **端的定义纯粹** | 端只能是「运营 / 供应商 / 客户 / 第三方平台」客户端；「后端 / 业务服务 / 中间件」**不是端** | | 3 | **服务和页面分层** | 「评测任务列表」（页面）和「评测流水线 controller」（服务）不能混在一个子组 | | 4 | **能力域不能平铺** | 域内 5+ 卡片必须按子能力（A1/A2/A3）3 级嵌套 | | 5 | **col-span 填满 12** | 每行加起来必须 = 12，禁止留右侧空白 | | 6 | **不省略合并** | "④-⑧ 5 节点合并 1 卡" 违反内容逻辑，必须独立展开 | | 7 | **Agent 大改前先备份** | 不备份就被覆盖丢失（已发生 3 次） | | 8 | **改完文案残留必查** | 删功能时容易留下"在 Step 3 配置"这种过时引用 | | 9 | **状态徽章用 ● 圆点 + 弱色背景**，不用纯色实心 badge | 表格列充满高饱和色会炫晕 | | 10 | **Tab 切换内容必须填充**（不能只默认 tab 有内容） | 「待审 / 已通过」tab 切换变空白是高频 bug | | 11 | **字段名优先中文** · label / column / placeholder / message / toast 一律中文（仅 ID/code/mono 标识保留英文） | 「model_id」「vendor」「context_window」直接呈现给业务用户 | | 12 | **原型用真实业务示例数据**，不用 `data1`/`Lorem`/`测试模型 A`；**mock 结构与字段必须可溯源**（每个字段都答得出"真实系统哪个组件产出它"，不臆造平行数据结构） | 列表里 16 条都是 "测试模型 1-16"；探针明明只输出 case 命中列表，mock 却另造 `modelIdentity` 身份核对产物（详见反模式 29） | ## 设计语言速查（v1 / v1 设计语言） 完整规范见 [`references/design-tokens.md`](references/design-tokens.md)。**核心 6 条**： 1. **主色**：品牌红 `#E1251B`（主 CTA /