产品文档、设计系统和 VI 规范

目的

定义产品文档、设计系统和品牌视觉规范如何管理。没有这些规范，工程和设计都会产生不一致的界面和表达；后续自动化生成内容时问题会更明显。

产品文档体系

文档 位置 用途
PRD Notion/Lark 或 repo docs 定义产品问题、目标、验收
用户流程 Figma / Notion/Lark 描述核心路径
页面说明 Notion/Lark / repo docs 页面结构、状态、权限
交互规范 Figma + docs 空状态、错误、加载、权限、确认
产品变更记录 Linear/Jira + release notes 追踪上线变化
埋点说明 docs 或 analytics spec 定义事件和属性

如果仓库已有 docs/PRD.md、docs/PRODUCT_CORE.md、docs/design-reference/ 等文件，可作为产品和设计规范入口。

三角色产品文档责任

角色 负责什么
产品负责人 用户问题、优先级、PRD、验收标准、反馈回流
技术负责人 产品方案对架构、数据、安全、发布的影响
平台 / 资深工程师 设计系统入口、UI 验证方式、截图 / 录屏 / preview 链接

PRD 最低结构

背景
用户 / 客户
用户问题
当前行为
目标
成功指标 / 成功信号
优先级理由
非目标
核心用户流程
功能范围
权限和角色
状态和边界情况
验收标准
发布计划
反馈回流

产品闭环要求见 20-产品闭环-product-closure.md。用户可见功能建议使用 templates/产品验收-product-acceptance.md 记录验收结论。

VI / 品牌规范

VI 不是只给市场页面用。产品 UI、文档、发布卡片、Lark bot 消息都会用到。

最低 VI 规范：

项 内容
品牌名 正式中文名、英文名、大小写
Logo 主 logo、反色 logo、最小尺寸、安全区
色彩 主色、辅助色、状态色、背景色
字体 中文、英文、代码字体
图标 图标库、尺寸、线宽
语气 产品文案、错误提示、确认文案风格
禁用用法 错误 logo、错误颜色、错误命名

设计系统

设计系统至少覆盖：

类别 示例
Layout shell、sidebar、page header、content width
Components button、input、table、card、modal、toast
States loading、empty、error、disabled、selected
Data display timeline、status badge、artifact card、approval card
Forms validation、help text、danger action
Accessibility focus、keyboard、contrast、screen reader

实际仓库应指定一个 repo-side 设计系统入口，例如 docs/design-reference/。

后续 Agent 就绪要求

这一节在人类产品和设计规范稳定后再看。

未来让 Agent 生成 UI 或文档前，必须能提供：

  1. 产品目标和验收标准。
  2. 页面或组件规范。
  3. 设计 token 或 CSS 约束。
  4. 文案语气规范。
  5. 禁止使用的视觉模式。
  6. 截图验证或 UI contract test。

下一步阅读

读完或填完这份文档后，通常继续看：