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'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You can generate, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
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