Agent skill · design visual · aiskillstore
design-spec-extraction
Extract comprehensive JSON design specifications from visual sources including Figma exports, UI mockups, screenshots, or live website captures. Produces W3C DTCG-compliant output with component trees, suitable for code generation, design documentation, and developer handoff.
Why this skill is useful
Adds a comprehensive 7-pass extraction workflow that generates W3C DTCG-compliant JSON specifications, enabling design-to-code automation.
What it needs
Requires jq installed locally. About 9k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Design Specification Extraction Extract comprehensive, production-ready JSON design specifications from visual inputs using a 7-pass serial subtask architecture that ensures complete coverage and cross-validation. When to Use This Skill Extracting design tokens from Figma exports or screenshots Converting visual mockups into structured component specifications Creating developer handoff documentation from designs Generating design system documentation from existing UIs Preparing design data for code generation tools Analyzing website screenshots for design reverse-engineering Output Format The extraction produces JSON following the W3C Design Tokens Community Group (DTCG) 2025.10 format with extensions: $version: Schema version $source: Metadata (type, dimensions, extraction timestamp) tokens: Design tokens (colors, typography, spacing, sizing, shadows, radii) components: Hierarchical component tree with bounding boxes accessibility: WCAG analysis, contrast issues, semantic structure $extensions: Layout, component catalog, confidence scores CRITICAL: File-Based Architecture EVERY pass MUST write its output to a JSON file on disk. This is non-negotiable. Directory Structure Before starting extraction, create the output directory: Required File Outputs Pass Output File Description ------ ------------- ------------- 1 .design-specs/{project}/pass-1-layout.json Layout and structure 2 .design-specs/{project}/pass-2-colors.json Color tokens 3 .design-specs/{project}/pass-3-typography.json Typography tokens 4 .design-specs/{project}/pass-4-components.json Component tree 5 .design-specs/{project}/pass-5-spacing.json Spacing and dimensions 6 .design-specs/{project}/pass-6-states.json States and accessibility 7 .design-specs/{project}/design-spec.json Final consolidated output Why File-Based? 1. Persistence: Each pass result is saved, enabling resumption if interrupted 2. Debugging: Intermediate files allow inspection of each extraction phase 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-spec-extraction