Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsWeb Design Extractor
Turn any website into a structured design system reference with CSS tokens and automated screenshots.
$8
web-design-extractor
Example session with this skill installed
Extract the design language from stripe.com so I can use their aesthetic for my new dashboard project.
- Read your context and instructions
- Compiled the web-design-extractor
- Generated the UI component
Design system extracted!
Saved files
- stripe-DESIGN.md (Colours, Typography, Spacing, Components)
- stripe-screenshot.png
Primary palette: #635bff (Brand), #0a2540 (Dark), #707070 (Neutral).
Typography: 'Sohne' with fallbacks discovered.
Tokens are ready for use in your project.
web-design-extractor.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
Reverse-Engineer Any Website's UI
The Web Design Extractor is a specialized developer tool that deconstructs the visual identity of any webpage into a structured, reusable design system. It solves the "blank page" problem for front-end developers by capturing the exact design tokens—colors, typography, spacing, and component styles—used by well-designed sites.
How it Works
Using a sophisticated multi-stage JavaScript injection process, the skill meticulously queries the browser's computed styles and CSS variables. It handles the technical limitations of modern browser automation by splitting extraction into discrete chunks, ensuring high-fidelity data capture even on complex, single-page applications (SPAs) or sites using modern frameworks like Tailwind v4 and shadcn/ui.
- Full Token Extraction: Captures CSS variables, hex codes, font families, line heights, and border-radii.
- Component Mapping: Automatically identifies button and card styles to create semantic component tokens.
- Visual Reference: Generates a high-resolution, full-page screenshot paired with the extracted data.
- Ready-to-Use Output: Produces a
DESIGN.mdfile (Google's design specification format) with YAML frontmatter, perfect for seeding new projects or documentation.
Why Developers Need This
Instead of manually inspecting elements one by one, this skill automates the entire design audit process. It doesn't just "guess" colors; it extracts the actual values from the DOM, deduplicates them by usage frequency, and maps them to a standardized design system architecture.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 3 months ago
- Passed all security checks, Safe to install