Item: designlang-design-extract
Rating: 5.2
Author: Implexa

designlang-design-extract

Extract complete design systems from any website — colors, typography, spacing, shadows, and more — using the designlang CLI.

installs

stars

karma

SkillRank score ↗

5.2/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-06-21

designlang-design-extract crawls websites with a headless browser to extract design tokens, colors, typography, and spacing, outputting results as markdown, html, tailwind config, react theme, figma variables, and css custom properties.

structure

4.0

trigger phrases

6.0

procedure

4.0

edge cases

2.0

documentation

6.0

strengths

SKILL.md

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

# No install needed — run directly
npx designlang https://stripe.com

# Install globally
npm install -g designlang

# Install as an agent skill
npx skills add Manavarya09/design-extract

don't have the plugin yet? install it then click "run inline in claude" again.

designlang-design-extract

SKILL.md

related skills