# UI UX Design

> 在从事用户界面设计、用户体验设计、产品设计、交互设计或数字产品设计时使用。叠加在DesignAgent 线性工作流上的领域技能。

- Skill: `ahaoai/ui-ux-design-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add ahaoai/ui-ux-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ahaoai/ui-ux-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ahaoai (https://skillmd.com/u/ahaoai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ahaoai/ui-ux-design-2

---


# UI/UX 设计（UI/UX Design）

## 不可协商的规则
**硬性门槛：用户需求和用户行为必须驱动结构。在设计任何界面之前，先理解用户的目标、上下文和痛点。没有用户研究就没有线框图。**

## 概述
UI/UX设计的领域专属方法论层。数字产品设计有自己的逻辑——从用户需求开始，经过信息架构和交互设计，最终到视觉界面设计。此技能叠加在DesignAgent 线性流程上（01-intake → 02-discover → 03-strategy → 04-generate → 05-review → 06-deliver → 07-learn），在每个阶段注入UX专属框架。

## 何时使用
- 网页或移动应用设计
- 产品设计和功能开发
- 交互和动效设计
- 设计系统创建
- 服务设计和用户旅程映射
- 改版或功能增强

## 何时不使用
- "把这个按钮颜色改一下" → 修改，不是设计
- "这个的WCAG对比度是多少？" → 查找
- 代码实现或前端开发（这是设计方法论）
- 快速落地页，不需要用户研究（使用精简模式）

## UI/UX专属流程

### 阶段1：调研和发现（叠加01-intake → 02-discover）
- **用户研究**：目标、行为、痛点、使用上下文
- **竞争分析**：直接竞争者、标杆产品、设计模式
- **启发式评估**：如为改版，对照可用性启发式审计当前产品
- **数据分析**：用户行为的定量数据（如有）
- **无障碍审计**：当前无障碍合规现状

### 阶段2：UX策略（叠加03-strategy）
在设计界面之前定义体验策略：
- **用户画像**：1-3个主要用户原型，包含目标和痛点
- **用户旅程图**：当前状态（现状）和期望状态（目标）
- **信息架构**：内容清单、站点地图、导航结构
- **交互模型**：用户如何完成关键任务？
- **设计原则**：3-5条指导原则（例如："每屏一个任务"）
- **成功指标**：可用性目标、转化目标、NPS、任务成功率

### 阶段3：设计和原型（叠加04-generate）
- **线框图**：关键界面和流程的低保真布局
- **交互原型**：用于测试关键用户流程的可点击原型
- **视觉设计**：UI设计系统——色彩、字体、组件、间距
- **响应式行为**：设计在不同断点下如何适配
- **动效设计**：过渡、微交互、反馈状态
- **如需探索视觉风格**，调用 **designing-with-ai** 进行UI探索
- **调用 visual-research** 获取竞品UI模式和灵感

### 阶段4：用户测试和迭代（叠加05-review）
- **可用性测试**：与真实用户测试，观察行为
- **无障碍测试**：对比度、屏幕朗读器、键盘导航
- **设计审查**：对照UX策略、设计原则、成功指标审查
- **利益相关者审查**：用理由展示，用标准引导反馈
- **迭代**：修复必须修复的问题，记录决策

### 阶段5：交付和上线（叠加06-deliver → 07-learn）
- **设计系统文档**：组件、状态、变体、使用指南
- **开发者交付**：规格、资产、原型、行为文档
- **QA和实施支持**：审查实施结果，发现问题
- **发布和验证**：上线后对照成功指标衡量
- **学习**：记录有效做法、改进点、可复用模式

## 理性化预防

| 借口 | 事实 |
|------|------|
| "我先做界面，再理清流程" | 结构先于表面。信息架构和旅程图先于视觉设计。 |
| "用户自己会搞明白的" | 如果用户需要"搞明白"，那就是糟糕的UX。为清晰而设计。 |
| "无障碍后面再修复" | 无障碍不是润色步骤。从一开始就为之设计。 |
| "一个原型就够了" | 测试多种方案。用户会让你惊讶。 |

## 危险信号
- 你在没有用户画像或旅程图的情况下设计界面
- 信息架构没有被定义
- 无障碍没有被考虑
- 你没有与真实用户测试过
- 流程只在"理想路径"上有效

## 验证
- [ ] 用户研究已完成（画像、目标、痛点）
- [ ] UX策略已记录（旅程图、信息架构、设计原则）
- [ ] 线框图和交互原型已创建
- [ ] UI设计系统已开发（色彩、字体、组件）
- [ ] 已与真实用户进行可用性测试
- [ ] 无障碍合规性已检查
- [ ] 交付文档已准备（规格、资产、行为）

→ 从 **01-intake** 开始，然后按照线性流程加上UI/UX专属补充。