design-spec-extraction

Extract design specifications from Figma exports and screenshots into structured JSON.

5|3|Updated Oct 23, 2025

Search Tags:#automation #json #handoff #tokens #design-systems #design-extraction

One-click install

npx skills add https://github.com/Cygnusfear/claude-stuff --skill design-spec-extraction

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: design-spec-extraction
Source: https://github.com/Cygnusfear/claude-stuff/tree/main/skills/design-spec-extraction
Command: npx skills add https://github.com/Cygnusfear/claude-stuff --skill design-spec-extraction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the extraction of design specifications from visual inputs (Figma exports, screenshots) into a structured JSON design spec consumable by code generation, docs, and handoff.

Core Features & Use Cases

7-pass extraction pipeline: Cross-validates across passes to deliver complete design tokens, components, layout, and accessibility data.
W3C DTCG-compliant tokens: Outputs standardized tokens and component trees for code generation and design systems.
Use Case: Convert a UI mockup into a machine-readable spec for developer handoff and documentation.

Quick Start

Use the design-spec-extraction skill to generate a final design-spec.json from a screenshot or Figma export and review the pass outputs.