Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/manavarya09/design-extract --skill extract-designAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
Extract 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.
Prerequisites
Ensure designlang is available. Install if needed:
bash
npm install -g designlangOr use npx (no install required):
bash
npx designlang <url>Process
- Run the extraction on the provided URL:
bash
npx designlang <url> --screenshotsFor multi-page crawling: npx designlang <url> --depth 3 --screenshots For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
bash
cat design-extract-output/*-design-language.md- Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
- Offer next steps:
- Copy
*-tailwind.config.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin a browser for a visual overview - Use the markdown file as context for AI-assisted development
Output Files (8)
| 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 |
Additional Commands
- Compare two sites:
npx designlang diff <urlA> <urlB> - View history:
npx designlang history <url>
Options
| 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) |
