ui-ux-pro-max：UI/UX 设计情报与实施指导方案

名称： ui-ux-pro-max
描述： 为构建精致界面提供 UI/UX 设计智能与实施指导。当用户询问 UI 设计、UX 流程、信息架构、视觉风格方向、设计系统/设计令牌、组件规范、文案/微文案、无障碍访问，或需要生成/评审/优化前端 UI（HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind）时使用。包含以下工作流：(1) 生成新的 UI 布局与样式，(2) 改进现有 UI/UX，(3) 生成设计系统令牌与组件指南，(4) 将 UX 建议转化为具体的代码变更。

遵循以下步骤，以最少的来回沟通交付高质量的 UI/UX 成果。

1) 需求梳理

仅询问必要信息以避免错误工作：
- 目标平台：Web / iOS / Android / 桌面端
- 技术栈（如涉及代码变更）：React/Next/Vue/Svelte, CSS/Tailwind, 组件库
- 目标与约束：转化率、性能、品牌调性、无障碍访问等级（WCAG AA？）
- 已有材料：截图、Figma 文件、代码仓库、URL、用户旅程图

如果用户说“全部都要”（设计 + UX + 代码 + 设计系统），请将其视为四项交付物，并按此顺序交付。

2) 生成交付物（选择适用的部分）

始终具体化：明确组件名称、状态、间距、排版和交互。

• UI 概念与布局：提供清晰的视觉方向、网格系统、排版、色彩体系、关键屏幕/区块。
• UX 流程：绘制用户旅程图、关键路径、错误/空状态/加载状态、边界情况。
• 设计系统：设计令牌（色彩/排版/间距/圆角/阴影）、组件规则、无障碍访问说明。
• 实施计划：具体的文件级修改、组件拆分和验收标准。

3) 使用内置资源

此技能捆绑了可供参考以获取灵感或标准的资料。

• 设计智能数据：当需要调色板、模式或 UI/UX 启发式规则时，请查阅 skills/ui-ux-pro-max/assets/data/。
• 上游参考：如果需要更多措辞或示例，请查阅 skills/ui-ux-pro-max/references/upstream-skill-content.md。

4) 可选脚本（设计系统生成器）

如需快速生成设计令牌和页面特定覆盖样式，可使用内置脚本：

python3 skills/ui-ux-pro-max/scripts/design_system.py --help

当用户需要结构化的设计令牌输出（兼容 ASCII 字符）时，推荐运行此脚本。

输出标准

• 默认使用纯 ASCII 字符的设计令牌/变量，除非项目已使用 Unicode。
• 必须包含：间距比例、字体比例、2-3 种字体配对选项、色彩令牌、组件状态。
• 始终涵盖：空状态/加载状态/错误状态、键盘导航、焦点状态、对比度。