kimisukiandClaude Opus 5
1a2c459b35
The stack/ starter kit was added in #424 and its catalog figures were never refreshed, so they no longer match the generated source of truth in src/ui-ux-pro-max/data/catalog-summary.json (or the main README): UI styles 84 -> 79 searchable font pairings 73 -> 74 UX guidelines 99 -> 119 Verified against the data files: typography.csv has 74 rows, ux-guidelines.csv has 119, and styles.csv has 88 total / 79 searchable. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
3.7 KiB
The Stack — why each tool is here
AI design fails in three predictable ways. Each layer of this stack fixes one.
| Failure mode | Fix | Tool |
|---|---|---|
| Generic, templated look ("AI slop") | Force an aesthetic commitment | frontend-design |
| Vague, inconsistent tokens & patterns | Ground decisions in a real database | ui-ux-pro-max |
| Never sees the result → ships broken UI | Give the agent eyes | Playwright / Chrome DevTools MCP |
| Reinventing primitives | Pull proven components | shadcn MCP |
| "Looks fine to me" self-assessment | Independent, rigorous review | design-review subagent |
🧠 Knowledge — ui-ux-pro-max
A searchable design-intelligence toolkit: 79 searchable UI styles, 192 color palettes, 74 font pairings, 119 UX guidelines, 25 chart types, a Core Web Vitals dataset, and 22 tech stacks, plus a design-system generator that turns a product brief into concrete tokens. It's the answer to "what should this actually look like, and what are the anti-patterns?"
- Repo: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · License: MIT
- Install:
npx ui-ux-pro-max-cli init --ai claude - Use:
python3 <skill>/scripts/search.py "<brief>" --design-systemand--domain <domain>
🎨 Taste — frontend-design (official Anthropic)
~50 lines of markdown that stop Claude from sampling the safe center of its training data. It forces four decisions — purpose, tone, constraints, differentiation — before any CSS, names three "AI-slop" defaults to avoid, and pushes boldness into a single signature element.
- Repo: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design
- Install:
/plugin install frontend-design@anthropics/claude-code
ui-ux-pro-max decides what's correct; frontend-design decides what's distinctive. Use both.
🧩 Components — shadcn MCP
Browse, search, and install shadcn/ui components (and other registries) by natural language, instead of hand-rolling accessible primitives. Best for React/Next/Vue/Svelte projects.
- Docs: https://ui.shadcn.com/docs/mcp · Command:
npx shadcn@latest mcp
👁️ Visual feedback — Playwright MCP + Chrome DevTools MCP
The single biggest lever. Claude connects to a real Chromium, navigates, clicks, resizes, screenshots, reads the console, and takes an accessibility snapshot — so it can catch and fix its own z-index bugs, animation-timing errors, overflow, and layout shift. Chrome DevTools MCP adds deep performance/network/CLS profiling.
- Playwright MCP: https://github.com/microsoft/playwright-mcp —
npx @playwright/mcp@latest - Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp —
npx chrome-devtools-mcp@latest
✅ Automated review — design-review subagent
A senior-reviewer subagent (.claude/agents/design-review.md) that runs a 7-phase audit over a
live page: interaction states, responsiveness across 6 viewport tiers, visual polish, WCAG 2.1
AA, edge cases, and console health. Invoke with /design-review <url>. The heuristic subset
also runs headless in CI via scripts/design-audit.mjs.
Optional add-ons (not in default .mcp.json)
- Figma Dev Mode MCP — read a frame's tokens/layout to generate matching code, and push Claude-built UI back to the canvas as editable layers. Needs the Figma desktop app + Dev Mode. https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
- 21st.dev Magic MCP — generate React components from a prompt ("v0 in your editor"). Needs an API key. https://github.com/21st-dev/magic-mcp
Both are opt-in (see docs/SETUP.md) so the base stack runs with zero secrets.