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
Turn project descriptions, timelines, and structured data into professional draw.io diagrams instantly. You can generate flowcharts, org charts, Gantt charts, swimlane diagrams, and process flows by describing what you need. Claude creates draw.io XML that you can open directly in the editor or modify further.
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
You can evaluate whether products are viable remanufacturing candidates by conducting systematic disassembly analysis and identifying recovery opportunities. The skill helps you design efficient remanufacturing workflows, calculate ROI and environmental impact metrics (including embodied energy recovery of 85-90%), and create remanufacturability scorecards that guide design improvements and supply chain decisions.
by skillslib
You can diagnose warehouse bottlenecks using structured data analysis, then generate optimized layouts and flow improvements. The skill models space utilization, labor deployment, and throughput constraints to identify quick wins and long-term improvements, delivering quantified cost savings and performance gains for your specific facility.
by skillslib
You can systematically code qualitative data against your evaluation framework, surface patterns and themes across multiple responses, extract compelling impact stories with supporting evidence, and generate summary matrices that link narrative findings to your outcomes claims. This skill maintains analytical rigor while reducing the 40-60 hours typically spent manually reviewing transcripts and open-ended survey responses per evaluation cycle.
by skillslib
Get complete, ready-to-deploy lead magnets tailored to your ideal customer profile. Claude designs the concept, writes the persuasive copy, builds the email sequences, and creates deployment strategies that attract qualified prospects and build engaged lists fast. You'll capture 3-5x more subscribers with magnetic offers that actually resonate.
by skillslib
You can convert raw discovery call notes into polished, multi-section sales proposals that include executive summaries tailored to buyer personas, needs analysis mapped to your solution architecture, tiered pricing options with competitive positioning, ROI projections with financial justification, and realistic implementation timelines. The skill preserves personalization and strategic positioning while automating structural components, letting you respond to RFPs and time-sensitive opportunities without sacrificing quality or consistency.
by skillslib
This skill generates optimized facility layouts by analyzing material and personnel flow patterns, validating against operational constraints, and comparing multiple design options with quantified metrics. You provide your facility's dimensions, equipment locations, and operational requirements, and Claude produces detailed layouts with flow efficiency scores, space utilization analysis, and cost-benefit comparisons. Each layout option includes specific recommendations for improving throughput, reducing congestion points, and enhancing safety compliance.
by skillslib