mcpField
T
tool-ui-ux-pro-max

tool-ui-ux-pro-max

github.com/heyvhuang设计与 UI33861 次安装30 周前更新
代码仓库

关于 tool-ui-ux-pro-max

面向设计师和开发者的可搜索 UI/UX 参考技能，提供具体设计依据，而非生成页面。它可按设计领域和实现技术栈检索内容，用于制定设计系统文档、重构计划和评审标准。

主要功能

  1. 01可检索的设计领域
  2. 02按技术栈查找实现建议
  3. 03配色与字体参考
  4. 04UX 与无障碍指引
  5. 05交付前检查清单

适用场景

  1. 01为 design-system.md 收集依据
  2. 02规划 UI 重构
  3. 03检查 UX 与无障碍要求
  4. 04查找特定技术栈的布局建议

安装

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

$npx skills add https://github.com/heyvhuang/ship-faster --skill tool-ui-ux-pro-max

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

包含的文件

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

data/
charts.csv
colors.csv
landing.csv
products.csv
prompts.csv
styles.csv
typography.csv
ux-guidelines.csv
data/stacks/
flutter.csv
html-tailwind.csv
nextjs.csv
react-native.csv
react.csv
svelte.csv
swiftui.csv
vue.csv
scripts/
core.py
search.py

详细介绍

工具：UI/UX Pro Max（可搜索的设计智能）

这是一个查询工具，不是页面生成器。

使用它快速获取具体输入（调色板令牌、字体搭配、UX 约束、特定技术栈的实现说明），并综合整理为：

  • design-system.md
  • UI 重构计划 / 验收标准
  • 用于排查“看起来不错但用起来不对劲”问题的审查清单

前置条件

确保 Python 可用：

python3 --version || python --version

核心命令

按领域搜索：

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]

按技术栈搜索：

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> [-n <max_results>]

可用技术栈： html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter

推荐工作流

收到设计 / 改进 UI 的请求时，请按以下步骤操作：

  1. 确定以下输入：
  • 产品类型：SaaS / 电商 / 内容 / 工具 / 仪表板 / 落地页
  • 语气关键词：极简 / 高端 / 活泼 / 温暖 / 企业风 / 技术风 / 大胆
  • 行业：医疗保健 / 金融科技 / 教育 / 消费品 / …
  • 技术栈：React / Next.js / …（如未指定，默认使用 html-tailwind）
  1. 搜索领域（每个领域选取 1–3 个结果，然后综合整理）：
  1. product — 产品类型 → 风格方向
  2. style — 风格细节（颜色 / 形状 / 动效 / 复杂度）
  3. typography — 标题 / 正文字体搭配（包含 Google Fonts + CSS 导入方式）
  4. color — 调色板令牌（主色 / 辅色 / CTA / 背景 / 文本 / 边框）
  5. landing — 落地页结构（区块顺序 + CTA 位置）
  6. chart — 图表建议（适用于仪表板）
  7. ux — UX + 无障碍规则和反模式
  1. 按技术栈搜索，以实现约束为决策依据：
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs

领域参考

领域用途示例关键词
product按产品类型确定风格方向SaaS、电商、作品集、医疗保健
styleUI 风格概念和实现提示极简主义、粗野主义、玻璃拟态
typography字体搭配 + 导入说明优雅、活泼、专业
color调色板令牌（Hex）SaaS、电商、金融科技
landing落地页结构与 CTA 策略主视觉、客户评价、定价
chart图表类型选择趋势、对比、漏斗
uxUX / 无障碍规则和反模式无障碍、动画、导航
prompt提示词 / 技术关键词（风格名称）

示例（美妆 / 健康落地页）

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

然后：将调色板 + 字体排版 + 动效约束 + 组件规则整理为 design-system.md，并将下方清单转换为验收标准。

常见专业 UI 规则（快速检查）

图标与视觉元素
规则应做不应做
不使用表情符号图标使用一致的 SVG 图标集（Heroicons/Lucide/Simple Icons）随意混用表情符号和图标
悬停状态稳定使用颜色 / 不透明度 / 阴影过渡使用会导致布局偏移的变换
使用正确的品牌 Logo使用官方 SVG 来源猜测 Logo 或使用不一致的变体
尺寸一致统一图标尺寸（例如 24×24）混用不同的 viewBox / 尺寸
交互
规则应做不应做
指针光标为可点击表面添加 cursor-pointer可点击表面缺少交互提示
反馈清晰悬停时更改边框 / 阴影 / 颜色悬停状态难以辨认
过渡时长合理150–300ms，保持一致即时变化或迟缓（>500ms）
布局
规则应做不应做
与边缘保持间距为浮动导航留出空间将 UI 紧贴视口边缘
避免内容被遮挡考虑固定页眉的影响让内容出现在固定栏后方
容器保持一致使用统一的容器宽度系统随意使用多种容器宽度

交付前检查清单（用作验收标准）

视觉质量
  • 不使用表情符号作为 UI 图标
  • 图标来自统一的图标集
  • 品牌 Logo 正确（不凭空猜测）
  • 悬停状态不会导致布局偏移
  • 颜色使用遵循令牌系统（避免零散使用原始十六进制值）
交互
  • 所有可点击区域都设置了 cursor-pointer
  • 悬停／焦点状态提供清晰的反馈
  • 过渡效果保持一致（150–300ms）
  • 键盘焦点清晰可见
布局与响应式
  • 适用于 320px / 768px / 1024px / 1440px
  • 移动设备上没有水平滚动
  • 固定元素不会遮挡内容
无障碍（a11y）
  • 图片包含 alt 文本
  • 表单输入框带有标签
  • 颜色不是唯一的指示方式
  • 遵循 prefers-reduced-motion

评论

支持 Markdown