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