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

Design Tools

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

About

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.

Key Features

Semantic color and typography token generation with accessibility analysis
0 GitHub stars
Automated detection of complex layout structures and grid systems
7-pass serial architecture for high-precision visual analysis and cross-validation
W3C Design Tokens Community Group (DTCG) compliant JSON output
Persistent file-based storage of intermediate results for auditing and debugging

Use Cases

Reverse-engineering visual styles and component trees for frontend code generation
Generating comprehensive design system tokens from legacy website screenshots
Converting static UI mockups into structured component documentation for developer handoff

About

Key Features

Semantic color and typography token generation with accessibility analysis
0 GitHub stars
Automated detection of complex layout structures and grid systems
7-pass serial architecture for high-precision visual analysis and cross-validation
W3C Design Tokens Community Group (DTCG) compliant JSON output
Persistent file-based storage of intermediate results for auditing and debugging

Use Cases

Reverse-engineering visual styles and component trees for frontend code generation
Generating comprehensive design system tokens from legacy website screenshots
Converting static UI mockups into structured component documentation for developer handoff