🤖
UI/UX Pro Max
提供构建精致界面的UI/UX设计智能与实施指导。适用于用户咨询UI设计、UX流程、信息架构、视觉风格方向、设计系统/令牌、组件规范、文案/微文案、无障碍访问，或生成/评审/优化前端UI（HTML/CSS/JS、React、Next.js、Vue、Svelte、Tailwind）。包含以下工作流程：(1) 生成新UI布局与样式，(2) 改进现有UI/UX，(3) 产出设计系统令牌与组件
下载12.3k
星标61
版本0.1.0
安全通过
⚙️脚本
技能说明
name: ui-ux-pro-max description: 用于构建精美界面的 UI/UX 设计智能与实施指导。当用户询问 UI 设计、UX 流程、信息架构、视觉风格方向、设计系统/Token、组件规范、文案/微文案、可访问性，或生成/批评/优化前端 UI（HTML/CSS/JS、React、Next.js、Vue、Svelte、Tailwind）时使用。包括以下工作流程：(1) 生成新的 UI 布局和样式，(2) 改进现有的 UI/UX，(3) 生成设计系统 Token 和组件指南，(4) 将 UX 建议转化为具体的代码变更。
遵循以下步骤，以最少来回沟通交付高质量的 UI/UX 输出。
1) 初步分类
仅询问必要问题以避免错误工作：
- 目标平台：web / iOS / Android / 桌面
- 技术栈（如果需要代码变更）：React/Next/Vue/Svelte、CSS/Tailwind、组件库
- 目标和约束：转化率、速度、品牌调性、可访问性级别（WCAG AA？）
- 现有资源：截图、Figma、代码库、URL、用户旅程
如果用户说“全部都要”（设计 + UX + 代码 + 设计系统），将其视为四个交付项并按此顺序交付。
2) 生成交付项（选择适合的）
始终具体化：命名组件、状态、间距、排版和交互。
- UI 概念 + 布局：提供清晰的视觉方向、网格、排版、色彩系统、关键屏幕/部分。
- UX 流程：映射用户旅程、关键路径、错误/空/加载状态、边缘情况。
- 设计系统：Token（颜色/排版/间距/圆角/阴影）、组件规则、可访问性注释。
- 实施计划：精确的文件级修改、组件分解和验收标准。
3) 使用打包资源
此技能打包了可供您引用以获取灵感/标准的数据。
- 设计智能数据：当您需要调色板、模式或 UI/UX 启发式时，请从
skills/ui-ux-pro-max/assets/data/读取。 - 上游参考：如果您需要更多措辞/示例，请查阅
skills/ui-ux-pro-max/references/upstream-skill-content.md。
4) 可选脚本（设计系统生成器）
如果需要快速生成设计 tokens 和页面特定覆盖，请使用打包的脚本：
python3 skills/ui-ux-pro-max/scripts/design_system.py --help
建议在用户希望获得结构化 tokens 输出（ASCII 友好）时运行它。
输出标准
- 默认输出仅包含 ASCII 的 tokens/变量，除非项目已使用 Unicode。
- 包括：间距比例、字体比例、2-3 种字体配对选项、色彩 tokens、组件状态。
- 始终涵盖：空状态/加载状态/错误状态、键盘导航、焦点状态、对比度。
如何使用「UI/UX Pro Max」？
- 打开小龙虾AI（Web 或 iOS App）
- 点击上方「立即使用」按钮，或在对话框中输入任务描述
- 小龙虾AI 会自动匹配并调用「UI/UX Pro Max」技能完成任务
- 结果即时呈现，支持继续对话优化