版本:2.0.0
UI/UX Pro Max 技能
这是 nextlevelbuilder/ui-ux-pro-max-skill 的 Codex 适配器。当某个任务会改变界面的外观、感觉、动画、响应方式或用户对它的理解时,请使用它。
核心工作流
- 分析用户的产品、受众、工作流、UI 界面、品牌调性和技术栈。
- 在做出重大设计决策之前,查询本地 UI/UX Pro Max 数据。
- 将结果与现有项目设计模式和 Codex 前端指导相结合。
- 实现或审查 UI,然后验证响应式布局、无障碍、对比度、交互状态和视觉细节。
搜索脚本
从本技能目录解析路径:
python3 src/ui-ux-pro-max/scripts/search.py "<查询内容>" --design-system -p "<项目名称>"
python3 src/ui-ux-pro-max/scripts/search.py "<查询内容>" --domain <领域> -n 3
python3 src/ui-ux-pro-max/scripts/search.py "<查询内容>" --stack <栈> -n 3
在新页面、新应用、落地页、仪表盘或样式方向不明确时,优先使用 --design-system。
如需精确的细节,请使用按领域搜索:
| 领域 | 用途 |
|---|---|
product | 产品类别模式和推荐的样式方向 |
style | 视觉风格、效果、实现关键词 |
color | 感知产品的调色板和语义颜色选择 |
typography | 字体配对和字体氛围 |
landing | 落地页结构和转化模式 |
chart | 数据可视化选择 |
ux | 无障碍、动效、布局、表单、导航、反馈 |
react | React 和 Next.js 性能指导 |
web | Web 和 App 界面无障碍细节 |
icons | 图标风格和库建议 |
google-fonts | 字体发现 |
可用的技术栈包括 react、nextjs、vue、svelte、astro、swiftui、react-native、flutter、nuxtjs、nuxt-ui、html-tailwind、shadcn、jetpack-compose、threejs、angular 和 laravel。
有用的参考
- 上游元数据:
skill.json - 上游 README:
README.md - 原始 Claude 技能:
.claude/skills/ui-ux-pro-max/SKILL.md - 搜索数据和脚本:
src/ui-ux-pro-max/ - 来自上游的 Codex 平台模板:
src/ui-ux-pro-max/templates/platforms/codex.json
仅在需要时加载这些文件。README 和原始技能体积较大;建议优先使用搜索脚本获取针对性结果。
质量检查
在最终交付 UI 工作之前,请检查:
- 文本对比度、焦点状态、语义标签和键盘导航。
- 移动端在小宽度下的布局,以及桌面端在常见断点下的布局。
- 触摸目标大小、悬停/按下/禁用/加载状态以及错误状态。
- 工具栏、卡片、网格、图表和媒体的稳定尺寸。
- 动效持续时间、减少动效行为以及避免布局偏移。
- 一致的图标库、排版比例、间距比例和语义颜色令牌。