designlang allows users to reverse-engineer any website's complete design system with a single command. By utilizing a headless browser, it extracts styles, layout patterns, and responsive behaviors, generating multiple output files, including Tailwind configurations and Figma variables, while ensuring WCAG accessibility compliance.
design-extract provides a powerful solution for reverse-engineering the complete design language of any website in a single command. Utilizing a headless browser, it extracts a wide array of style properties, including colors, typography, spacing, shadows, and much more. This tool generates eight distinct output files that offer comprehensive insights into the site's design structure, facilitating seamless design adaptation and application.
Features
- Comprehensive Extraction: Extracts every computed style from the live DOM, including layout structures, responsive behaviors, and interaction states, ensuring a thorough representation of the design.
- Multi-format Output: Generates an AI-optimized markdown file, visual HTML preview, Tailwind CSS configuration, React themes, Figma variables, W3C design tokens, and CSS custom properties.
Quick Usage
Extract the design language of a site with a simple command:
npx designlang https://stripe.com
For a complete rundown with all additional features:
npx designlang https://stripe.com --full
What You Receive
The following files are generated:
| File | Description |
|---|---|
*-design-language.md | AI-optimized markdown for LLM usage |
*-preview.html | Visual report including swatches and typography |
*-design-tokens.json | W3C Design Tokens format |
*-tailwind.config.js | Tailwind CSS theme configuration |
*-variables.css | CSS custom properties |
*-figma-variables.json | Supports Figma import with dark mode |
*-theme.js | Compatible themes for React and CSS-in-JS |
*-shadcn-theme.css | shadcn/ui global variable CSS |
Enhanced Features
- Layout System Extraction: Captures the underlying structural layout, identifying grid patterns, flex usage, and spacing configurations, thereby revealing the architecture of the site.
- Responsive Multi-Breakpoint Capture: Observes the design’s adaptation across various screen sizes, offering insights into how elements adjust at different resolutions.
- Interaction State Capture: Records stylistic transitions for interactive elements, providing a clear view of dynamic user interactions.
Additional Capabilities
- Sync Feature: Keep local tokens updated by syncing with live site changes.
- Multi-Brand Comparison: Analyze and compare design attributes across multiple brands effortlessly.
- Design System Scoring: Evaluate the quality of a site's design, identifying strengths and weaknesses in a user-friendly format.
Example Output
Running the command for a website will produce detailed insights:
designlang https://vercel.com --full
Expected Summary:
- Colors, fonts, spacing adjustments, shadows, breakpoints, typography specifics, and interaction states—detailed outcomes are provided in a clear, actionable report.
Learning and Collaboration
Designed with community in mind, contributions are encouraged through the GitHub repository. Engage with documentation and enhancement opportunities to further refine the functionality of design-extract.
No comments yet.
Sign in to be the first to comment.