ui-navigator

Category: Tools & Productivity | Uploader: MoveCloudROY | Downloads: 0 | Version: v1.0（Latest）

引导用户完成一个多阶段的 UI/UX 设计流程，产生一份高质量、高可用的 UI/UX 设计原型的草稿。在用户有模糊的、碎片化的 UI/UX 设计想法或仅有功能需求时使用，通过结构化、启发式的提问，将逐步转化为逻辑严密、细节丰富的专业 UI 设计方案。

Changelog: Source: GitHub https://github.com/MoveCloudROY/ecs-agent

Directory Structure

Current level: examples/e2e/ui-design-flow/.claude/skills/ui-navigator/

📄 SKILL.md 6.3 KB

SKILL.md

---
name: ui-navigator
description: '引导用户完成一个多阶段的 UI/UX 设计流程，产生一份高质量、高可用的 UI/UX 设计原型的草稿。在用户有模糊的、碎片化的 UI/UX 设计想法或仅有功能需求时使用，通过结构化、启发式的提问，将逐步转化为逻辑严密、细节丰富的专业 UI 设计方案。'
user-invokable: true
metadata: {"version": "0.0.1", "updated": "2026-03-09", "author":"Mancitrus"}
---

# ui-navigator · 导演之旅 (v5.0)

这项技能基于“需求启发”，能够通过结构化、启发式的提问，将用户脑海中模糊的、碎片化的应用想法（App/Web），逐步转化为逻辑严密、细节丰富的专业 UI/UX 设计方案。

## 工作流程

### Stage 1：产品定位与核心价值 (Discovery)

- **目标:** 弄清应用“是什么”以及“给谁用”。
- **你的提问方向:** 这个应用的核心功能是什么？目标用户群是谁？希望解决他们什么痛点？
- **行为规范:** 在这个阶段，如果用户描述太抽象，你需要主动提供 2-3 个具体的场景假设供其选择。


### Stage 2：视觉情绪与风格定义 (Aesthetics)

- **目标:** 确定 UI 的视觉走向和情感传递。
- **你的提问方向:** 你希望这个应用给用户带来什么感觉？（例如：专业可靠、活泼可爱、极简高冷）。有没有偏好的主色调？
- **行为规范:** 根据前一阶段和提问得到的信息，主动向用户推荐 4-5 种合适的设计风格（如：毛玻璃效果 Glassmorphism、新拟态 Neumorphism、苹果原生规范 Human Interface Guidelines）并解释原因，让用户挑选。

### Stage 3：信息架构与关键页面 (Structure)

- **目标:** 确定需要设计的核心页面,页面内的关键元素和页面结构。
- **你的提问方向:** 首页信息，第一视觉落点，核心功能组件，最重要的交互操作，需要哪几个核心区块来支撑这些操作，。
- **行为规范:** 帮用户梳理出关键的核心页面（如：首页、个人中心、数据看板），并列出页面所需的组件（如：搜索框、轮播图、数据卡片），通过自上而下的组件化拆解 (Top-Down Component Breakdown)带领用户从上到下梳理 UI 组件。强制要求自己使用专业的 UI 术语，但向用户解释时要通俗易懂。你必须帮用户明确以下三个区域的内容：
  1. 顶部区 (Header/Top Bar)：例如，搜索框、用户头像、大标题。
  2. 内容区 (Content Area)：例如，横向滑动的英雄卡片 (Hero Cards)、网格列表 (Grid List)、数据图表。
  3. 导航区 (Navigation)：例如，底部 Tab 栏的 3-5 个核心入口，或侧边栏 (Sidebar)


### Stage 4：执行反模式审查 (Anti-pattern Audit)
- **目标:** 在锁定最终设计方案前，对前几个阶段收集到的需求和初步构想进行“压力测试”。识别并拦截任何违反直觉、损害可用性或降低视觉质量的 UI/UX 反模式（Anti-patterns），确保最终输出的方案具备专业级水准。
- **你的提问方向:** 向用户展示你发现的潜在体验风险，并提供清晰的 A/B 替代方案供其决策。
- **行为规范:** 你必须在脑海中从以下三个维度严格审查当前方案：

  1. 认知层 (Cognitive)：信息是否过载？是否存在误导性按钮等？
  2. 交互层 (Interaction)：核心操作的层级是否过深（如滥用汉堡菜单）等？表单是否过于冗长等？
  3. 视觉层 (Visual)：对比度是否足够？排版是否具备清晰的视觉层级（Visual Hierarchy）等？

**必须等待用户确认同意**你的优化建议后，才能进入最后一个“方案交付”阶段

### Stage 5：方案总结与交付 (Delivery)

- **目标:** 整合前三阶段的共识，输出最终的设计蓝图。
- **行为规范:** 停止提问，生成结构化的最终交付物。

## 交互原则

- 绝对禁止一次性抛出所有问题。必须严格按照阶段推进，用户回答一个阶段，再进入下一个阶段。
- 采用“选择题+填空题”模式。当用户不知道怎么回答时，提供 A/B/C/D/E 选项或具体例子来启发他们。
- 始终提供专业增量。在认可用户想法的基础上，补充 UX 体验上的专业建议。

### 强制反模式检查清单 (Anti-Pattern Guardrails)
在与用户沟通和生成设计方案时，你必须时刻警惕并阻止以下反模式。如果用户的想法包含这些，你必须指出风险并提供替代方案：
1. **视觉灾难**：文本与背景对比度不足（例如浅灰底色上的白色文字）。
2. **迷宫导航**：将核心的高频操作隐藏在汉堡菜单（Hamburger Menu）深处。
3. **认知过载**：在单一页面（如首页）放置超过 7 个没有主次之分的核心行动号召（CTA）按钮。
4. **过度验证**：在用户体验任何核心价值之前，强制要求填写长表单。
5. **模棱两可的文案**：使用“确定/取消”这种缺乏上下文的按钮，而不是“删除/保留”
6. **不一致的设计**：同一应用内不同页面使用完全不同的设计风格和组件库。
7. **下拉菜单滥用**: 只有两个选项（如“是/否”）也用下拉菜单，或者选项超过 20 个（如国家选择）却不提供搜索功能



## 最终交付物格式 (Final Output Format)
在完成所有阶段的沟通后，你需要将设计方案输出到 @../../../ui-design/draft.md，格式如下：
```
# [应用名称/概念] UI 架构与视觉蓝图

### 1. 产品定位
- **目标用户**：[总结]
- **核心场景**：[总结]

### 3. 视觉规范 (UI Kit)
- **主色调**：[例如：#0052FF 科技蓝]
- **排版字体**：[例如：无衬线体，大字号高对比度]
- **设计风格**：[例如：极简主义结合微量的毛玻璃效果]

### 3. 核心页面规划
#### 页面名称：[例如：首页]
- **布局结构**：[例如：顶部导航区 -> 英雄数据看板 -> 快捷操作区 -> 底部 Tab]
- **关键组件**：[列出如卡片、列表、按钮等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

#### 页面名称：[例如：个人中心]
- **布局结构**：[例如：顶部用户信息区 -> 功能入口区 -> 设置区]
- **关键组件**：[列出如头像、菜单、开关等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

...（根据需要添加更多页面）

```

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

ui-navigator

Directory Structure

SKILL.md

Report

Notice