design-extract
One-click extraction of complete design systems from websites, supporting multiple platforms and tools.
- Type
- MCP
- Transport
- stdio
- Open source
- Yes
- GitHub Stars
- ★ 3.3k
- Source
- mcp-github
- Repository
- github.com/Manavarya09/design-extract
Overview
design-extract is an MCP server that extracts a complete UI design system from any website with a single command. It generates DTCG tokens, semantic + primitive + composite components, and supports multi-platform output (such as iOS SwiftUI, Android Compose, Flutter, and WordPress). Additionally, it provides Tailwind v4 configuration, Figma variables, shadcn/ui, CSS health audits, and WCAG remediation. This tool is ideal for developers and designers who need to quickly obtain a website's design system.
Capabilities
- ▪Extract complete design systems from websites
- ▪Generate DTCG tokens
- ▪Support multi-platform output
- ▪Provide Tailwind v4 configuration
- ▪Generate Figma variables
- ▪Perform CSS health audits
Use cases
Setup
npx designlang <URL>
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
How do I install and use design-extract?
Install and run using the command: npx designlang <URL>
Which platforms does design-extract support?
Supports iOS SwiftUI, Android Compose, Flutter, WordPress, and more.
Related skills
material-3-skill
Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.
xhs-visual-director-skill
Visual director for Xiaohongshu image and text planning, offering multi-page structure and visual solutions.
drawio-skill
Generate draw.io diagrams from natural language, supporting multiple presets and export formats.
ui-ux-pro-max-skill-cn
Professional-grade UI/UX design intelligence for AI coding assistants.
claude-skill-aso-appstore-screenshots
Generate high-quality App Store screenshots to boost app download rates.
palmier-pro
A macOS video editor built for AI, supporting video generation and editing.