skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

extract-design

Extract design tokens, colors, and typography from website URLs into Tailwind, CSS, and Figma formats.

Updated Oct 16, 2025
Search Tags:#design system#figma#design tokens#wcag#tailwind#css variables#extract
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill extract-design-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-design
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/extract-design
Command: npx skills add https://github.com/hugotown/dotfiles --skill extract-design-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires designlang.

What problem does it solve? Manually reverse-engineering a website's design system—colors, fonts, spacing, shadows—is slow and error-prone. This Skill automates the extraction of a complete design language from any URL and converts it into ready-to-use developer and designer formats. ## Core Features & Use Cases - Full design extraction: Runs the designlang CLI against a URL to capture colors, typography, spacing, shadows, components, breakpoints, and animations, with optional multi-page crawling and dark mode support. - Eight output formats: Produces AI-optimized markdown, an HTML visual preview, W3C design tokens, a Tailwind config, CSS variables, Figma variables, a React theme object, and a shadcn/ui theme. - Accessibility scoring: Reports WCAG accessibility results alongside the extracted palette. - Use Case: A developer rebuilding a client's landing page runs the extraction on the original site, copies the generated Tailwind config into their project, and hands the Figma variables file to the design team. ## Quick Start Extract the design language from https://example.com and show me its color palette, fonts, and accessibility score.

Frequently Asked Questions about extract-design

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

FAQPage Schema
How do I extract a design system from a website URL?▼

Run npx designlang followed by the URL, optionally with --screenshots to capture component images. The tool generates a markdown design language file plus Tailwind, CSS, Figma, and React theme outputs in the design-extract-output directory.

What output formats does designlang generate?▼

It produces eight files: AI-optimized markdown, an HTML visual preview, W3C design tokens JSON, a Tailwind config, CSS custom properties, Figma variables JSON, a React theme object, and a shadcn/ui theme CSS file.

Can I extract dark mode colors from a website?▼

Yes, pass the --dark flag to also extract the dark mode color scheme. You can combine it with --screenshots and --depth for multi-page dark mode extraction.

How do I extract design tokens from a multi-page site?▼

Use the --depth flag with a number to crawl internal pages, for example npx designlang <url> --depth 3 --screenshots. This performs a site-wide extraction rather than analyzing only the landing page.

Does design extraction work with single-page applications?▼

Yes, use the --wait flag to specify milliseconds to wait after page load, giving SPAs time to render before extraction begins. This ensures dynamically loaded styles are captured.

How do I compare the design of two websites?▼

Run npx designlang diff followed by the two URLs to compare their design languages. You can also use npx designlang history <url> to view extraction history for a single site.

Related Skills

Explore More Design & Creative Skills→
firecrawlfirecrawl
121

firecrawl-website-design-clone

Extract design tokens and layout patterns from a website URL into a DESIGN.md file.

Official
Advanced
reason-machinesreason-machines
4

better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

Official
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
jeffvincentjeffvincent
5

Browser Automation

Automate Chrome browser sessions for web scraping and data extraction.

Community
Advanced