design-system-plan

Generate design/DESIGN_SYSTEM.md from an approved Ur-Plan.

Updated Apr 19, 2026

Search Tags:#branding #accessibility #tokens #design-system #ui-patterns #design-ops #frontend-planning

Ready to run

npx skills add https://github.com/Tschonsen/spec-driven-claude-development --skill design-system-plan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-plan
Source: https://github.com/Tschonsen/spec-driven-claude-development/tree/main/plugin/sdcd/skills/design-system-plan
Command: npx skills add https://github.com/Tschonsen/spec-driven-claude-development --skill design-system-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Derive a cohesive design system from upstream planning to ensure visual consistency and guardrails before frontend work, aligning branding, accessibility, and token strategy.

Core Features & Use Cases

Load upstream UR_PLAN.md (and BACKEND_PLAN.md if present) to extract audience, platform constraints, accessibility targets, and brand anchors.
Establish a target feel with 3–5 adjectives and translate it into a concrete design language for colors, typography, spacing, shapes, and motion.
Draft design/DESIGN_SYSTEM.md containing Colour palette, Typography, Spacing scale, Shapes & radius, Motion, Iconography, Accessibility baseline, Tokens naming, and a Challenger pushback section; dispatch UX, accessibility and maintainability reviews before frontend planning.

Quick Start

Load UR_PLAN.md to derive context, then generate design/DESIGN_SYSTEM.md following the template.

Frequently Asked Questions about design-system-plan

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

FAQPage Schema

How do I create a design system from an existing project plan?▼

A design system plan translates upstream project context and target feel into a cohesive design language, ensuring visual consistency across UI by establishing rules for color, typography, spacing, and motion.

What components should a UI design system include for frontend planning?▼

A UI design system should include a color palette, typography, spacing scale, shapes and radius, motion, iconography, accessibility baseline, and token naming to provide comprehensive guardrails before frontend development begins.

Can I use upstream planning documents to derive accessibility baselines and design tokens?▼

Yes, the system loads upstream plans to extract audience and platform constraints, directly translating those requirements into a concrete accessibility baseline and a structured token naming strategy for the design system.

Does the design system planning process include accessibility and UX reviews?▼

Yes, after drafting the design system document, the process dispatches challenger-ux, challenger-accessibility, and challenger-maintainability reviews to validate the design language and push back on potential issues.

How do I translate a target feel into concrete design ops guidelines?▼

You define a target feel using three to five adjectives, then translate those descriptors into concrete design language rules for colors, typography, spacing scale, shapes, and motion within the design system document.

What is the best way to ensure visual consistency before starting frontend development?▼

Generating a comprehensive design system document that defines token strategy, UI patterns, and visual guardrails before frontend planning ensures strict alignment and consistency across the entire project.