Design System Documentation Generator
Generate production-ready design system documentation from tokens to components
What You Can Do
This skill generates structured, maintainable documentation that serves as your design system's single source of truth. You'll produce professional spec sheets, token architecture guides, component usage patterns, accessibility compliance requirements, and developer implementation guides—all formatted for different audiences from designers to engineers. It eliminates gaps between design intent and code by creating clear governance frameworks and contribution guidelines.
Features
Generate complete token inventories with naming conventions, semantic grouping, and usage context for colors, typography, spacing, and effects
Create detailed specs including anatomy, props, states, behavior definitions, and visual annotations for each component
Produce code-ready documentation with examples, integration patterns, and best practices for developer handoff
Document WCAG requirements, keyboard interactions, ARIA attributes, and testing criteria for each component
Generate design patterns, do's/don'ts, edge cases, and contextual usage recommendations for consistent application
Build frameworks defining component contribution criteria, update processes, and decision-making authority
Output documentation structured for designers (aesthetic rationale, visual patterns) and developers (precise specs, code examples)
Generate token relationships, component hierarchy, and dependency mappings for complex systems
Example Output
Design Token Documentation:
Color Tokens
├── Primary
│ ├── primary-50: #F0F7FF (Light backgrounds)
│ ├── primary-500: #0066CC (Interactive elements)
│ └── primary-900: #00264D (High contrast text)
├── Semantic
│ ├── background-default: {primary-50}
│ └── text-interactive: {primary-500}
Component Spec Example:
Button Component
- Variants: primary, secondary, tertiary, ghost
- States: default, hover, active, disabled, loading
- Props: size (sm/md/lg), icon, label, fullWidth
- Accessibility: role="button", keyboard navigation, focus states
- Code Example: <Button variant="primary" size="md">Click Me</Button>
Usage Guideline:
- ✅ Use primary buttons for main actions
- ❌ Don't combine two primary buttons in one interface
- ⚠️ Consider mobile touch targets (min 44px)
What's Included
- SKILL.md: Complete instruction file with token documentation templates
- Design Token Template: Structured format for token inventories, naming conventions, and semantic mappings
- Component Specification Checklist: Comprehensive breakdown covering anatomy, props, states, accessibility, and code examples
- Implementation Guide Framework: Developer-focused documentation structure with integration patterns and best practices
- Accessibility Compliance Matrix: WCAG requirements mapped to component states and interactions
- Contribution Guidelines Template: Governance framework for component submissions and system updates
Who It's For
- Design Systems Leads — Create authoritative documentation that unifies design and development teams
- UI/UX Designers — Document design decisions, token systems, and component patterns for cross-team collaboration
- Frontend Engineers — Access clear implementation specs, code examples, and accessibility requirements
- Design Operations Managers — Establish governance frameworks and contribution processes for scaling design systems
- Product Managers — Reference design rationale, decision frameworks, and compliance documentation
Best For
- Launching new design systems or major system expansions
- Documenting new component families and design tokens
- Creating developer handoff documentation to reduce implementation time
- Building onboarding materials for designers and engineers joining the system
- Establishing and maintaining design system governance and contribution standards
- Defining accessibility compliance across all components
- Creating multi-format documentation for different audiences
You might also like
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can consolidate mixed usability research data—behavioral notes, task completion rates, error logs, participant quotes, and video timestamps—into a unified issue framework with severity classifications, root cause analysis, and remediation recommendations. This skill creates hierarchical issue inventories that communicate findings to stakeholders with clarity, establishing shared language around problem severity and impact across cross-functional teams.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
Conduct comprehensive culture assessments that go beyond pulse surveys to uncover hidden friction points impacting designer satisfaction and retention. You'll quantify culture health across key dimensions like psychological safety, autonomy, growth opportunity, and collaboration effectiveness, then generate prioritized improvement roadmaps with specific interventions backed by team feedback. This framework helps you build evidence-based business cases for culture investments and track improvements across quarterly cycles.
by calesthio