# EasyFlow 设计文档索引

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

当前整体方向：

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

## 文档清单

### 1. 产品主题与总规范

- [easyflow-product-design-spec.md](./easyflow-product-design-spec.md)

适用场景：

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

### 2. Design Tokens 草案

- [design-tokens-draft.md](./design-tokens-draft.md)

适用场景：

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

### 3. 基础组件规范

- [component-guidelines.md](./component-guidelines.md)

适用场景：

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

### 4. 交互与动效规范

- [interaction-motion-guidelines.md](./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/`：高频规则、任务流程、引用入口