EasyFlow/docs/design

EasyFlow 设计文档索引

本目录用于沉淀 EasyFlow 的长期设计资产，作为产品、设计、前端共同维护的正式知识库。

当前整体方向：

• 以 冷静智能 为主题核心
• 默认以 Apple HIG 作为第一视觉与交互参照，再用 Google Material Design 3 补足系统化落地
• 目标是让 EasyFlow 从传统表单式管理系统视觉中走出来，成为简约、现代、富有活力的工作台

文档清单

1. 产品主题与总规范

• easyflow-product-design-spec.md

适用场景：

• 统一产品主题和体验方向
• 定义品牌气质、色彩哲学、UI 风格、交互哲学与三端一致性
• 定义 EasyFlow 如何摆脱传统后台式视觉，建立现代工作台语言

2. Design Tokens 草案

• design-tokens-draft.md

适用场景：

• 设计 Token 规划
• 前端变量命名、主题映射与公共层沉淀
• 浅色 / 深色主题统一策略
• 导航骨架材质、表面层级、品牌色角色与现代工作台表达

3. 基础组件规范

• component-guidelines.md

适用场景：

• 按钮、输入框、卡片、表格、抽屉、弹窗、标签等组件统一
• 页面工具栏、筛选区、空状态等常见组合层设计
• 列表页、导航骨架、工具栏和工作台组合层的现代化设计

4. 交互与动效规范

• interaction-motion-guidelines.md

适用场景：

• 表单交互、异步反馈、危险操作、状态页
• 页面切换、面板出现、微交互、动效时长与缓动策略
• 提升系统“活力”和“流动感”，避免僵硬表单后台交互

使用建议

产品 / 设计讨论

优先阅读：

1. easyflow-product-design-spec.md
2. component-guidelines.md
3. interaction-motion-guidelines.md

前端实现

优先阅读：

1. easyflow-product-design-spec.md
2. design-tokens-draft.md
3. component-guidelines.md
4. interaction-motion-guidelines.md

主题或视觉重构

优先阅读：

1. easyflow-product-design-spec.md
2. design-tokens-draft.md
3. component-guidelines.md

与 easyflow-ui skill 的关系

本目录是 EasyFlow 的正式设计知识库。

.codex/skills/easyflow-ui/ 是任务执行入口，负责：

• 告诉后续 UI / 前端任务先读哪些文档
• 约束改动应该落在哪一层
• 提供执行流程、自检清单与交付要求

两者关系如下：

• docs/design/：完整规范与长期资产
• .codex/skills/easyflow-ui/：高频规则、任务流程、引用入口