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 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
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
Conduct comprehensive design operations audits using repeatable protocols that quantify inefficiencies across workflows, handoffs, and governance. You'll identify systemic bottlenecks, map dependencies and ownership gaps, and produce actionable recommendations with business cases for process improvements. The framework helps you move from reactive problem-solving to proactive optimization by accounting for team capacity, tool constraints, and organizational context.
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 translate research objectives into executable test protocols that recruit the right participants, ask the right questions, and measure outcomes clearly. This skill helps you design moderated or unmoderated tests that validate interaction patterns, test information architecture, evaluate new features, or compare design alternatives—with structured analysis frameworks built in.
by calesthio
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 plan, build, and optimize complete UI/UX solutions for websites, dashboards, e-commerce platforms, and mobile apps. The skill provides curated design patterns (glassmorphism, minimalism, neumorphism, bento grids), 21 color palettes, 50 font pairings, 20+ chart types, and implementation guidance for 8 development stacks. Whether you're reviewing existing code, improving accessibility, or creating animations, you get framework-specific recommendations and responsive design strategies.
by trungtv
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