design-md-chrome
Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI
design-md-chrome is a Chrome extension that extracts design system information from any website and generates TypeUI-formatted DESIGN.md or SKILL.md files for AI agents. It automatically captures typography, colors, spacing, border radius, shadows, and motion properties from live websites, then outputs structured markdown documentation that AI coding assistants can reference when building interfaces. Developers use it to quickly create design system blueprints that guide AI tools like Claude Code, Google Stitch, and Codex to maintain visual consistency across projects.
Key Features
Use Cases
- 01Reverse-engineering design systems from existing websites to replicate their visual style in new projects
- 02Creating AI-readable design documentation for Claude Code or Codex to enforce brand consistency during code generation
- 03Extracting design tokens from competitor sites for design research and analysis
- 04Building reusable design skills that guide multiple AI agents across different projects
- 05Documenting existing websites' design patterns for handoff to AI-assisted development workflows
- 06Generating standardized design system blueprints from production sites without manual token measurement
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
design-md-chrome — FAQ
What is design-md-chrome and what does it do?+
design-md-chrome is a Chrome extension that extracts design system information (colors, typography, spacing, shadows, etc.) from any website and converts it into TypeUI-formatted DESIGN.md or SKILL.md files. These files provide AI coding assistants with structured design system documentation to maintain visual consistency when generating code.
How do I install the design-md-chrome extension?+
Open chrome://extensions in Chrome, enable Developer mode, click Load unpacked, and select the design-md-chrome project folder. The extension will then be available in your browser toolbar.
Which AI clients work with design-md-chrome generated files?+
The generated DESIGN.md and SKILL.md files work with Claude Code, Google Stitch, Codex, and other AI coding assistants that accept design system documentation. The TypeUI format is designed for broad AI agent compatibility.
Do I need an API key to use design-md-chrome?+
No API key is required. The extension runs entirely in your browser and extracts design information directly from the active tab without any external service calls.
Is design-md-chrome free to use?+
Yes, design-md-chrome is open-source software released under the MIT License and is free to use, modify, and distribute.
What's the difference between DESIGN.md and SKILL.md output?+
DESIGN.md produces general design-system documentation for human and AI reference, while SKILL.md generates agent-ready skill files specifically optimized for AI consumption with implementation rules, quality gates, and structured guideline workflows.
How do I install design-md-chrome?+
Open the source repository on GitHub and follow its README. design-md-chrome is a skill — MCP Agents Market links you directly to the official repo.
Is design-md-chrome free?+
design-md-chrome is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.