design-spec-extraction

Extract JSON design specifications from visual inputs with cross-validation.

567|82|Updated Mar 15, 2026

Search Tags:#accessibility #design tokens #component extraction #Figma export #UI specification #JSON generation

Ready to run

npx skills add https://github.com/pedronauck/skills --skill design-spec-extraction-pedronauck

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the laborious process of manually translating visual designs (screenshots, mockups) into structured, machine-readable design specifications, bridging the gap between design and development.

Core Features & Use Cases

Automated Design Token Extraction: Generates comprehensive JSON design tokens for colors, typography, spacing, and more.
Component Hierarchy Generation: Builds a structured tree of UI components with their properties and relationships.
Accessibility Analysis: Identifies potential contrast issues and provides WCAG compliance insights.
Use Case: You have a Figma export of a new app screen. Use this Skill to automatically generate a design-spec.json file containing all design tokens, component definitions, and accessibility reports, ready for your design system.

Quick Start

Use the design-spec-extraction skill to process the attached screenshot and generate a design-spec.json file.

Frequently Asked Questions about design-spec-extraction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert a Figma export into design tokens and component specs?▼

You can extract design tokens from a Figma export by processing the visual input through a multi-pass serial architecture that generates a structured JSON file containing colors, typography, spacing, and component definitions.

What is JSON design specification extraction from visual mockups?▼

JSON design specification extraction is the automated process of translating visual screenshots or mockups into machine-readable design tokens, component trees, and accessibility analysis to bridge the gap between design and development.

Can I generate a WCAG compliance report from a UI screenshot?▼

Yes, you can generate WCAG compliance insights from a UI screenshot by running it through the visual extraction process, which identifies potential contrast issues and includes the accessibility analysis in the final JSON specification output.

Does design token extraction work with screenshots or only design tool exports?▼

Design token extraction works with both raw screenshots and design tool exports, applying cross-validation to ensure the generated JSON specifications are comprehensive and production-ready regardless of the input source format.

How do I automate developer handoff artifacts from UI mockups?▼

You automate developer handoff artifacts by processing UI mockups through a serial extraction architecture that outputs a comprehensive design-spec.json file containing structured component properties, relationships, and design tokens ready for integration.

Do I need any external dependencies to generate JSON UI specifications from images?▼

No external dependencies are required to generate JSON UI specifications from images, as the extraction process operates independently using its internal cross-validation architecture to output production-ready design system artifacts.