What is design-extraction?

A tool that turns a Figma design, website, or screenshot into a structured design specification containing visual styles and layout information.

Use it to extract design details for a new website or apply an existing design to a project, producing a design-spec.json file.

It gives developers a documented reference for rebuilding or redesigning a site without relying only on visual guesswork.

design-extraction — Skill for Claude Code by hamzaPixl

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add hamzaPixl/pixl-ai --skill design-extraction

Clone the repo

git clone --depth 1 https://github.com/hamzaPixl/pixl-ai

Made for: Claude Code.

Or install pixl-crew, the plugin that ships this one along with the rest of its 93 skills, 14 agents, 6 hooks.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-extraction/github.svg)](https://agentmods.dev/skills/hamzapixl/pixl-ai/design-extraction)

Your own site

<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/design-extraction"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-extraction/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/hamzapixl/pixl-ai/design-extraction"><img src="https://agentmods.dev/badge/skills/hamzapixl/pixl-ai/design-extraction.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 42 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,919 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00042	$0.01919
Opus 5	$0.00021	$0.00959
Sonnet 5	$0.00008	$0.00384
Haiku 4.5	$0.00004	$0.00192

Measured 10d ago against content hash 1b5232b73bc0, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

design-extraction scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

packages/crew/skills/design-extraction/SKILL.md · 181 lines

How it starts

The opening of the file, as written. The whole thing — 181 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Overview

Extracts design tokens and layout structure from three input types and outputs a design-spec.json:

Figma URL (figma.com/design/... or figma.com/file/...) — reads the design via Figma API
Live website URL (any other URL) — captures and analyzes via agent-browser CLI following references/frontend/url-design-extraction.md
Screenshot / image file — visual analysis of a provided image

Output: Always a design-spec.json conforming to references/frontend/design-spec-schema.md.

Two modes after extraction:

Implement mode — design source only → extract → design-spec.json → build new site via /website Mode B (spec-fed) or Mode C (replicate)
Redesign mode — design source + existing project path → extract → design-spec.json → apply to existing site via /website-theme then /website-layout

Prerequisites

For Figma URLs: Figma API access must be configured
For live website URLs: agent-browser CLI must be available (npm install -g agent-browser)
For Mode C replication: npx firecrawl recommended for content scraping (optional — falls back to DOM extraction)
For redesign mode: target project must already exist

URL Type Detection

Detect the input type and route accordingly:

Figma URL (figma.com/design/... or figma.com/file/...) → Step 1 (Figma extraction)
Live website URL (any other URL) → Step 2 (URL extraction)
Screenshot / image file (local path ending in .png, .jpg, .webp) → Step 3 (Visual extraction)

Step 1: Extract from Figma

1.1 Parse the Figma URL

Extract the file key and node ID from the URL:

File key: the segment after /design/ or /file/
Node ID: from node-id= query parameter (optional — if absent, use the root)

1.2 Read the Figma File

Use the Figma API tools to inspect the design:

Get file metadata — file name, pages, top-level frames
Get the target node (or root frame) — inspect its children to understand the page structure
Extract styles and variables:
- Colors (fills, strokes) → theme.colors
- Typography (font families, sizes, weights, line heights) → typography
- Spacing (padding, gaps, auto-layout settings) → layout
- Border radius → theme.border_radius
- Effects (shadows, blurs) → theme.shadows
Extract layout structure:
- Top-level sections in order → pages[].sections
- Component patterns — cards, grids, splits
- Navigation and footer patterns → components.navbar, variants.footer
- Hero variant → variants.hero

Read the full file on GitHub · 181 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 181 lines · 42 tokens per session scan A 1b5232b73bc0

Subscribe to this mod's changes

design-extraction is a skill published in the GitHub repository hamzaPixl/pixl-ai (2 stars, last pushed 4mo ago), licensed MIT. It adds 42 tokens to every session and 1,919 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

design-extraction