Back to Details

tool-ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tool: UI/UX Pro Max (Searchable Design Intelligence)

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

This is a lookup tool, not a page generator.
Use it to quickly retrieve concrete inputs (palette tokens, typography pairings, UX constraints, stack-specific implementation notes) that can be synthesized into:
  • design-system.md
  • a UI refactor plan / acceptance criteria
  • review checklists for “looks good but feels broken” issues
这是一个查询工具，而非页面生成器。
使用它可以快速检索具体的输入内容（调色板标识、排版搭配、UX约束、特定技术栈的实现说明），这些内容可整合为：
  • design-system.md
  • UI重构计划 / 验收标准
  • 针对“视觉美观但体验不佳”问题的评审检查表

Prerequisites

前置条件

Ensure Python is available:
bash
python3 --version || python --version
确保已安装Python：
bash
python3 --version || python --version

Core command

核心命令

Domain search:
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
Stack search:
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> [-n <max_results>]
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
领域搜索：
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<查询关键词>" --domain <领域> [-n <最大结果数>]
技术栈搜索：
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<查询关键词>" --stack <技术栈> [-n <最大结果数>]
支持的技术栈： 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter

Recommended workflow

推荐工作流

When asked to design / improve UI, do this:
  1. Identify these inputs:
  • Product type: SaaS / e-commerce / content / tool / dashboard / landing
  • Tone keywords: minimal / premium / playful / warm / corporate / technical / bold
  • Industry: healthcare / fintech / education / consumer / …
  • Stack: React / Next.js / … (default to 
    html-tailwind
    if unspecified)
  1. Search domains (pick 1–3 results per domain, then synthesize):
  1. product
    — product type → style direction
  2. style
    — style details (color/shape/motion/complexity)
  3. typography
    — heading/body pairing (includes Google Fonts + CSS import)
  4. color
    — palette tokens (primary/secondary/CTA/background/text/border)
  5. landing
    — landing structure (section order + CTA placement)
  6. chart
    — chart recommendations (dashboards)
  7. ux
    — UX + a11y rules and anti-patterns
  1. Search by stack to ground decisions in implementation constraints:
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs
当需要设计/优化UI时，按以下步骤操作：
  1. 确定以下输入信息：
  • 产品类型：SaaS / 电商 / 内容平台 / 工具类 / 仪表盘 / 着陆页
  • 风格关键词：极简 / 高端 / 活泼 / 温暖 / 企业风 / 技术感 / 大胆
  • 行业：医疗健康 / 金融科技 / 教育 / 消费级 / …
  • 技术栈：React / Next.js / …（未指定时默认使用
    html-tailwind
    ）
  1. 按领域搜索（每个领域选取1-3个结果，再进行整合）：
  1. product
    — 按产品类型确定风格方向
  2. style
    — 样式细节（颜色/形状/动效/复杂度）
  3. typography
    — 标题/正文字体搭配（包含Google Fonts及CSS导入方式）
  4. color
    — 调色板标识（主色/辅助色/行动按钮色/背景色/文本色/边框色）
  5. landing
    — 着陆页结构（板块顺序 + 行动按钮位置）
  6. chart
    — 图表推荐（适用于仪表盘）
  7. ux
    — UX/无障碍规则及反模式
  1. 按技术栈搜索，确保决策符合实现约束：
bash
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "响应式布局" --stack nextjs

Domain reference

领域参考

DomainUse forExample keywords
product
Style direction by product typesaas, ecommerce, portfolio, healthcare
style
UI style concepts & implementation hintsminimalism, brutalism, glassmorphism
typography
Font pairings + import instructionselegant, playful, professional
color
Palette tokens (Hex)saas, ecommerce, fintech
landing
Landing structure & CTA strategyhero, testimonial, pricing
chart
Chart type selectiontrend, comparison, funnel
ux
UX/a11y rules & anti-patternsaccessibility, animation, navigation
prompt
Prompt / technical keywords(style name)
领域用途示例关键词
product
按产品类型确定风格方向saas, ecommerce, portfolio, healthcare
style
UI风格概念及实现提示minimalism, brutalism, glassmorphism
typography
字体搭配 + 导入说明elegant, playful, professional
color
调色板标识（十六进制值）saas, ecommerce, fintech
landing
着陆页结构 & 行动按钮策略hero, testimonial, pricing
chart
图表类型选择trend, comparison, funnel
ux
UX/无障碍规则及反模式accessibility, animation, navigation
prompt
提示词 / 技术关键词（风格名称）

