ui-designer

SKILL.md

---
name: ui-design
description: 从想法到交付的完整 UI 设计工作流。当用户有设计想法、想做界面优化、需要设计灵感参考、或者想从零开始做一个界面时触发此技能。五阶段工作流：灵感收集 → 样例综合 → 风格样书 → 交互设计 → 交付文档。
---

# ui-design 技能

> 从想法到交付的完整 UI 设计工作流

## 核心理念

不是直接生成 UI，而是通过**灵感驱动**的方式，帮助用户找到方向，然后一步步打磨到可交付。

**与其他技能的区别：**
- `ui-new`：直接生成 UI 代码
- `awesome-design`：提供设计系统参考
- `ori-ai-product-design`：产品级原型设计
- **`ui-design`**：灵感收集 → 样例综合 → 风格样书 → 交互设计 → 交付文档

---

## 🎯 触发条件

用户说类似这些话时，必须触发此技能：
- "帮我找个设计参考"
- "我想做某个界面"
- "帮我设计一个 XX"
- "有个想法，帮我看看"
- "从设计到交付做一个 XX"
- "帮我找个风格参考"

---

## 📐 五阶段工作流

```
阶段一：灵感收集
  → 搜索样例 + 分析亮点

阶段二：样例综合
  → 提取元素 + 确定设计方向

阶段三：风格样书
  → 设计系统 + 静态 HTML 预览（迭代优化）

阶段四：交互设计
  → 交互流程 + 可点击原型（迭代优化）

阶段五：交付文档
  → 完整设计系统 + 组件库 + 使用文档
```

---

## 🚀 执行指南

### 阶段一：灵感收集

**搜索优先级：**
1. 用户提供的 URL（最优先）
2. `awesome-design` 技能库（62 个网站设计系统）
3. 全网搜索（仅在用户明确要求或技能库不足时启用）

**操作步骤：**
1. 询问用户想要做什么样的界面
2. 如果用户给了 URL，直接分析
3. 如果用户没给参考，用 `awesome-design` 技能搜索相关风格
4. 如果技能库不足，再用 `coze_web_search` 扩展搜索
5. 找到 3-5 个优质样例后，分析每个的核心亮点

**输出格式：**
```
## 阶段一：灵感收集

### 样例 1：[名称]
- 来源：[URL 或 awesome-design 来源]
- 核心亮点：...
- 可借鉴元素：...

### 样例 2：...
（找到 3-5 个）

### 💡 设计方向建议
基于样例分析，提出 2-3 个可行的设计方向供用户选择
```

---

### 阶段二：样例综合

**操作步骤：**
1. 用户选定方向后
2. 提取各样例的核心元素（色彩、字体、布局、组件风格）
3. 定义本项目的设计 DNA（主色、字体、气质关键词）
4. 确定设计系统基础（间距、圆角、阴影层级）

**输出格式：**
```
## 阶段二：样例综合

### 设计 DNA
- 关键词：年轻 / 专业 / 科技感 / 温暖...
- 主色调：[色值 + 说明]
- 字体选择：[标题字体 + 正文字体]
- 气质关键词：...

### 元素提取
- 色彩体系：...
- 排版节奏：...
- 空间系统：...
- 组件风格：...

### 设计方向定义
[描述选定方向的具体方向]
```

---

### 阶段三：风格样书

**出图形式：静态 HTML 预览**

**操作步骤：**
1. 基于阶段二的设计 DNA，生成完整的 CSS 设计系统（变量定义）
2. 用纯 HTML/CSS 构建一个展示页面，包含：
   - 色彩展示（主色、辅色、中性色）
   - 字体层级展示（Display / Headline / Body / Label）
   - 组件展示（按钮、卡片、输入框、标签）
   - 布局网格展示
3. 输出可独立运行的 HTML 文件
4. 用户查看后，收集反馈，迭代优化

**必须包含的展示区块：**
```html
<!-- 1. 色彩系统 -->
<!-- 2. 字体层级 -->
<!-- 3. 间距系统 -->
<!-- 4. 按钮组件（所有状态） -->
<!-- 5. 卡片组件 -->
<!-- 6. 表单组件 -->
<!-- 7. 标签/Chip 组件 -->
<!-- 8. 简单布局示例 -->
```

**输出格式：**
```
## 阶段三：风格样书

### CSS 设计系统变量
[列出所有 CSS 变量]

### HTML 预览
[输出完整可运行的 HTML 文件]

### 预览方式
保存到 /workspace/projects/workspace/output/ui-design/style-guide.html
用浏览器打开预览

### 💬 反馈收集
请告诉我：
1. 色彩是否满意？
2. 字体是否合适？
3. 组件风格是否接近你想要的？
4. 有哪些需要调整的地方？
```

---

### 阶段四：交互设计

**操作步骤：**
1. 基于风格样书，确定页面结构
2. 定义页面状态（默认/加载/空状态/错误/成功）
3. 定义交互流程（跳转逻辑、动效说明）
4. 逐步构建可点击的 HTML 原型
5. 用户查看后，收集反馈，迭代优化

**输出格式：**
```
## 阶段四：交互设计

### 页面结构
- 页面数量：X
- 页面清单：[名称 → 描述]

### 页面状态定义
[每个页面的状态说明]

### 交互流程
[用户操作 → 系统反应]

### 动效规范
- 页面切换：...
- 按钮反馈：...
- 列表加载：...
- Modal/Toast：...

### HTML 原型
[输出可点击的 HTML 原型]

### 💬 反馈收集
[收集用户对交互的意见]
```

---

### 阶段五：交付文档

**操作步骤：**
1. 整理完整的设计系统文档（Markdown 格式）
2. 整理组件库代码（HTML/CSS 片段）
3. 输出使用指南

**输出格式：**
```
## 阶段五：交付文档

### 设计系统文档
[完整的设计规范文档]

### 组件库
[可复用的组件代码片段]

### 使用指南
[如何使用这套设计系统]

### 文件清单
- /workspace/projects/workspace/output/ui-design/style-guide.html（风格样书）
- /workspace/projects/workspace/output/ui-design/prototype.html（交互原型）
- /workspace/projects/workspace/output/ui-design/design-system.md（设计系统文档）
- /workspace/projects/workspace/output/ui-design/components.md（组件库）
```

---

## 🔧 工具使用指南

### awesome-design 技能
用于搜索设计系统参考：
```
当需要找设计风格参考时，调用 awesome-design 技能
```

### coze_web_search
用于扩展搜索（按需）：
```
当技能库找不到合适参考时
先询问用户："是否允许我扩展搜索全网？"
用户同意后再使用
```

### 技能库优先级
```
1. awesome-design（设计系统精准参考）
2. 用户提供的 URL（最贴合需求）
3. 全网搜索（按需，需要用户同意）
```

---

## ⚡ 快速决策树

```
用户提出了一个设计想法？
  → 阶段一：先收集灵感（用户 URL > awesome-design > 全网搜索）

用户有参考图/URL？
  → 直接进入阶段二：分析并提取设计元素

用户想要完整的界面设计？
  → 完整走完五个阶段

用户只需要某个组件？
  → 直接在风格样书中展示该组件的所有状态

用户没有明确目标？
  → 多问几句，了解：是什么产品 / 给谁用 / 大概什么风格
```

---

## 📁 输出路径

所有输出文件统一保存到：
```
/workspace/projects/workspace/output/ui-design/
```

---

## 💬 沟通风格

- 每个阶段开始前，简短说明要做什么
- 每个阶段结束后，主动收集用户反馈
- 遇到不确定的地方，先提出选项让用户选择
- 不要闷头做，要和用户保持节奏对齐