Design System Generator Skill: Write a DESIGN_SYSTEM.md

What is the design-system-generator skill?

Design-system-generator ships inside the project-development-skills bundle of thienanblog's awesome-ai-agent-skills repository. It is for one situation: the durable design system document is the deliverable, not a one-off UI edit.

The description spells out the scope: tokens, components, accessibility, motion and visual verification. The agent is told to keep the output concise and tied to the product's actual stack and visual language.

What the agent does, in order

1. Inspect first. It reads existing design docs, brand references, representative screens, shared components, theme configuration, tokens and build tooling, and infers framework, CSS approach, themes and export formats.
2. Preserve what works. An established, coherent system is kept. For a new product, it recommends one direction within your constraints.
3. Write the contract, using a bundled template as a menu of topics rather than a form to fill.
4. Verify paths, token names, component APIs and build claims against their owners, then report.

What the document covers

• Surfaces, themes, devices, and any language or right-to-left constraints.
• Token ownership, typography, color, spacing, layout and motion.
• Shared components and the interaction states each one really supports.
• Extension rules for tokens, components, utilities and local exceptions.
• Keyboard interaction, visible focus, contrast targets, semantic markup and reduced motion.
• Visual verification at comparable states and viewports, plus asset loading and cache invalidation when the design system owns them.

Where the skill stops

• It is not for a single screen. A one-off UI edit does not need a whole document.
• It does not add a component library or migrate build tooling just to match its own examples.
• It omits prompt-writing advice and generic framework tutorials. For component rules see shadcn, and for a Figma-side library see figma-generate-library.

Use it with UiChemy

A written design system gives your agent fixed tokens to build against. UiChemy then moves the finished build into WordPress: AI to WordPress imports an AI build, and Figma to WordPress converts a Figma design. Click Get Started on uichemy.com. For the colors, see color-mode-and-theme.

How to install Design System Generator Skill: Write a DESIGN_SYSTEM.md

/plugin marketplace add thienanblog/awesome-ai-agent-skills

1. Add the marketplace

   In Claude Code, run /plugin marketplace add thienanblog/awesome-ai-agent-skills. The README also gives claude plugin marketplace add thienanblog/awesome-ai-agent-skills for the terminal, which the desktop app needs before its plugin browser lists the marketplace.

2. Install the plugin that holds the skill

   Run /plugin install project-development-skills@awesome-ai-agent-skills. The design-system-generator skill is one of the skills bundled in project-development-skills.

3. Or use Codex

   Run codex plugin marketplace add thienanblog/awesome-ai-agent-skills, open /plugins inside codex, choose the Awesome AI Agent Skills marketplace and select Install plugin on project-development-skills.

4. Ask for the document

   Describe the deliverable, for example a design system document for this project, with a pointer to your tokens and components. Specialist skills are discovered from their descriptions.

Check that it loaded

Ask for a DESIGN_SYSTEM.md on a small project. The agent should first read your tokens, components and theme config, then write the document and report what it verified.

Read the official instructions on GitHub

Key features

• Inspect before proposingThe agent reads design docs, brand references, representative screens, shared components, theme config, tokens and build tooling before it writes, and asks only about unresolved product choices that matter.
• Preserves an established systemA coherent existing system is kept as is. For a new product, the skill recommends one suitable direction and compares alternatives only when useful or requested.
• Template as a menuTEMPLATE_DESIGN_SYSTEM.md lists topics to choose from. Inapplicable sections are dropped and examples are replaced with verified project decisions.
• Accessibility baked inThe contract covers keyboard interaction, visible focus, contrast targets, semantic markup and reduced motion, not as an afterthought.
• Project specific, not genericStatements must be actionable and specific to the product. The document serves the product team, so framework tutorials and unused frameworks or themes are left out.
• Token exports on requestCSS or JSON token files are produced only when requested or needed. Example files tokens.css and design-tokens.json are read only for those formats.
• Discoverability patchIf an instruction-file link helps agents find the document, a minimal pattern in examples/AGENTS.patch.md is used, preserving any existing instruction file ownership or symlink.
• Build-aware, not build-forcingHashed filenames and manifests are treated as one cache strategy, not a required new build system. Pipeline detail links to your existing build guidance.
• Verification stepThe agent checks documented paths, token names, component APIs and build claims, inspects rendered components when visual decisions are made, and reports when visual validation could not run.
• No subagents without approvalIt runs in the main conversation by default. Delegation can raise usage, so subagents need explicit approval for the agent count and scope.

Frequently asked questions