Figma Design System & Specification Generator
Generate design system docs and component specs from Figma
What You Can Do
You can transform Figma design files into comprehensive design system documentation, component specifications, and developer handoff materials. This skill extracts component hierarchies, design tokens, and responsive variants directly from your Figma workspace, then generates production-ready specification documents with design tokens, code examples, and accessibility guidelines.
Features
Analyze Figma component structure, variants, and nesting to map design organization
Create detailed markdown specs including component props, variants, states, and usage guidelines
Generate design token mappings for colors, typography, spacing, and shadows in JSON or CSS formats
Produce tailored documentation with code snippets, integration examples, and implementation checklists
Identify component deviations, duplicate styles, and missing documentation across your design system
Extract and document layout behavior, grid specifications, and breakpoint rules from Figma prototypes
Create WCAG compliance requirements and accessibility specifications for each component
Automatically catalog component variants (states, sizes, themes) with visual diff descriptions
Example Output
Component Specification (Button):
## Button Component
### Props
- **size** — xs, sm, md, lg (default: md)
- **variant** — primary, secondary, ghost (default: primary)
- **disabled** — boolean (default: false)
### Design Tokens
- Primary color: #2563FF (--primary)
- Border radius: 6px (--radius-sm)
- Padding: 12px 24px (--spacing-md)
### Accessibility
- Minimum touch target: 44×44px
- Color contrast ratio: 4.5:1 (WCAG AA)
Design Token Export:
{"colors": {"primary": "#2563FF", "secondary": "#0F172A"}, "typography": {"heading-lg": "32px/1.2"}, "spacing": {"md": "12px"}}
What's Included
- SKILL.md: Complete skill workflow for parsing Figma files and generating specifications
- Component spec template: Markdown template with sections for props, tokens, states, and accessibility
- Design token mapping template: JSON/CSS template for exporting colors, typography, spacing, and shadows
- Developer handoff checklist: Structured outline for implementation guides with code examples
- Accessibility compliance matrix: WCAG criteria checklist for component validation
- Responsive breakpoint worksheet: Template for documenting grid, layout, and breakpoint specifications
- Variant documentation workflow: Systematic process for cataloging and describing component states
Who It's For
- Design system leads — Maintain comprehensive, up-to-date component documentation automatically
- Product designers — Create component libraries with structured specifications for engineering handoff
- Design engineers — Bridge design and development with precise token mappings and implementation guides
- Frontend developers — Access detailed component specs, tokens, and code examples for accurate implementation
- Design ops professionals — Audit design consistency, enforce token usage, and validate design system compliance
Best For
- Creating component specifications from design-source-of-truth files
- Generating design token exports for code consumption (CSS, JSON)
- Preparing developer handoff documentation with code snippets
- Validating design consistency across component variants
- Documenting responsive behavior and breakpoint specifications
- Generating accessibility compliance checklists for component reviews
- Syncing design system documentation with evolving Figma libraries
You might also like
Generate polished broadcast scripts from talking points, verify facts against sports data in real time, and prepare anchors with comprehensive interview prep including player history and context. You'll produce show-ready scripts with proper pacing, tone optimization for on-air delivery, and talking points for live ad-libs.
by majiayu000
You can debug, write, and optimize Python scripts for Cinema 4D with structured workflows and production-ready templates. This skill helps you resolve API errors, improve script performance, and automate complex 3D workflows with confidence, reducing iteration time and minimizing runtime issues in production pipelines.
by majiayu000
You'll learn to structure mobile apps using Expo Router's file-based routing system, implement native iOS controls like tabs, switches, and pickers, create smooth animations with Reanimated, and apply advanced styling with blur effects, gradients, and glassmorphism. This skill covers everything from routing fundamentals to production-ready patterns for building polished, performant applications.
by majiayu000
You can structure complex motion graphics projects by decomposing compositions into layers, sequences, and timing breakdowns before implementation. Claude helps you document creative direction, plan animation strategies, and create comprehensive production briefs that eliminate ambiguity and reduce After Effects rework.
by majiayu000
You can generate production-ready ExtendScript code to automate batch Photoshop workflows, process hundreds of assets with consistent results, and build custom image processing pipelines. Claude helps you debug complex scripts, optimize for performance, and solve asset management challenges without requiring deep ExtendScript expertise.
by majiayu000
Analyze your Premiere Pro projects to identify performance bottlenecks, memory issues, and rendering inefficiencies. You'll receive targeted optimization recommendations, automation scripts, and troubleshooting guidance tailored to your specific system configuration and project complexity. Claude becomes your technical production consultant, helping you resolve crashes, slow timelines, and resource conflicts.
by majiayu000
You create professional video scripts for digital news segments that balance journalistic integrity with audience engagement. The skill generates platform-specific content tailored to TikTok, YouTube, LinkedIn, or broadcast formats, complete with timing cues, B-roll suggestions, and retention hooks. Each script maintains editorial standards while maximizing viewer completion rates and social sharing potential.
by majiayu000
Convert raw news wire copy and story notes into polished, anchor-ready scripts with proper pacing, vocal tone guidance, and delivery cues. You get timing estimates, emphasis markers, pronunciation guides, and transition language that keeps listeners engaged and maintains your station's voice throughout every segment.
by majiayu000