ClawHub

ui-designer

Other

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

Install

openclaw skills install ui-shji

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. 用户查看后，收集反馈，迭代优化

必须包含的展示区块：

<!-- 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/

💬 沟通风格

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