Ux design guide
UI/UX设计师方案产出指南。当用户提出UI/UX设计需求、需要产出设计方案时触发。覆盖场景：App/Web/小程序UI设计、交互设计、设计系统搭建/升级、用户体验优化、设计走查、原型制作、竞品UX分析。先识别需求属于5类场景中的哪一类（0到1新产品设计/中大型功能迭代/小优化微调/设计系统大版本升级/概念探索），再按对应场景的产出清单生成完整的设计交付物方案。触发词：UI设计、UX设计、交互设计、界面设计、设计系统、设计规范、原型、线框图、高保真、设计走查、用户体验、信息架构、Design Token。From its SKILL.md
npx -y skills add genapohub/ux-design-guideAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 20 days oldThe repository was created 20 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
6.2 KB, ~2.0k tokens by cl100k_base, as published. Nobody here has run it
UI/UX 设计师方案产出指南
Overview
本技能将 UI/UX 设计领域的方法论转化为可执行的工作流。当用户提出任何设计需求时，先识别该需求属于 5 类场景中的哪一类，再按对应场景的产出清单生成完整的设计方案和交付物规范。
详细的方法论、各场景产出清单、交付标准、状态覆盖清单、无障碍规范、AI工具建议、质量检查清单均存放在 references/UX设计方法论.md，在执行前必须读取对应章节。
触发条件
当出现以下任一情况时触发本技能：
- 用户提出一个产品/功能的 UI/UX 设计需求
- 用户提到"UI设计""UX设计""交互设计""界面设计""设计稿""原型"等关键词
- 用户需要搭建或升级设计系统、定义 Design Token
- 用户要求做设计走查、竞品UX分析、可用性评估
- 用户说"帮我设计一下""出个设计方案""这个页面怎么做"
- 用户描述一个功能，需要输出交互方案和视觉方案
执行流程
按以下 5 步顺序执行，不可跳步。
Step 1: 需求理解
- 解析用户输入的设计需求
- 提取关键信息：产品类型（App/Web/小程序）、目标平台（iOS/Android/多端）、功能范围、现有设计基础（有无设计系统/组件库）、目标用户画像
- 识别缺失的关键信息，主动向用户提问补全（一次最多问 2-3 个最关键的问题）
Step 2: 场景识别
读取 references/UX设计方法论.md 的"一、场景识别"章节，用下表判断需求属于哪类场景：
| 场景 | 名称 | 判断条件（满足任一） | 产出量 |
|---|---|---|---|
| 场景一 | 0→1 新产品设计 | 全新产品线、无现有设计系统、需定义设计语言、涉及全端设计 | 10-12类 |
| 场景二 | 中大型功能迭代 | 已有产品新增模块、涉及3+页面/多角色、需交互+视觉设计 | 6-8类 |
| 场景三 | 小优化/微调 | 单页面调整、文案/间距/颜色微调、不涉及交互变更 | 2-3类 |
| 场景四 | 设计系统大版本升级 | 设计语言迭代、组件库大版本、涉及Breaking Change | 8-10类 |
| 场景五 | 概念探索/预研 | 方向未定、需设计探索验证、可能不落地 | 3-4类 |
识别流程：是否全新产品/无设计基础？→ 场景一；是否为设计系统大版本升级？→ 场景四；是否为方向探索？→ 场景五；是否涉及3+页面/多角色/交互流程变化？→ 场景二；否则 → 场景三。
Step 3: 与用户确认场景
输出场景判断结果，包含：
- 场景判断：场景X（场景名称）
- 判断依据：逐条对照说明
- 建议产出清单：列出将生成的必备设计交付物
- 预估周期：X 天/周
向用户确认后进入产出阶段。
Step 4: 按清单产出设计方案
读取 references/UX设计方法论.md 中对应场景的章节，按场景获取必备产出清单和每个交付物的详细要求。
设计产出要求：
- 所有设计交付物的输出格式为详细文字描述 + 规格参数（如颜色HEX值、字号px、间距px、组件属性等），便于开发直接参照实现
- 交互流程使用 Mermaid 图表或结构化描述（含主流程 + 异常分支 + 边界条件）
- 每个交互元素必须覆盖并标注状态：default / hover / active / disabled / error / empty / loading
- 遵循"七、通用设计交付标准"中的命名规范、标注要求、无障碍要求
- 颜色标注使用 HEX 或 HSLA 值，字体标注使用 px/rem + 行高 + 字重
- 间距遵循 4pt/8pt 栅格体系
- 产出后保存为 Markdown 文件
Step 5: 质量检查
读取 references/UX设计方法论.md 的"九、产出质量检查清单"章节，对照检查：
- 场景判断是否正确并已确认
- 产出清单完整（必备设计交付物全部产出）
- 交互状态覆盖完整（9种状态全检查）
- 视觉规范清晰（颜色/字体/间距/阴影/圆角值明确）
- 无障碍达标（WCAG 2.1 AA：色对比度、触控区域、焦点管理、屏幕阅读器）
- 标注完整（切图尺寸/格式、响应式断点、弹性布局规则）
- 可交付给开发直接实现
识别遗漏内容并补充，最后输出交付清单。
资源说明
references/UX设计方法论.md
完整的方法论文档（约 500 行），包含：
- 场景识别决策表与决策树
- 5个场景的详细产出清单与各交付物核心要点
- 通用设计交付标准（命名规范、标注要求、9种状态全覆盖清单）
- 无障碍设计最低要求（WCAG 2.1 AA）
- 设备适配基准
- AI 工具使用建议与提示词模板
- 产出质量检查清单
在 Step 2（场景识别）、Step 4（产出方案）、Step 5（质量检查）时必须读取对应章节。文档按需读取：
- 场景识别：读取"一、场景识别"
- 产出方案：读取对应场景章节（二至六）+ "七、通用设计交付标准"
- 质量检查：读取"九、产出质量检查清单"
注意事项
- 不要跳过 Step 3 的用户确认环节
- 设计产出以文字描述 + 规格参数为主，不是直接出图（本 Skill 不能画图，但能给出精确到像素的实现规格）
- 交互状态必须覆盖 9 种，不要漏掉 error / empty / loading
- 无障碍是必选项，不是可选项
- 场景三（小优化）不要过度设计，2-3 类产出足够
- 场景一和场景四产出量大，建议分轮次确认
What ships with it: 5 files
31.4 KB alongside SKILL.md
references/
- UX设计方法论.md21.1 KB
- 记忆规则.md6.6 KB
- .gitignore78 B
- LICENSE1.0 KB
- README.md2.6 KB