Design Spec Extraction
Design Spec Extraction converts visual inputs—screenshots, mockups, and design exports—into structured JSON specifications following W3C Design Tokens standards. The skill uses a 7-pass serial architecture to extract layout, colors, typography, components, spacing, accessibility data, and state information, writing each phase to disk for validation and resumption.
Design Spec Extraction transforms visual designs into production-ready JSON specifications with design tokens and component data.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-26
Design Spec Extraction transforms visual designs into production-ready JSON specifications with design tokens and component data. Design Spec Extraction converts visual inputs—screenshots, mockups, and design exports—into structured JSON specifications following W3C Design Tokens standards. The skill uses a 7-pass serial architecture to extract layout, colors, typography, components, spacing, accessibility data, and state information, writing each phase to disk for validation and resumption.
Use it when
- Design Spec Extraction pulls layout structure, color palettes, typography rules, component definitions, spacing values.
- Yes.
Install
pedronauck/skills/design-spec-extraction · repository language: JavaScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I extract design specifications from documents?
Design Spec Extraction automates the process by converting visual inputs—screenshots, mockups, and design exports—into structured JSON specifications. The skill uses a 7-pass serial architecture to extract layout, colors, typography, components, spacing, accessibility data, and state information, writing each phase to disk for validation and resumption.
What does Design Spec Extraction pull from design files?
Design Spec Extraction pulls layout structure, color palettes, typography rules, component definitions, spacing values, accessibility metadata, and interactive state information from your design files. Each extracted element is organized into W3C Design Tokens standards format for immediate use in development workflows.
Can Design Spec Extraction parse design specs automatically?
Yes. Design Spec Extraction automates design requirement capture and organization by processing visual design inputs through its 7-pass serial pipeline. Each pass focuses on a specific aspect—layout, colors, typography, components, spacing, accessibility, and states—ensuring comprehensive and structured specification output.
How does Design Spec Extraction convert unstructured design info?
Design Spec Extraction converts unstructured design information into usable specs by analyzing visual inputs and extracting data through sequential passes. The skill writes validation checkpoints to disk after each phase, allowing you to review intermediate results and resume processing if needed.
What input formats does Design Spec Extraction accept?
Design Spec Extraction accepts screenshots, mockups, design exports, and images as visual inputs. These formats are processed through the skill's multi-pass extraction pipeline to produce structured JSON specifications aligned with W3C Design Tokens standards.
Does Design Spec Extraction streamline design specification workflow?
Yes. Design Spec Extraction streamlines your design specification workflow by automating extraction and structuring of design data. The 7-pass architecture with disk-based validation checkpoints enables efficient bulk processing while maintaining quality control and allowing easy resumption of interrupted extractions.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Extract design specifications from documents automatically”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-spec is a guide to creating DESIGN.md, the single source of truth for a project's visual language. It covers the YAML token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order—all required before writing any UI code. Use it when defining design tokens or establishing a design source-of-truth for web or mobile projects.
design-md helps you create and maintain formal design token specifications using Google's open DESIGN.md format. Write machine-readable tokens in YAML paired with human-readable guidance, then lint for WCAG contrast compliance, diff versions for regressions, and export to Tailwind or W3C DTCG JSON formats.
design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
Master iOS app design by leveraging Apple's Human Interface Guidelines within your development workflow. This skill equips you with native component libraries, design patterns, and best practices to create interfaces that feel native to the Apple ecosystem. Streamline your design-to-code process with structured guidance on layout, typography, color, and interaction patterns.
Design System converts visual references into two synchronized outputs: a YAML token spec in Google's design.md format for coding agents, and a self-contained HTML style guide for human review. Reads imagery, derives tokens for color, typography, spacing, and components, then generates both files as a single source of truth that never drifts.
More skills design-context-extract (MIT) · design-md-validator (MIT)