mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-08-01 19:06:14 +00:00
b484e8338c
A ready-to-use Claude Code environment for website design, bundling: - .mcp.json: Playwright + Chrome DevTools + shadcn MCP servers - CLAUDE.md: the design loop (plan -> commit to a look -> build -> screenshot -> review) - .claude/agents/design-review.md: 7-phase design-review subagent (WCAG AA, responsive) - .claude/commands: /design-review, /design-plan - scripts/design-audit.mjs: standalone multi-viewport screenshot + heuristic audit - .github/workflows/design-review.yml: CI design gate (template) - docs/: STACK, SETUP, WORKFLOW - examples/juniper-audit/: a real audit run (report + 6 viewport screenshots) Pairs with the ui-ux-pro-max skill (knowledge layer) and the official frontend-design plugin (taste layer). Lives on its own branch as a self-contained starter; copy stack/ out to seed a standalone repo. Co-authored-by: Claude <noreply@anthropic.com>
97 lines
4.4 KiB
Markdown
97 lines
4.4 KiB
Markdown
# 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`](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) | 84 UI styles, 192 color palettes, 73 font pairings, 99 UX rules, Core Web Vitals, 22 stacks — searchable, turned into a concrete design system |
|
|
| 🎨 **Taste** | [`frontend-design`](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) (official Anthropic) | Forces a real aesthetic commitment before any CSS; kills "AI slop" defaults |
|
|
| 🧩 **Components** | [`shadcn` MCP](https://ui.shadcn.com/docs/mcp) | Search/add production components by natural language |
|
|
| 👁️ **Visual feedback** | [`@playwright/mcp`](https://github.com/microsoft/playwright-mcp) + [`chrome-devtools-mcp`](https://github.com/ChromeDevTools/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
|
|
|
|
```bash
|
|
# 1. Clone and enter
|
|
git clone https://github.com/YMungerDev/claude-website-design-stack
|
|
cd claude-website-design-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:
|
|
|
|
```bash
|
|
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.
|