What do I need to use Design System Generate?

A name or seed; A brand colour; Light, dark, or both; A feeling; Where it has to land.

Is Design System Generate free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Design System Generate

Q: How do I know the Design System Generate output is good?

The skill verifies itself against its own quality checks: **Did you run it, or describe it?** Every hex in the output must come from the; tool. A plausible palette written by hand is exactly what this skill exists to; replace.; **Is the seed recorded?** Without it the design is not reproducible and the.

🔵 Stable🕐 updated 2026-08-16 🔷 SkillSpec L3 ⚙ ships an executable helper pm-design

Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint. Use when asked to create a design system, pick a colour palette, build a starter theme, produce design tokens for a new product, or apply an existing brand colour to a full system. For auditing a system that already exists use design-system-audit; for extracting one from a live site use brand-guidelines.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

🗣 Say this to your agent

“We need a design system by Thursday”“Pick a colour palette for [product]”“Build a starter theme around our brand red”“Generate design tokens for the new app”“Give me a Tailwind config that passes accessibility”

What to give it

▸A name or seed — anything; the product name works. The same seed always produces the same system, so this is how a design becomes reproducible.

▸A brand colour — , if one is non-negotiable (`#E4002B` and so on). If there isn't one yet, say so and let it choose.

▸Light, dark, or both — default to both.

▸A feeling — , loosely: editorial, brutalist, glassy, terminal, or playful. If the user describes it in their own words, map it to the nearest.

▸Where it has to land — CSS variables, Tailwind, design tokens, Figma, a VS Code theme, a deck theme, Storybook. Default to CSS + tokens.

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓**Did you run it, or describe it?** Every hex in the output must come from the

✓tool. A plausible palette written by hand is exactly what this skill exists to

✓replace.

✓**Is the seed recorded?** Without it the design is not reproducible and the

✓next person starts over.

✓**Did the brand colour survive?** If the user gave one, `--brand` must be in

✓the reproduce command.

✓**Is the audit attached?** Not "it meets AA" — the actual ratios.

⚠️ What it refuses to do

**Inventing hex values.** The whole point is that these are computed.

**Claiming AA without a number.** "Accessible" is a marketing word; "4.52:1"

is a fact.

**Generating a system when one already exists.** If the product has a design

system, use [[design-system-audit]]. If it has a brand but no system, use

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="design-system-generate"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Design System Generate is one of 1169 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog