Agent skill · design visual · aradotso
designlang-design-extract
Extract complete design systems from any website — colors, typography, spacing, shadows, and more — using the designlang CLI.
Why this skill is useful
Adds executable commands for extracting and applying design systems from any website, generating multiple output formats that enhance design workflows.
What it needs
Requires designlang installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
DESIGNLANG — Design System Extraction Skill by ara.so — Daily 2026 Skills collection. designlang crawls any website with a headless browser (Playwright), extracts every computed style from the live DOM, and generates 8 output files: AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties. Installation Core Commands Basic Extraction Specialized Extraction Authentication Utility Commands Output Files Running npx designlang https://stripe.com produces: File Purpose ------ --------- stripe-com-design-language.md AI-optimized markdown with all 19 design sections stripe-com-preview.html Visual report with swatches, type scale, a11y score stripe-com-design-tokens.json W3C Design Tokens format stripe-com-tailwind.config.js Drop-in Tailwind CSS theme stripe-com-variables.css CSS custom properties stripe-com-figma-variables.json Figma Variables import (light + dark) stripe-com-theme.js React/CSS-in-JS theme (Chakra, Stitches, etc.) stripe-com-shadcn-theme.css shadcn/ui globals.css variables Full CLI Reference Common Patterns Pattern 1: Extract and apply to a Tailwind project Generated tailwind.config.js looks like: Pattern 2: Feed the markdown to an LLM Pattern 3: Compare competitors Pattern 4: Apply to a shadcn/ui project Generated shadcn-theme.css: Pattern 5: W3C Design Tokens for tooling Generated design-tokens.json: Pattern 6: React theme object Generated theme.js: Pattern 7: Monitor a design system for changes Pattern 8: Clone a site's design as a Next.js starter What Gets Extracted The markdown output covers 19 sections: 1. Color Palette — all unique colors with usage context 2. Typography — font families, weights, sizes, line heights, letter spacing 3. Spacing — padding/margin/gap values used across the site 4. Border Radii — all radius values with component context 5. Box Shadows — elevation system 6. CSS Custom Properties — all --var declarations 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/designlang-design-extract