designlang
github.com/manavarya09/design-extract- Category
- Developer Tools
- Rank
- No. 1291Tools index
Previous survey · No. 1299 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- manavarya09
- GitHub
- 4.1k stars
- Latest release
- v13.2.0
- Date
About
Extract complete design systems from any live website with a single command. Generates DTCG tokens, Tailwind configs, Figma variables, multi-platform code, and design quality reports by analyzing the DOM, responsive behavior, and accessibility.
What it can do
Extract design system from live website
Website URL → Complete design system files including DTCG tokens, Tailwind config, and Figma variables
Generate DTCG design tokens
Live website DOM → DTCG token files
Create Tailwind CSS configuration
Website design system data → Tailwind config file
Generate Figma design variables
Extracted design system → Figma variables file
Analyze responsive design behavior
Website DOM across different screen sizes → Responsive behavior analysis report
Assess WCAG accessibility compliance
Website DOM and styling → Accessibility compliance report
Generate multi-platform code components
Design system patterns → Multi-platform code files
Create design quality report
Website design system analysis → Design quality assessment report
Why it made the leaderboard
This is genuinely novel - reverse-engineering design systems from live websites by DOM analysis is a clever approach that fills a real gap in the design-to-code workflow. The comprehensive output (17+ file formats including DTCG tokens, Figma variables, accessibility reports) and MCP integration make it substantially different from typical design tools or web scrapers.
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.