Skip to content
Design
Command

/design-plan

Generate a concrete design system (tokens, style, type, UX) before building UI

From plugin
ui-ux-pro-max
127k2 skills1 agent2 commands3 MCP
Install
> /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
> /plugin install ui-ux-pro-max@ui-ux-pro-max-skill

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/design-plan

Context preview

What this command does when you run it.

Generate a concrete design system (tokens, style, type, UX) before building UI

Command definition

design-plan.md
description: Generate a concrete design system (tokens, style, type, UX) before building UI
argument-hint: <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.

Ships withui-ux-pro-max

🇮🇩 Bahasa Indonesia | 🇰🇷 한국어 | 🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇺🇸 English An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.

Get the whole plugin
Stats
127,526
Stars
13,615
Forks
Active
Maintenance
Python
Language
MIT
License
4d ago
Last commit
9mo ago
Created
13d ago
Added

Repo: nextlevelbuilder/ui-ux-pro-max-skill

Other commands on ui-ux-pro-max.