mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-10-31 02:38:13 +08:00

Files

T

Matt Van HornandMatt Van Horn d14efff8ed docs: replace disabled Discussion links and the 404 stack clone URL (#543 )

Conduct reports now go only through the contact listed on uupm.cc.
General questions now go to the repository issues page, and the README
remains the other place to look. The quickstart clones this repository
and enters ui-ux-pro-max-skill/stack before the existing setup step. A
community-docs test checks those sections for the replacement
destinations, the absence of the dead Discussion and old clone URLs,
enforcement staying off public issues and mailto links, and the setup
script being present.

Refs #542

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

2026-10-23 17:06:30 +07:00

4.4 KiB

Raw Permalink Blame History

Claude Website Design Stack

A ready-to-clone Claude Code project that makes the agent genuinely good at website design — not by hoping for better output, but by wiring in the three things generic AI design is missing: a knowledge layer, a taste layer, and a visual feedback layer.

Most AI design fails because the model never sees what it built and has no opinionated point of view. This repo fixes both: Claude plans with a real design database, commits to a distinctive aesthetic, then opens the page in a browser and iterates on what it sees — and self-reviews against WCAG AA before finishing.

The stack

Layer	Tool	What it adds
🧠 Knowledge	`ui-ux-pro-max`	79 searchable UI styles, 192 color palettes, 74 font pairings, 119 UX rules, Core Web Vitals, 22 stacks — searchable, turned into a concrete design system
🎨 Taste	`frontend-design` (official Anthropic)	Forces a real aesthetic commitment before any CSS; kills "AI slop" defaults
🧩 Components	`shadcn` MCP	Search/add production components by natural language
👁️ Visual feedback	`@playwright/mcp` + `chrome-devtools-mcp`	Claude opens a real browser, screenshots, reads the console, exercises states, and fixes what it sees
✅ Automated review	`design-review` subagent + `/design-review`	7-phase audit across viewports: WCAG AA, responsive, interaction states

Quickstart

# 1. Clone and enter
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill/stack

# 2. Install the skills/plugins + Playwright browser
./scripts/setup.sh

# 3. Open Claude Code — the MCP servers and CLAUDE.md workflow load automatically
claude

Then just ask for UI work. Claude will plan → commit to a look → build → screenshot and iterate → run /design-review. See docs/WORKFLOW.md for a full walkthrough.

Try it in 30 seconds

> Build a pricing section for a developer tool. Plan it with ui-ux-pro-max,
> commit to a distinctive look, then screenshot it at mobile and desktop and fix any issues.

What's in here

.
├── .mcp.json                     # Playwright + Chrome DevTools + shadcn MCP servers
├── CLAUDE.md                     # The design loop Claude follows (the "brain")
├── .claude/
│   ├── settings.json             # Enables the MCP servers + safe permissions
│   ├── agents/design-review.md   # 7-phase design-review subagent
│   └── commands/
│       ├── design-review.md      # /design-review — audit a URL/page
│       └── design-plan.md        # /design-plan — generate a design system first
├── scripts/
│   ├── setup.sh                  # Installs skills/plugins + Playwright chromium
│   └── design-audit.mjs          # Standalone multi-viewport screenshot + heuristic audit
├── .github/workflows/
│   └── design-review.yml         # Runs the audit on every PR that touches UI
├── docs/
│   ├── STACK.md                  # Why each tool is in the stack
│   ├── SETUP.md                  # Install details + optional add-ons (Figma, Magic)
│   └── WORKFLOW.md               # End-to-end worked example
└── examples/juniper-audit/       # Real audit run against a production site

Standalone audit (no MCP needed)

The same checks are available as a plain script for local runs and CI:

node scripts/design-audit.mjs --url http://localhost:3000 --out audit-output
# or audit a static file
node scripts/design-audit.mjs --file ./index.html

It screenshots 7 viewport tiers (360 → 1920 px) and reports heuristic findings (horizontal overflow, missing focus styles, unsized media, contrast risks, tap-target size). See examples/juniper-audit/ for a real report.

Requirements

Node 18+ and Python 3.x
Claude Code with plugins enabled (/plugin)

License

MIT. The bundled tools keep their own licenses — see docs/STACK.md for links.

Built as a starter for teams who want Claude Code to ship distinctive, accessible, production-grade web UI instead of generic AI output.

4.4 KiB Raw Permalink Blame History