extract-design

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: Or use npx (no install required): For multi-page crawling: npx designlang --depth 3 --screenshots For dark mode: npx designlang --dark --screenshots Present key findings to the user: Offer next steps: - Run the extraction on the provided URL: - Read the generated markdown file to understand the design: - 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.js into their project - Import *-variables.css into their stylesheet - Paste *-shadcn-theme.css into globals.css for shadcn/ui users - Import *-theme.js for React/CSS-in-JS projects - Import *-figma-variables.json into Figma for designer handoff - Open *-preview.html in a browser for a visual overview - Use the markdown file as context for AI-assisted development - Compare two sites: npx designlang diff - View history: npx designlang history