CLI Extracts Design System from Any Website
This new CLI tool allows you to extract a design system from any website, simplifying the work for developers and designers.
CLI Extracts Design System from Any Website
This CLI tool allows you to simply pass a URL, and it will automatically extract:
- colors
- typography
- spacing
- borders
- shadows
- components
- breakpoints
- motion tokens
Additionally, the tool generates a DESIGN.md file, making it very convenient to use.
Frontend developers, vibe coders, and designers can now close DevTools and open the terminal, streamlining their workflow.
Why it matters
AnalysisThis tool significantly simplifies the design process by allowing quick access to necessary data from any website. It can save time and effort for developers and designers.
Discuss in community
Share your questions and insights with developers
Related in Ecosystem
Practical guides, core terminology, and agent skills
WebMCP & Browser-Native Tools
The adaptation of the Model Context Protocol (MCP) for direct operation within web browsers, enabling AI agents to interact with the DOM, LocalStorage, WebAssembly, and IndexedDB without local daemons.
Building a Design System in Figma with Claude Code
Step-by-step guide to building a complete Figma design system using Claude Code: tokens, components, variables, and responsive screens.
DESIGN.md Extractor: Reverse-Engineer Any Website Design with Claude
A comprehensive guide to using the DESIGN.md Extractor skill for Claude Code: extracting visual tokens, generating DESIGN.md files, building interactive HTML previews, and exporting to Tailwind CSS.
MCP (Model Context Protocol)
An open standard from Anthropic based on JSON-RPC 2.0 for unified bidirectional connection of AI assistants to external tools, databases, and system environments.