Figma Design System Documentation Generator
Extract Figma design systems into production documentation
What You Can Do
This skill extracts design tokens, components, and patterns directly from your Figma design system and generates comprehensive, production-ready documentation with technical specifications and implementation guides. You get complete design system documentation that stays synchronized with your Figma source, complete with token references, component specs, and developer-facing code examples.
Features
colors, typography scales, spacing systems, shadows, and border radiuses with automatic CSS variable and Tailwind class generation
specifications for each component including variants, states, usage guidelines, and accessibility requirements
identify recurring patterns and document best practices for common UI solutions
produce CSS, Tailwind configuration, and component implementation examples ready for developer consumption
document component dependencies, naming conventions, and relationships across your entire system
step-by-step instructions for developers to integrate tokens and components into their codebase
document color contrast requirements, ARIA attributes, and accessibility best practices for each component
generate tokens in JSON, CSS, SCSS, and Tailwind config formats for different tech stacks
Example Output
Design Token Reference:
## Color Palette
### Primary Colors
- Primary Blue: #2563FF
CSS: var(--primary)
Tailwind: bg-primary
Usage: CTAs, primary actions, focus states
### Typography Scale
- Heading 1: 2.5rem / 40px, 700 weight
- Body: 1rem / 16px, 400 weight
Component Specification:
## Button Component
### Variants
- Primary (background: var(--primary), text: white)
- Secondary (background: var(--secondary), text: white)
- Ghost (background: transparent, border: var(--primary))
### States
- Default, Hover, Active, Disabled
- Min height: 2.5rem, Padding: 0.75rem 1rem
### Accessibility
- ARIA: aria-disabled for disabled state
- Focus: 2px primary outline, 2px offset
- Contrast ratio: 4.5:1 minimum
Implementation Guide:
### Installation in React
1. Import token definitions from design-tokens/colors.ts
2. Apply className='btn btn-primary' to Button component
3. Reference token variables in CSS: background: var(--primary)
What's Included
- SKILL.md: Figma API extraction workflows, token mapping logic, and design system analysis procedures
- Design System Documentation Templates: Token reference template, component specification template, design patterns guide
- Implementation Checklists: Developer handoff verification, accessibility compliance audit, token export validation
- Token Export Workflows: Automated generation of JSON, CSS variables, Tailwind config, and SCSS output formats
- Component Inventory Template: Component relationship mapping, naming convention guide, variant matrix
Who It's For
- Design System Managers — creating authoritative documentation that keeps pace with design evolution
- UX/UI Designers — standardizing and documenting design systems for team consistency
- Frontend Engineers — accelerating component implementation with comprehensive specifications and code examples
- Design Operations Leads — maintaining design governance and ensuring design-to-code alignment
- Product Teams — scaling design consistency across multiple products and platforms
Best For
- Generating comprehensive design system documentation from existing Figma files without manual specification writing
- Creating component specifications with variants, states, accessibility requirements, and implementation code
- Extracting and organizing design tokens into multiple formats for different tech stacks and platforms
- Building developer handoff documentation that bridges design and engineering workflows
- Maintaining synchronized design system specs as your Figma design system evolves
You might also like
Prepare comprehensive expert witness reports and testimony that meet Daubert standards for admissibility and withstand cross-examination scrutiny. You'll get structured case analyses integrating psychological assessments, relevant case law citations, and anticipated counterarguments. The skill helps you document your forensic opinions with the legal rigor required in criminal, civil, and family law proceedings.
by skillslib
You design robust motion control systems by generating control architectures, tuning PID and state-space controllers, and analyzing stability margins with detailed performance predictions. You'll get transfer functions, tuned gains, frequency response plots, real-time constraint validation, and code templates ready for implementation in MATLAB or Python.
by skillslib
You can systematically evaluate architectural options by building decision matrices, identifying trade-offs, and documenting design rationale. This skill generates comparison frameworks, risk assessments, and architecture decision records (ADRs) that help you choose between competing approaches based on concrete criteria like performance, scalability, cost, and team capabilities.
by skillslib
You provide a single core insight or perspective, and this skill transforms it into a complete, coordinated thought leadership content suite across every major channel. It generates optimized articles, social threads, email sequences, presentation outlines, and more—all reinforcing the same core message while adapting to each platform's unique audience and format. Every piece maintains strategic consistency while maximizing reach and engagement.
by skillslib
Analyze commercial insurance applications by extracting risk factors, evaluating loss history and industry exposure, and generating structured underwriting recommendations with standardized documentation. You'll reduce review time per application, ensure consistent decision criteria across your team, and maintain compliant audit trails for every underwriting action.
by skillslib
You can systematically diagnose flow problems in your Kanban board by analyzing stage-by-stage work accumulation, cycle time patterns, and throughput trends. The skill generates flow metrics dashboards, identifies capacity constraints, forecasts delivery dates based on historical data, and produces prioritized improvement recommendations with estimated impact—giving you objective evidence to guide WIP adjustments, process changes, and retrospective discussions.
by skillslib
You can map your game's features to certification requirements across ESRB, PEGI, USK, CLASSIND, and platform-specific standards simultaneously. The skill generates compliant test cases that prove adherence to each body's content and technical standards, tracks certification status to identify gaps before submission, and documents evidence trails for audits and appeals. This prevents costly certification rejections (2-8 week delays, $2,500-$10,000+ resubmission fees) by ensuring comprehensive compliance documentation from the QA phase onward.
by skillslib
You can design culturally appropriate survey instruments tailored to international development contexts, analyze mixed-methods data by integrating quantitative findings with qualitative insights, and implement robust data quality management systems for your field operations. Claude helps you create survey templates with adaptive logic, develop validation protocols, and produce data quality reports that highlight issues before analysis begins.
by skillslib