skills.rest
pnewsam
pnewsamCOMMUNITY
Explore all skills by this author →
Website𝕏@paultakumaGitHub

create-design-system

Creates a docs/DESIGN_SYSTEM.md contract by deriving or proposing design tokens and component conventions.

1|Updated Apr 15, 2026
Search Tags:#typography#design system#color palette#design tokens#tailwind#deprecated#ui conventions
One-click install
npx skills add https://github.com/pnewsam/skills --skill create-design-system-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system
Source: https://github.com/pnewsam/skills/tree/main/archive/create-design-system
Command: npx skills add https://github.com/pnewsam/skills --skill create-design-system-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Projects without a documented design system accumulate inconsistent spacing, colors, and component patterns, leaving downstream design audits with nothing to enforce against. This Skill produces an explicit design system contract at docs/DESIGN_SYSTEM.md. ## Core Features & Use Cases - Derive Mode: Extracts spacing scales, color palettes, typography, and component patterns from existing codebases (Tailwind configs, CSS variables, theme files) using grep-based surveys. - Propose Mode: Generates a complete design system from scratch for greenfield projects, including aesthetic direction, spacing scale, semantic colors, and typography. - Consistency Notes: Documents where the codebase disagrees with the system, surfacing candidates for design-audit and design-fix work. - Use Case: After a redesign introduces divergent patterns, run this Skill to document the majority patterns as the system and flag deviations for convergence work. ## Quick Start Analyze this codebase and create a design system contract at docs/DESIGN_SYSTEM.md documenting the existing spacing, color, and typography patterns. Note: this Skill is deprecated; prefer the current ui-* reference skills and design-expert/design-* model unless the legacy docs/DESIGN_SYSTEM.md workflow is explicitly requested.

Frequently Asked Questions about create-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I document a design system from an existing codebase?▼

Use derive mode: survey Tailwind configs, CSS variables, and theme files, then extract spacing values, hex colors, and font scales with grep frequency analysis. Document the majority patterns as the system and note deviations in a Consistency Notes section.

How do I create a design system for a new greenfield project?▼

Use propose mode: write a 2-3 sentence aesthetic statement, then decisively choose a spacing base unit, semantic color palette, type scale, and component conventions. Commit to choices rather than offering options so the team has a system to converge toward.

Does this work with Tailwind or component libraries like MUI?▼

Yes. For Tailwind, document the subset of the default scale the project actually uses. For MUI, Chakra, or Ant Design, document theme overrides, custom components, and when to use library versus custom components.

What if the codebase has no consistent design patterns?▼

Document the most common patterns even if not universal, and use the Consistency Notes section to make the scope of alignment work visible. If inconsistency is severe enough that deriving is meaningless, switch to propose mode.

When should I not use the create-design-system skill?▼

This skill is deprecated. Do not use it for new UI or design work unless the user explicitly asks for the legacy docs/DESIGN_SYSTEM.md contract workflow; prefer the current ui-* reference skills and design-expert/design-* model instead.

Related Skills

Explore More Design & Creative Skills→
NextSpark-jsNextSpark-js

tailwind-theming

Guide Tailwind CSS v4 theming with CSS variables and next-themes in Next.js.

Official
Intermediate
PlamenTSVPlamenTSV
276

spec-compliance-audit

Verify documented claims against code behavior to surface spec-to-code discrepancies.

Community
Advanced
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
renpereiradxrenpereiradx

enhance-prompt

Deprecated prompt optimizer for the discontinued Stitch UI design tool.

Community
Basic