Why does it use a 7-pass architecture?

The serial multi-pass approach ensures that each layer of design (layout, color, typography, spacing, etc.) is analyzed with specific focus, leading to much higher accuracy than a single-pass extraction.

Where does the skill save the extracted data?

The skill follows a file-based architecture, writing both intermediate passes and the final consolidated specification to the .design-specs/ folder in your local repository.

What input formats does this skill support?

The skill can analyze various visual sources including Figma exports, Sketch mockups, PNG/JPG screenshots, or live website captures.

Is the output compatible with modern design tools?

Yes, it produces JSON following the W3C Design Tokens Community Group (DTCG) format, which is the industry standard for cross-tool token exchange.

Can it detect accessibility issues?

Yes, Pass 6 of the extraction process specifically analyzes WCAG contrast ratios, semantic structures, and interactive states.

Design Spec Extraction

Name: Design Spec Extraction
Author: Cygnusfear

byCygnusfear

0•

デザインツール

Extracts W3C-compliant JSON design specifications and component trees from visual mockups and screenshots.

This skill automates the complex process of translating visual designs into developer-ready technical specifications. Utilizing a rigorous 7-pass serial subtask architecture, it meticulously analyzes layouts, color palettes, typography, spacing, and component hierarchies. The resulting JSON output follows the W3C Design Tokens Community Group (DTCG) 2025.10 standards, making it the ideal tool for populating design systems, accelerating frontend code generation, and creating high-fidelity developer handoff documentation from screenshots, Figma exports, or live web captures.

主な機能

01Semantic color and typography token generation with accessibility analysis

020 GitHub stars

03Automated detection of complex layout structures and grid systems

047-pass serial architecture for high-precision visual analysis and cross-validation

05W3C Design Tokens Community Group (DTCG) compliant JSON output

06Persistent file-based storage of intermediate results for auditing and debugging

ユースケース

01Reverse-engineering visual styles and component trees for frontend code generation

02Generating comprehensive design system tokens from legacy website screenshots

03Converting static UI mockups into structured component documentation for developer handoff

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cygnusfear/claude-stuff design-spec-extraction

For use in Claude.ai and ChatGPT

Download Skill