界面设计助手

技能简介

ui-ux-pro-max 提供 UI/UX 设计智能与落地指导，覆盖从视觉方向、信息架构到具体代码实现的完整工作流。支持生成新界面布局、优化现有体验、输出设计系统令牌，以及将 UX 建议转化为可执行的代码变更。

能做什么

• 根据需求生成完整的 UI 概念与页面布局方案
• 梳理用户流程，标注关键路径与异常状态处理
• 制定设计系统：颜色、字体、间距、圆角、阴影等令牌体系
• 输出组件规范文档，含状态定义与交互说明
• 将设计决策转化为 React/Vue/Svelte/Tailwind 等具体代码
• 评估并改进现有界面的可用性与视觉一致性

使用说明

1. 需求澄清：确认目标平台（Web/iOS/Android/桌面）、技术栈、品牌调性、无障碍等级要求（如 WCAG AA），以及现有素材（截图、Figma、仓库地址）。
2. 交付物选择：根据场景选取一项或多项输出——UI 概念稿、UX 流程图、设计系统文档、实施计划书。
3. 调用资源：引用 skills/ui-ux-pro-max/assets/data/ 目录下的设计情报数据获取配色、模式与启发式准则；如需更多示例，查阅 references/upstream-skill-content.md。
4. 生成设计令牌（可选）：运行以下命令快速输出结构化令牌：
   python3 skills/ui-ux-pro-max/scripts/design_system.py --help
5. 验收标准：确保输出包含空态/加载态/错误态、键盘导航、焦点状态、对比度检查。

输入与输出

见下方输入与输出表格。

风险提示

• 未明确技术栈时，默认输出可能与实际项目不兼容
• 设计令牌需与团队现有命名规范对齐，避免重复定义
• 无障碍建议基于通用标准，特定行业合规要求需额外核实
• 代码片段为参考实现，生产环境需补充测试与边界处理

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/xobi667/ui-ux-pro-max/SKILL.md
来源类型：GitHub 仓库