Tool: UI/UX Pro Max (Searchable Design Intelligence)
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
Prerequisites
Ensure Python is available:
python3 --version || python --version
Core command
Domain search:
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
Stack search:
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
Recommended workflow
When asked to design / improve UI, do this:
- 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)
- Search domains (pick 1–3 results per domain, then synthesize):
product — product type → style directionstyle — style details (color/shape/motion/complexity)typography — heading/body pairing (includes Google Fonts + CSS import)color — palette tokens (primary/secondary/CTA/background/text/border)landing — landing structure (section order + CTA placement)chart — chart recommendations (dashboards)ux — UX + a11y rules and anti-patterns
- Search by stack to ground decisions in implementation constraints:
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs
Domain reference
| Domain |
Use for |
Example keywords |
product |
Style direction by product type |
saas, ecommerce, portfolio, healthcare |
style |
UI style concepts & implementation hints |
minimalism, brutalism, glassmorphism |
typography |
Font pairings + import instructions |
elegant, playful, professional |
color |
Palette tokens (Hex) |
saas, ecommerce, fintech |
landing |
Landing structure & CTA strategy |
hero, testimonial, pricing |
chart |
Chart type selection |
trend, comparison, funnel |
ux |
UX/a11y rules & anti-patterns |
accessibility, animation, navigation |
prompt |
Prompt / technical keywords |
(style name) |
Example (beauty / wellness landing)
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.
Common professional UI rules (quick scan)
Icons & visuals
| Rule |
Do |
Don’t |
| No emoji icons |
Use a consistent SVG icon set (Heroicons/Lucide/Simple Icons) |
Mix emoji/icons randomly |
| Stable hover states |
Use color/opacity/shadow transitions |
Use transforms that cause layout shift |
| Correct brand logos |
Use official SVG sources |
Guess logos or use inconsistent variants |
| Consistent sizing |
Normalize icon sizing (e.g., 24×24) |
Mix different viewBox/sizes |
Interaction
| Rule |
Do |
Don’t |
| Pointer cursor |
Add cursor-pointer to clickable surfaces |
Leave clickable surfaces without affordance |
| Clear feedback |
Change border/shadow/color on hover |
Make hover states indistinguishable |
| Reasonable transitions |
150–300ms, consistent |
Instant changes or sluggish >500ms |
Layout
| Rule |
Do |
Don’t |
| Spacing from edges |
Leave room for floating navs |
Stick UI to viewport edges |
| Avoid hidden content |
Account for fixed headers |
Let content sit behind fixed bars |
| Consistent containers |
Keep one container width system |
Use multiple container widths randomly |
Pre-delivery checklist (use as acceptance criteria)
Visual quality
Interaction
Layout & responsive
Accessibility (a11y)
1---2name: tool-ui-ux-pro-max3description: Use when you need concrete UI/UX inputs (palette, typography, landing patterns, UX/a11y constraints) to drive design or review. Searchable UI/UX design intelligence (styles, palettes, typography, landing patterns, charts, UX/a11y guidelines + stack best practices) backed by CSV + a Python search script. Triggers: UIUX/uiux, UI/UX, UX design, UI design, design system, design spec, color palette, typography, layout, animation, accessibility/a11y, component styling. Actions: search, recommend, review, improve UI.4---5
6# Tool: UI/UX Pro Max (Searchable Design Intelligence)
7
8This is a **lookup tool**, not a page generator.
9
10Use it to quickly retrieve concrete inputs (palette tokens, typography pairings, UX constraints, stack-specific implementation notes) that can be synthesized into:
11- `design-system.md`
12- a UI refactor plan / acceptance criteria
13- review checklists for “looks good but feels broken” issues
14
15## Prerequisites
16
17Ensure Python is available:
18
19```bash
20python3 --version || python --version
21```
22
23## Core command
24
25Domain search:
26
27```bash
28python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
29```
30
31Stack search:
32
33```bash
34python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> [-n <max_results>]
35```
36
37Available stacks:
38`html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`
39
40## Recommended workflow
41
42When asked to design / improve UI, do this:
43
441) Identify these inputs:
45- **Product type**: SaaS / e-commerce / content / tool / dashboard / landing
46- **Tone keywords**: minimal / premium / playful / warm / corporate / technical / bold
47- **Industry**: healthcare / fintech / education / consumer / …
48- **Stack**: React / Next.js / … (default to `html-tailwind` if unspecified)
49
502) Search domains (pick 1–3 results per domain, then synthesize):
511. `product` — product type → style direction
522. `style` — style details (color/shape/motion/complexity)
533. `typography` — heading/body pairing (includes Google Fonts + CSS import)
544. `color` — palette tokens (primary/secondary/CTA/background/text/border)
555. `landing` — landing structure (section order + CTA placement)
566. `chart` — chart recommendations (dashboards)
577. `ux` — UX + a11y rules and anti-patterns
58
593) Search by stack to ground decisions in implementation constraints:
60
61```bash
62python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs
63```
64
65## Domain reference
66
67| Domain | Use for | Example keywords |
68|--------|---------|------------------|
69| `product` | Style direction by product type | saas, ecommerce, portfolio, healthcare |
70| `style` | UI style concepts & implementation hints | minimalism, brutalism, glassmorphism |
71| `typography` | Font pairings + import instructions | elegant, playful, professional |
72| `color` | Palette tokens (Hex) | saas, ecommerce, fintech |
73| `landing` | Landing structure & CTA strategy | hero, testimonial, pricing |
74| `chart` | Chart type selection | trend, comparison, funnel |
75| `ux` | UX/a11y rules & anti-patterns | accessibility, animation, navigation |
76| `prompt` | Prompt / technical keywords | (style name) |
77
78## Example (beauty / wellness landing)
79
80```bash
81python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
82python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
83python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
84python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
85python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
86python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
87python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux
88python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
89```
90
91Then: turn **palette + typography + motion constraints + component rules** into `design-system.md`, and convert the checklist below into acceptance criteria.
92
93## Common professional UI rules (quick scan)
94
95### Icons & visuals
96
97| Rule | Do | Don’t |
98|------|----|------|
99| No emoji icons | Use a consistent SVG icon set (Heroicons/Lucide/Simple Icons) | Mix emoji/icons randomly |
100| Stable hover states | Use color/opacity/shadow transitions | Use transforms that cause layout shift |
101| Correct brand logos | Use official SVG sources | Guess logos or use inconsistent variants |
102| Consistent sizing | Normalize icon sizing (e.g., 24×24) | Mix different viewBox/sizes |
103
104### Interaction
105
106| Rule | Do | Don’t |
107|------|----|------|
108| Pointer cursor | Add `cursor-pointer` to clickable surfaces | Leave clickable surfaces without affordance |
109| Clear feedback | Change border/shadow/color on hover | Make hover states indistinguishable |
110| Reasonable transitions | 150–300ms, consistent | Instant changes or sluggish >500ms |
111
112### Layout
113
114| Rule | Do | Don’t |
115|------|----|------|
116| Spacing from edges | Leave room for floating navs | Stick UI to viewport edges |
117| Avoid hidden content | Account for fixed headers | Let content sit behind fixed bars |
118| Consistent containers | Keep one container width system | Use multiple container widths randomly |
119
120## Pre-delivery checklist (use as acceptance criteria)
121
122### Visual quality
123- [ ] No emoji used as UI icons
124- [ ] Icons are from a consistent icon set
125- [ ] Brand logos are correct (not guessed)
126- [ ] Hover states do not cause layout shift
127- [ ] Color usage follows a token system (avoid scattered raw hex values)
128
129### Interaction
130- [ ] All clickable surfaces have `cursor-pointer`
131- [ ] Hover/focus states provide clear feedback
132- [ ] Transitions are consistent (150–300ms)
133- [ ] Keyboard focus is visible
134
135### Layout & responsive
136- [ ] Works at 320px / 768px / 1024px / 1440px
137- [ ] No horizontal scroll on mobile
138- [ ] Fixed elements do not cover content
139
140### Accessibility (a11y)
141- [ ] Images have alt text
142- [ ] Form inputs have labels
143- [ ] Color is not the only indicator
144- [ ] Respects `prefers-reduced-motion`
majiayu000