design-extraction

Name: design-extraction
Availability: InStock
Author: pixl

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

Ready to run

npx skills add https://github.com/hamzaPixl/pixl-ai --skill design-extraction

💬 Prompt for ChatGPT / Claude Chat▼

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.