design-plan
Generate a concrete design system (tokens, style, type, UX) before building UI
Install / Use
npx skills add nextlevelbuilder/ui-ux-pro-max-skillInstalls into whichever agent you are using.
Claude Commands
Claude Code slash commands
Quality Score
Category
DesignSupported Platforms
Our assessment of design-plan
design-plan scores 87/100 on our quality scale, 39th of 139 Design skills we index (top 29%).
Its Claude Commands is 1.3 KB long, written without headings and no code examples: moderately detailed.
With 130,216 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated 3 days ago, so design-plan is actively maintained.
- It is released under the MIT license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
design-plan compared with similar skills
All 4 of these similar skills score higher than design-plan; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| design-plan (this skill)by nextlevelbuilder | 87 | 130.2k | 3d ago | Claude Commands |
| claude-memby thedotmack | 100 | 94.7k | today | CLAUDE.md |
| Agent-Reachby Panniantong | 100 | 85.4k | 9d ago | CLAUDE.md |
| Understand-Anythingby Egonex-AI | 100 | 84.1k | 13d ago | CLAUDE.md |
| headroomby headroomlabs-ai | 100 | 73.8k | today | CLAUDE.md |
Frequently asked questions
- How do I install design-plan?
- Run
npx skills add nextlevelbuilder/ui-ux-pro-max-skill. The install tabs above show the steps for each supported agent. - Which AI agents does design-plan work with?
- It is written for Claude Code, as a Claude Commands file. Other agents that read the same format can often use it too.
- Is design-plan safe to use?
- It is MIT-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is design-plan still maintained?
- The repository was last updated 3 days ago, so design-plan is actively maintained.
Skill content
View source on GitHubdescription: 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
-
Run the
ui-ux-pro-maxdesign-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.) -
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
-
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.
Related Skills
claude-mem
94.7kPersistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Agent-Reach
85.4kGive your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
Understand-Anything
84.1kGraphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
headroom
73.8kCompress tool outputs, logs, files, and RAG chunks before they reach the LLM. 20% fewer tokens for coding agents, 60-95% fewer tokens for JSON, same answers. Library, proxy, MCP server.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.