skills.rest
hamzaPixl
hamzaPixlCOMMUNITY
Explore all skills by this author →
Website𝕏@pixlHamzaGitHub

design-extraction

Extract design tokens and layout structure from Figma files, URLs, or screenshots into design-spec JSON.

2|Updated Mar 16, 2026
Search Tags:#layout#figma#website#tokens#screenshot#design-extraction#design-spec
One-click install
npx skills add https://github.com/hamzaPixl/pixl-ai --skill design-extraction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-extraction
Source: https://github.com/hamzaPixl/pixl-ai/tree/main/packages/crew/skills/design-extraction
Command: npx skills add https://github.com/hamzaPixl/pixl-ai --skill design-extraction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and developers often need to translate visual designs from Figma files, live websites, or screenshots into a structured design‑spec JSON for implementation or redesign, which is time‑consuming and error‑prone.

Core Features & Use Cases

  • Multi‑source extraction: Handles Figma URLs, website URLs, and image screenshots to generate a unified design specification.
  • Mode selection: Supports implementing a brand‑new site (Mode B), exact replication of an existing design (Mode C), or redesigning an existing project (Redesign mode).
  • Comprehensive token mapping: Converts colors, typography, spacing, shadows, and layout structures into a standardized schema.

Quick Start

Ask the design‑extraction skill to create a design JSON from the Figma URL https://figma.com/file/XYZ.

Frequently Asked Questions about design-extraction

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

FAQPage Schema
How do I extract design tokens from a Figma file into JSON?▼

You can extract design tokens from a Figma file by providing its URL to generate a design-spec JSON. The skill processes colors, typography, spacing, and shadows using the Figma API.

Can I generate a design specification from a website screenshot?▼

Yes, you can generate a design specification from a website screenshot. The tool processes image screenshots alongside Figma files and live URLs to extract layout structure into a standardized design-spec JSON.

Does design extraction work with live website URLs for layout mapping?▼

Yes, design extraction works with live website URLs for layout mapping. It uses a functional agent-browser CLI and optional firecrawl for content scraping to generate the design specification JSON.

What is the best way to replicate an existing website design into a spec?▼

The best way to replicate an existing website design into a spec is using exact replication mode. It processes the source URL or screenshot to output a comprehensive design-spec JSON matching the original layout and tokens.

Do I need an agent-browser CLI to extract layout structure from URLs?▼

Yes, you need a functional agent-browser CLI to extract layout structure from live website URLs. Optional firecrawl is also supported for content scraping to generate the design-spec JSON.

What are the limitations of extracting design specs from screenshots?▼

A limitation of extracting design specs from screenshots is that static images lack interactive state data and precise CSS values. Token mapping from screenshots may require more inference compared to Figma API sources.

Related Skills

Explore More Design & Creative Skills→
pythoninthegrassespythoninthegrasses
1

zig-docs

Fetch Zig language and standard library documentation from Codeberg and ziglang.org.

Official
Advanced
LeonardoTan19LeonardoTan19
2

frontend-page

Assemble frontend pages from design docs using shadcn components and generated API types.

Community
Advanced
nathanvalenathanvale
2

firecrawl

Fetch web content and extract structured data via the Firecrawl API.

Community
Advanced
daodaoleedaodaolee

style-extractor

Extracts web UI style guides and motion analysis from live sites or screenshots.

Community
Advanced