File contents UI/UX 设计 Skills 总控
本目录收录 UI/UX 设计工作流的所有方法论 skills。
当前 Skills
Skill
适用场景
来源
user-flow
用户流程设计
NNGroup / 用户旅程方法
information-architecture
信息架构
Rosenfeld IA / 卡片分类
page-structure
页面结构和线框图
页面目标导向方法
component-states
组件状态设计
8 种状态完整覆盖
atomic-design
组件分层
Brad Frost Atomic Design
design-tokens
设计令牌系统
W3C DTCG 2025.10
responsive-design
响应式设计
Mobile-First / Bootstrap
accessibility
可访问性
WCAG 2.2 / WAI-ARIA
enterprise-patterns
企业 UI 模式
表单/表格/导航/危险操作
design-system-mapping
设计系统对标
Material/HIG/Ant/shadcn
visual-style
视觉风格定义
风格库 + 反 AI 化
usability-evaluation
可用性评审
Nielsen 十大启发式
design-handoff
设计交接
Figma DevMode 实践
hig-principles
平台设计原则
Apple HIG / Material 4 原则
统一入口
先读 routing.md — 按设计任务路由
再进入对应 SKILL.md
需要模板时进入 <skill>/templates/
工作思路
skills 可以按需组合：
1. 拿到设计需求 → 先理解用户和场景
- user-flow（流程）
- information-architecture（信息架构）
2. 设计页面 → 结构 + 状态
- page-structure（页面结构）
- component-states（组件状态）
3. 系统化设计 → 分层 + 令牌
- atomic-design（组件分层）
- design-tokens（设计令牌）
4. 跨设备适配
- responsive-design（响应式）
- accessibility（可访问性）
5. 业务模式（企业类）
- enterprise-patterns（企业 UI 模式）
- design-system-mapping（系统对标）
6. 视觉定义
- visual-style（风格 + 反 AI 化）
- hig-principles（平台原则）
7. 验证和交付
- usability-evaluation（可用性评审）
- design-handoff（前端交接）
新增 Skill
按 CONTRIBUTING.md 流程新增。
自动进化
每次完成设计任务后，回写经验到 ../field-journal/。
1 --- 2 name: skills-7 3 description: UI/UX 设计 Skills 总控 4 --- 5 # UI/UX 设计 Skills 总控 6 7 本目录收录 UI/UX 设计工作流的所有方法论 skills。 8 9 ## 当前 Skills 10 11 | Skill | 适用场景 | 来源 | 12 |-------|---------|------| 13 | [user-flow](user-flow/SKILL.md) | 用户流程设计 | NNGroup / 用户旅程方法 | 14 | [information-architecture](information-architecture/SKILL.md) | 信息架构 | Rosenfeld IA / 卡片分类 | 15 | [page-structure](page-structure/SKILL.md) | 页面结构和线框图 | 页面目标导向方法 | 16 | [component-states](component-states/SKILL.md) | 组件状态设计 | 8 种状态完整覆盖 | 17 | [atomic-design](atomic-design/SKILL.md) | 组件分层 | Brad Frost Atomic Design | 18 | [design-tokens](design-tokens/SKILL.md) | 设计令牌系统 | W3C DTCG 2025.10 | 19 | [responsive-design](responsive-design/SKILL.md) | 响应式设计 | Mobile-First / Bootstrap | 20 | [accessibility](accessibility/SKILL.md) | 可访问性 | WCAG 2.2 / WAI-ARIA | 21 | [enterprise-patterns](enterprise-patterns/SKILL.md) | 企业 UI 模式 | 表单/表格/导航/危险操作 | 22 | [design-system-mapping](design-system-mapping/SKILL.md) | 设计系统对标 | Material/HIG/Ant/shadcn | 23 | [visual-style](visual-style/SKILL.md) | 视觉风格定义 | 风格库 + 反 AI 化 | 24 | [usability-evaluation](usability-evaluation/SKILL.md) | 可用性评审 | Nielsen 十大启发式 | 25 | [design-handoff](design-handoff/SKILL.md) | 设计交接 | Figma DevMode 实践 | 26 | [hig-principles](hig-principles/SKILL.md) | 平台设计原则 | Apple HIG / Material 4 原则 | 27 28 ## 统一入口 29 30 1. 先读 `routing.md` — 按设计任务路由 31 2. 再进入对应 SKILL.md 32 3. 需要模板时进入 `<skill>/templates/` 33 34 ## 工作思路 35 36 skills 可以按需组合： 37 38 ```text 39 1. 拿到设计需求 → 先理解用户和场景 40 - user-flow（流程） 41 - information-architecture（信息架构） 42 43 2. 设计页面 → 结构 + 状态 44 - page-structure（页面结构） 45 - component-states（组件状态） 46 47 3. 系统化设计 → 分层 + 令牌 48 - atomic-design（组件分层） 49 - design-tokens（设计令牌） 50 51 4. 跨设备适配 52 - responsive-design（响应式） 53 - accessibility（可访问性） 54 55 5. 业务模式（企业类） 56 - enterprise-patterns（企业 UI 模式） 57 - design-system-mapping（系统对标） 58 59 6. 视觉定义 60 - visual-style（风格 + 反 AI 化） 61 - hig-principles（平台原则） 62 63 7. 验证和交付 64 - usability-evaluation（可用性评审） 65 - design-handoff（前端交接） 66 ``` 67 68 ## 新增 Skill 69 70 按 `CONTRIBUTING.md` 流程新增。 71 72 ## 自动进化 73 74 每次完成设计任务后，回写经验到 `../field-journal/`。
commit ddd652419b
Frequently asked questions How do I install the Skills skill? Run npx skillmds@latest add zhaoxuya520/skills-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Skills skill do? UI/UX 设计 Skills 总控 It is listed under Coding & Dev Tools on SkillMD.
Is Skills safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Skills? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Skills free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Skills? zhaoxuya520 (@zhaoxuya520) published this skill. Their other Agent Skills are listed on their SkillMD profile.
zhaoxuya520