SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-ux-pro-max

ui-ux-pro-max

设计与创作

查看项目

更新于 10-15 16:26

技能介绍

用途

UI/UX Pro Max 用于把模糊的 UI 请求转化为具体的设计系统与实现指导。它面向以下工作：设计系统选择、调色板与排版选择、UX 评审与修复、结合技术栈的前端实现指导，以及面向多页面工作的轻量级设计系统持久化。

该技能不是产品策略或用户研究的替代品。它适用于产品方向已经大致明确之后，让执行更精准。

主要能力

  • 推断请求形态：提取最小设计信号，包括产品类型、行业、风格关键词、目标平台、实现技术栈。若用户未指定技术栈，默认使用 html-tailwind。
  • 优先生成设计系统：通过辅助脚本产出紧凑的设计建议，包括推荐风格方向、调色板家族、排版方向、交互/视觉效果、落地页或布局倾向、应避免的反模式。
  • 设计系统持久化：若工作跨多轮或多页面，可持久化设计系统，生成 design-system/MASTER.md，以及可选的页面级覆盖说明（位于 design-system/pages/ 下）。
  • 按需拉取针对性指导：使用聚焦搜索而非一次性加载全部内容，支持 product、style、color、typography、landing、chart、ux 等领域。
  • 技术栈专属指导：在编码前补充技术栈相关指导，支持 html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose。
  • 实现前综合：将设计系统转化为布局结构、组件规则、视觉令牌、交互规则、无障碍约束、所选技术栈的实现说明。

使用方式

  1. 生成设计系统：
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"
  1. 持久化设计系统（跨多轮或多页面时）：
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard"
  1. 按需拉取针对性指导：
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "real-time dashboard" --domain chart
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury serif" --domain typography
  1. 编码前补充技术栈专属指导：
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind
  1. 实现前综合：收集设计系统后，将其转化为布局结构、组件规则、视觉令牌、交互规则、无障碍约束、所选技术栈的实现说明。不要将原始搜索输出直接倾倒进最终答案，而应使用它来论证一个连贯的设计方向。

适用场景

  • 用户要求设计或评审 UI。
  • 创建落地页或仪表盘。
  • 选择颜色或排版。
  • 改进无障碍性。
  • 需要结合技术栈的前端实现指导。
  • 多页面工作需要轻量级设计系统持久化。

限制与安全规则

  • 不要脱离产品类型硬编码设计语言。
  • 不要使用 emoji 作为主要 UI 图标。
  • 不要为了视觉花哨而削弱文本对比度。
  • 不要在悬停时缩放交互卡片，如果这会破坏布局稳定性。
  • 不要使用违反 prefers-reduced-motion 的动画。
  • 不要虚构不支持的辅助脚本或数据集；仅使用捆绑的 search.py 和 data/ui-reasoning.csv。

参考资料

按需加载：

  • references/USAGE.md - 推荐命令模式与检索流程
  • data/ui-reasoning.csv - 辅助脚本使用的紧凑产品到设计启发式规则
  • scripts/search.py - 用于设计系统、领域和技术栈查找的确定性辅助工具