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
Get instant expert guidance on setting up remote broadcast gear, troubleshooting signal problems, and solving connectivity issues before they derail your show. You describe your equipment, network conditions, or specific error, and receive actionable diagnostics and step-by-step fixes tailored to your exact broadcast scenario.
by majiayu000
You can rapidly produce news stories from research to publication, automatically optimizing content for web, social media, and email platforms. Claude helps you generate SEO-friendly headlines, craft engaging social snippets, structure compelling narratives, and manage your publishing workflow—all while maintaining editorial quality and deadline pressure.
by majiayu000
Transform your news stories into digitally-optimized scripts that maximize viewer engagement while preserving journalistic integrity. You provide the raw story, reporting notes, or article text, and Claude crafts segment-ready scripts with opening hooks, natural pacing, and strategic placement of key information. The skill adapts your content for various digital platforms—social video, streaming, web articles—each with tailored formatting and emphasis.
by majiayu000
Analyze out-of-band (OB) signal patterns to detect degradation, intermittency, and latency anomalies. Generate failover runbooks that automate detection-to-recovery workflows, reducing MTTR. Execute blind diagnostics when primary channels fail, identifying root causes through log correlation and metric analysis.
by majiayu000
You can load existing PRDs or saved prompts, discuss targeted improvements with Claude, and refine requirements without losing track of what changed. The skill manages source discovery, guides you through iteration cycles, and maintains clear modification markers ([ADDED], [MODIFIED], [REMOVED], [UNCHANGED]) so you always know what evolved during refinement.
by majiayu000
You generate production-ready design briefs from client requirements, automatically check dozens of designs for brand consistency violations, and orchestrate batch workflows with approval checkpoints. This skill ensures every design aligns with your brand guidelines while accelerating your design approval cycle by weeks.
by majiayu000
You can architect efficient multi-camera editing workflows optimized for Final Cut Pro, plan robust synchronization strategies across multiple camera angles, and design realistic production timelines that prevent bottlenecks. This skill transforms complex multicam shoots into streamlined editorial pipelines tailored to your team size, budget, and output deadlines.
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