Skills
.Work. You
Rest

design-spec-extraction

Community

Turn visuals into production-ready design specs.

Design & Creative#automation#json#handoff#tokens#design-systems#design-extraction
AuthorCygnusfear
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-spec-extraction
Download link: https://github.com/Cygnusfear/claude-stuff/archive/main.zip#design-spec-extraction

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.