Example (beauty / wellness landing)

示例（美妆/健康养生着陆页）

bash
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
Then: turn palette + typography + motion constraints + component rules into 
design-system.md
, and convert the checklist below into acceptance criteria.
bash
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
，并将下方的检查表转换为验收标准。

Common professional UI rules (quick scan)

通用专业UI规则（快速参考）

Icons & visuals

图标与视觉元素

RuleDoDon’t
No emoji iconsUse a consistent SVG icon set (Heroicons/Lucide/Simple Icons)Mix emoji/icons randomly
Stable hover statesUse color/opacity/shadow transitionsUse transforms that cause layout shift
Correct brand logosUse official SVG sourcesGuess logos or use inconsistent variants
Consistent sizingNormalize icon sizing (e.g., 24×24)Mix different viewBox/sizes
规则正确做法错误做法
禁止使用emoji图标使用统一的SVG图标集（Heroicons/Lucide/Simple Icons）随机混合emoji和图标
稳定的悬停状态使用颜色/透明度/阴影过渡效果使用会导致布局偏移的变换效果
正确的品牌标识使用官方SVG源文件猜测标识样式或使用不一致的变体
统一的尺寸统一图标尺寸（例如：24×24）混合使用不同的viewBox或尺寸

Interaction

交互体验

RuleDoDon’t
Pointer cursorAdd 
cursor-pointer
to clickable surfaces		Leave clickable surfaces without affordance
Clear feedbackChange border/shadow/color on hoverMake hover states indistinguishable
Reasonable transitions150–300ms, consistentInstant changes or sluggish >500ms
规则正确做法错误做法
指针光标为可点击区域添加
cursor-pointer
可点击区域无任何交互提示
清晰的反馈悬停时改变边框/阴影/颜色悬停状态无明显区分
合理的过渡时长150–300毫秒，保持统一瞬间变化或超过500毫秒的迟缓过渡

Layout

布局

RuleDoDon’t
Spacing from edgesLeave room for floating navsStick UI to viewport edges
Avoid hidden contentAccount for fixed headersLet content sit behind fixed bars
Consistent containersKeep one container width systemUse multiple container widths randomly
规则正确做法错误做法
边缘留白为浮动导航预留空间将UI紧贴视口边缘
避免内容被遮挡考虑固定头部的影响让内容被固定栏遮挡
统一的容器宽度使用一套容器宽度体系随机使用多种容器宽度

Pre-delivery checklist (use as acceptance criteria)

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

Visual quality

视觉质量

  • No emoji used as UI icons
  • Icons are from a consistent icon set
  • Brand logos are correct (not guessed)
  • Hover states do not cause layout shift
  • Color usage follows a token system (avoid scattered raw hex values)
  • 未将emoji用作UI图标
  • 图标来自统一的图标集
  • 品牌标识正确（非猜测）
  • 悬停状态不会导致布局偏移
  • 颜色使用遵循标识体系（避免零散的原始十六进制值）

Interaction

交互体验

  • All clickable surfaces have 
    cursor-pointer
  • Hover/focus states provide clear feedback
  • Transitions are consistent (150–300ms)
  • Keyboard focus is visible
  • 所有可点击区域均添加了
    cursor-pointer
  • 悬停/聚焦状态提供清晰反馈
  • 过渡效果统一（150–300毫秒）
  • 键盘聚焦状态可见

Layout & responsive

布局与响应式

  • Works at 320px / 768px / 1024px / 1440px
  • No horizontal scroll on mobile
  • Fixed elements do not cover content
  • 在320px / 768px / 1024px / 1440px分辨率下均可正常显示
  • 移动端无横向滚动条
  • 固定元素不会遮挡内容

Accessibility (a11y)

无障碍（a11y）

  • Images have alt text
  • Form inputs have labels
  • Color is not the only indicator
  • Respects 
    prefers-reduced-motion
  • 图片均配有替代文本
  • 表单输入框均有标签
  • 不单独使用颜色作为唯一标识
  • 遵循
    prefers-reduced-motion
    设置