Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →

manavarya09/design-extract

1 skill · 2.5k installs · 3.1k stars · GitHub

Install

npx skills add https://github.com/manavarya09/design-extract

Skills in this repo

1Extract DesignExtract Design Language pulls colors, typography, spacing, shadows, components, breakpoints, and animations from any website URL using the designlang CLI. A single npx designlang run with optional screenshots produces eight outputs: AI-optimized markdown, visual HTML preview, W3C design tokens JSON, Tailwind config, CSS variables, Figma variables import, React theme object, and shadcn theme CSS. The workflow installs or invokes designlang, reads the generated markdown, and presents palette, font, spacing, WCAG score, and component patterns to the user with suggested next steps for Tailwind, shadcn, Figma, and preview HTML. Flags support multi-page depth crawling, dark mode extraction, SPA wait times, and framework-specific theme generation. Additional commands compare two sites with designlang diff and show extraction history. Use it when a team needs design tokens from a live site, Tailwind or shadcn theming from a reference brand, or Figma handoff variables without manual inspection.2.5kinstalls

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.

manavarya09/design-extract · 1 skills · Skillselion