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
Create comprehensive KPI dashboards that track supply chain performance across cost, quality, delivery, and service metrics. Automate variance analysis to identify root causes of performance deviations and generate executive-level reports that translate operational data into actionable insights for leadership and stakeholders.
by skillslib
You'll design robust SCADA system architectures, configure industrial protocols (Modbus, Profibus, OPC-UA, DNP3), and diagnose connectivity and performance issues across distributed control networks. Get step-by-step configuration guidance, integration workflows, and troubleshooting decision trees tailored to your specific hardware and protocol stack.
by skillslib
You can establish systematic color grading workflows that accelerate project delivery, ensure visual consistency across episodes and projects, and maintain broadcast-quality standards. Claude generates reusable templates, quality control checklists, and grading decision frameworks tailored to your project's color science and deliverable requirements.
by skillslib
You can orchestrate every aspect of your live event with a unified command center that responds to real-time incidents, coordinates teams across departments, and adjusts plans on the fly. The skill generates contingency workflows, communication protocols, and decision frameworks so you stay ahead of problems instead of reacting to them. You'll have structured guidance for everything from timeline adjustments to vendor coordination to emergency escalations.
by skillslib
You'll build complete activation funnels by analyzing user behavior, identifying conversion bottlenecks, and designing targeted onboarding campaigns. Claude creates customer journey maps, funnel stage definitions, engagement messaging frameworks, and A/B testing strategies tailored to your product and audience.
by skillslib
Use Claude to automate your entire collection workflow, from first touch to recovery, with legally sound escalation protocols. You'll recover more money in less time, reduce bad debt write-offs by 25-40%, and build defensible collection records that withstand legal scrutiny. Claude handles customized demand letters, compliance validation, debtor profiling, and escalation strategies tailored to account age, debtor behavior, and jurisdiction.
by skillslib
You can conduct comprehensive active transportation network audits that identify missing links, connectivity gaps, and underserved communities. Claude helps you prioritize infrastructure investments against limited budgets using equity screening, mode-share modeling, and cost-benefit analysis—producing client-ready documentation and stakeholder presentations that justify infrastructure decisions with quantitative evidence rather than assumptions.
by skillslib
This skill helps you troubleshoot Wwise integration issues, diagnose audio performance bottlenecks, and generate comprehensive documentation for interactive audio specifications. You'll get step-by-step fixes for common implementation problems, performance optimization strategies, and best practices for audio systems across different game engines and platforms.
by skillslib