designlang — Extract complete design languages from any…

Pitch

Description

Comments

About this project

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.