github/ui-ux-pro-max-skill
1
0
Fork 0
mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-08-01 19:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity
ui-ux-pro-max-skill/stack/.claude/commands/design-plan.md
Young Munger b484e8338c
Add website design stack starter kit under stack/ (#424) 
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>
2026-07-20 03:57:13 +07:00

1.3 KiB
Raw Permalink Blame History

description, argument-hint
description argument-hint
Generate a concrete design system (tokens, style, type, UX) before building UI <product/industry + keywords>, e.g. "fintech dashboard trustworthy data-dense"

Before writing any markup, produce a design system for: $ARGUMENTS

  1. Run the ui-ux-pro-max design-system generator to get style + color tokens + typography + UX anti-patterns:

    python3 <ui-ux-pro-max-skill-path>/scripts/search.py "$ARGUMENTS" --design-system -p "Project"

    (Resolve <ui-ux-pro-max-skill-path> from the installed skill — see CLAUDE.md.)

  2. Pull anything the brief needs specifically, e.g.:

    • --domain color "<industry> <mood>" for the palette / semantic tokens
    • --domain typography "<mood>" for font pairing + imports
    • --domain web-vitals "<page type>" for the performance budget
    • --domain ux "<pattern>" for do/don't guidance

  3. Then apply the frontend-design lens: state purpose / tone / constraints / differentiation, pick ONE tone, choose a single signature element, and reject any choice that reads like a generic AI default.

Output a compact token block (4–6 named colors, 2–3 type roles, spacing scale, one signature element) and a one-paragraph rationale. Do not start building until the tokens are decided.