Extract colors, fonts, spacing, and other design choices from a website URL. Generate eight files for review and reuse, including framework themes, CSS variables, Figma variables, and an accessibility score against WCAG guidelines.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
cat design-extract-output/*-design-language.md
Present key findings to the user:
Offer next steps:
*-tailwind.config.js into their project*-variables.css into their stylesheet*-shadcn-theme.css into globals.css for shadcn/ui users*-theme.js for React/CSS-in-JS projects*-figma-variables.json into Figma for designer handoff*-preview.html in a browser for a visual overview| File | Purpose |
|---|---|
*-design-language.md | AI-optimized markdown — the full design system for LLMs |
*-preview.html | Visual HTML report with swatches, type scale, shadows, a11y |
*-design-tokens.json | W3C Design Tokens format |
*-tailwind.config.js | Ready-to-use Tailwind CSS theme |
*-variables.css | CSS custom properties |
*-figma-variables.json | Figma Variables import format |
*-theme.js | React/CSS-in-JS theme object |
*-shadcn-theme.css | shadcn/ui theme CSS variables |
npx designlang diff <urlA> <urlB>npx designlang history <url>| Flag | Description |
|---|---|
--out <dir> | Output directory (default: ./design-extract-output) |
--dark | Also extract dark mode color scheme |
--depth <n> | Crawl N internal pages for site-wide extraction |
--screenshots | Capture component screenshots (buttons, cards, nav) |
--wait <ms> | Wait time after page load for SPAs |
--framework <type> | Generate only specific theme (react or shadcn) |
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Style UI for clerk.com using extracted design tokens, named values for colors, corner radius, and body font. Reuse the supplied values and identify missing specifications instead of inventing new ones.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Style UI for render.com with extracted design tokens, named values for visual settings. Use the supplied purple action color, white background, black text, PPNeueMontreal font, and corner radius, while flagging settings missing from the definitions.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Style interfaces using values extracted from raycast.com, including colors, corner radius, and the body font. Reuse named design tokens, which are shared visual settings, and flag missing values when choosing an existing substitute.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Style UI using colors, fonts, and corner settings extracted from duolingo.com. The skill guides agents to reuse named design values, keep styling consistent with those definitions, and flag missing values.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Style UI for framer.com using extracted design tokens, named values for colors, corner radius, and fonts. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling need.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Style UI for postman.com using extracted design tokens, named values for colors, corner radius, and fonts. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling need.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.