design-system-creation · aj-geddes — Claude Code skill: build a design system
A skill that lays out a design system: tokens, components, docs and governance. Useful once you have more than one interface or team.
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a claude-codeWhat design-system-creation does
The skill structures a design system in layers. The foundation covers typography (typefaces such as Roboto and Inter, a size scale from 12 to 48, Regular, Medium and Bold weights, line heights and letter spacing), colors (primary #2196F3, secondary, neutral grays, semantic success, error and warning, dark mode variants), spacing on a 4px base with a 4, 8, 12, 16, 24, 32, 48, 64 scale, and elevation levels from flat up to 16.
Four reference guides live in the references/ directory: components, component documentation, governance, and system documentation. The advice is to start with essential components rather than dozens at once, and to document each one with code examples and accessibility guidance. Versioning and clear update rules are part of the job here, since breaking changes without a migration path hit everyone already using the system.
There is also a list of what to avoid: components without proven need, skipped documentation, ignored accessibility, ignored user feedback, and components that are too prescriptive. The skill targets multiple product interfaces or teams, so on a single-screen project it adds more structure than you need.
What it helps with
- set a spacing and type scale so screens stop drifting apart
- describe components so designers and developers read them the same way
- put versioning and update rules around the system
- attach accessibility guidance to every component
- split foundation from components so you do not rewrite everything at once
Example prompts for the agent
- help me build a design system, starting with typography, color and spacing tokens
- write docs for a button component with code examples and accessibility requirements
- propose governance rules and a versioning process for the design system
How to install design-system-creation
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a claude-code2Manually: put the files in place
~/.claude/skills/design-system-creation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-system-creation/
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a codex2Manually: put the files in place
.agents/skills/design-system-creation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a cursor2Manually: put the files in place
.cursor/skills/design-system-creation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install aj-geddes/useful-ai-prompts design-system-creation2Manually: put the files in place
.github/skills/design-system-creation/SKILL.md1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a gemini-cli2Platform CLI
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/design-system-creationManually: put the files in place
.devin/skills/design-system-creation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-system-creation
How do I install design-system-creation in Claude?
Run npx skills add aj-geddes/useful-ai-prompts --skill design-system-creation -a claude-code. The skill lands in ~/.claude/skills/design-system-creation/SKILL.md.
What does design-system-creation do?
It helps you build a design system: a foundation of typography, color, spacing and elevation, a component set, documentation for each component, and governance rules.
Which projects is it meant for?
It targets multiple product interfaces or teams and scaling consistency. On a single-screen project it is more structure than you need.
Source text
SKILL.md · MIT
---
name: design-system-creation
description: >
Build comprehensive design systems with components, patterns, and guidelines.
Enable consistent design, faster development, and better collaboration across
teams.
---
# Design System Creation
## Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
## Overview
A design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.
## When to Use
- Multiple product interfaces or teams
- Scaling design consistency
- Reducing redundant component development
- Improving design-to-dev handoff
- Creating shared language across teams
- Building reusable components
- Documenting design standards
## Quick Start
Minimal working example:
```yaml
Design System Structure:
Foundation Layer:
Typography:
- Typefaces (Roboto, Inter)
- Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
- Font weights (Regular, Medium, Bold)
- Line heights and letter spacing
Colors:
- Primary brand color (#2196F3)
- Secondary colors
- Neutral palette (grays)
- Semantic colors (success, error, warning)
- Dark mode variants
Spacing:
- Base unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Apply consistently across UI
Shadows & Elevation:
- Elevation 0 (flat)
- Elevation 1, 2, 4, 8, 16 (increasing depth)
- Used for modals, cards, overlays
// ... (see reference guides for full implementation)
```
## Reference Guides
Detailed implementations in the `references/` directory:
| Guide | Contents |
|---|---|
| [Design System Components](references/design-system-components.md) | Design System Components |
| [Component Documentation](references/component-documentation.md) | Component Documentation |
| [Design System Governance](references/design-system-governance.md) | Design System Governance |
| [Design System Documentation](references/design-system-documentation.md) | Design System Documentation |
## Best Practices
### ✅ DO
- Start with essential components
- Document every component thoroughly
- Include code examples
- Test components across browsers
- Include accessibility guidance
- Version the design system
- Have clear governance
- Communicate updates proactively
- Gather feedback from users
- Maintain incrementally
### ❌ DON'T
- Create too many components initially
- Skip documentation
- Ignore accessibility
- Make breaking changes without migration path
- Allow inconsistent implementations
- Ignore user feedback
- Let design system stagnate
- Create components without proven need
- Make components too prescriptive
- Ignore performance impact
© aj-geddes · MIT · aj-geddes/useful-ai-prompts
Similar skills
Everything for Design →design-system-creation by other authors comes first.
