Communitygithub.com

Jason904/ui-skill-lab

用于 Codex 中的 UI/UX 设计智能:规划、构建、审查、改进或实现网页/移动端界面、落地页、仪表盘、设计系统、组件、无障碍、调色板、排版、间距、动效、图表、响应式布局及特定技术栈的前端指导。

ui-skill-lab 是什么?

该技能为 Codex 平台适配了 `nextlevelbuilder/ui-ux-pro-max-skill`,专注于提供全面的 UI/UX 设计智能支持。它能够从需求分析到实现验证,全程辅助开发者或设计师完成界面相关工作。核心工作流程包括:分析用户的产品、受众、工作流、界面、品牌调性和技术栈;通过本地搜索脚本查询丰富的 UI/UX Pro Max 数据(包含 67 种 UI 风格、161 种调色板、57 种字体配对、UX 指南、图表推荐等),再进行综合与实现。搜索脚本支持按设计系统、领域(如产品、风格、颜色、排版、无障碍等)和技术栈(如 React、Next.js、Vue、SwiftUI 等)进行精确定位,确保设计决策有据可依。最终输出前,技能会自动进行质量检查,包括对比度、焦点状态、语义标签、键盘导航、响应式布局、触摸目标、交互状态、动效行为以及图标/字体/间距/颜色令牌的一致性,以交付高品质的 UI。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Jason904/ui-skill-lab/tree/HEAD/skills/ui-ux-pro-max-skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

版本:2.0.0

UI/UX Pro Max 技能

这是 nextlevelbuilder/ui-ux-pro-max-skill 的 Codex 适配器。当某个任务会改变界面的外观、感觉、动画、响应方式或用户对它的理解时,请使用它。

核心工作流

  1. 分析用户的产品、受众、工作流、UI 界面、品牌调性和技术栈。
  2. 在做出重大设计决策之前,查询本地 UI/UX Pro Max 数据。
  3. 将结果与现有项目设计模式和 Codex 前端指导相结合。
  4. 实现或审查 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无障碍、动效、布局、表单、导航、反馈
reactReact 和 Next.js 性能指导
webWeb 和 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 工作之前,请检查:

  • 文本对比度、焦点状态、语义标签和键盘导航。
  • 移动端在小宽度下的布局,以及桌面端在常见断点下的布局。
  • 触摸目标大小、悬停/按下/禁用/加载状态以及错误状态。
  • 工具栏、卡片、网格、图表和媒体的稳定尺寸。
  • 动效持续时间、减少动效行为以及避免布局偏移。
  • 一致的图标库、排版比例、间距比例和语义颜色令牌。

相关技能