mcpField
U
ui-ux-pro-max

ui-ux-pro-max

github.com/galaxy-dawn设计与 UI5.9k509 次安装2 周前更新
代码仓库

关于 ui-ux-pro-max

ui-ux-pro-max 是将初步明确的界面需求转化为设计系统和实现指导的技能。它提供设计建议、针对性的 UX 与技术栈查询，并可保存跨页面的设计选择。

主要功能

  1. 01推荐设计系统
  2. 02指导配色与字体选择
  3. 03查询 UX 和视觉设计建议
  4. 04提供针对技术栈的实现说明
  5. 05保存跨页面设计选择

适用场景

  1. 01确定产品界面的视觉方向
  2. 02审查 UX 并制定改进措施
  3. 03为指定技术栈规划表单或表格
  4. 04保持多个页面的设计一致

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/galaxy-dawn/claude-scholar --skill ui-ux-pro-max

安装后在 Claude Code 中输入/ui-ux-pro-max确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

data/
ui-reasoning.csv
references/
USAGE.md
scripts/
search.py

详细介绍

UI/UX Pro Max

使用此技能，可将模糊的 UI 需求转化为具体的设计系统和实现指南。

角色

此技能适用于：

  • 选择设计系统，
  • 选择配色和字体，
  • UX 审查与改进，
  • 考虑技术栈的前端实现指南，
  • 为多页面工作轻量级地持久化设计系统。

它不能替代产品策略或用户研究。请在产品方向大致明确后，使用它让执行更加精准。

核心工作流

1. 推断需求类型

先提取最基本的设计信号：

  • 产品类型，
  • 行业，
  • 风格关键词，
  • 目标平台，
  • 实现技术栈。

如果用户未指定技术栈，默认使用 html-tailwind。

2. 先生成设计系统

使用辅助脚本生成简洁的设计建议：

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"

生成内容包括：

  • 推荐的风格方向，
  • 配色方案，
  • 字体方向，
  • 交互与视觉效果，
  • 落地页或布局倾向，
  • 应避免的反模式。

如果工作跨越多个轮次或页面，请持久化设计系统：

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"

这将创建：

  • design-system/MASTER.md
  • design-system/pages/ 下可选的页面级覆盖说明
3. 仅在需要时获取针对性指南

使用聚焦搜索，而不是一次性加载所有内容：

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

支持的领域：

  • product
  • style
  • color
  • typography
  • landing
  • chart
  • ux
4. 编码前添加针对技术栈的指南
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind

支持的技术栈：

  • html-tailwind
  • react
  • nextjs
  • vue
  • svelte
  • swiftui
  • react-native
  • flutter
  • shadcn
  • jetpack-compose
5. 实现前综合整理

收集完设计系统后，将其转化为：

  • 布局结构，
  • 组件规则，
  • 视觉令牌，
  • 交互规则，
  • 无障碍约束，
  • 所选技术栈的实现说明。

不要将原始搜索结果直接倾倒到最终答复中。请用它们支撑连贯的设计方向。

默认输出形式

优质答复通常应包括：

  1. 产品与 UI 定位，
  2. 推荐的风格系统，
  3. 配色与字体，
  4. 组件与布局规则，
  5. 无障碍与交互检查，
  6. 考虑技术栈的实现说明。

安全规则

  • 不要脱离产品类型，生硬套用设计语言。
  • 不要将表情符号用作主要 UI 图标。
  • 不要为了视觉效果降低文本对比度。
  • 如果悬停时缩放交互卡片会导致布局不稳定，就不要这样做。
  • 不要使用违反 prefers-reduced-motion 的动画。
  • 不要虚构不受支持的辅助脚本或数据集；仅使用随附的 search.py 和 data/ui-reasoning.csv。

参考资料

仅加载所需内容：

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

评论

支持 Markdown