design-spec-extractionlisted

# 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: ```bash mkdir -p .design-specs/{project-name} ``` ### Required File Outputs | Pass | Output File | Description | |------|-------------|-------------| | 1 | `.design-specs/