Design MD Generator
Extract real design tokens from a public URL and generate DESIGN.md for AI coding agents
About Design MD Generator
Design MD Generator accepts a public URL, extracts colors, fonts, type-size ratios, spacing, corner radii, shadows, and component states from real CSS, then generates a nine-section DESIGN.md covering themes, palette roles, typography, layout, components, hierarchy, radii, motion, and design guidelines. The file can be placed in a code repository and referenced from CLAUDE.md or .cursor/rules so generated interfaces match the source site's design system; MCP also lets editors search the library, read files, or run the generator.
Best for
Best use cases
Generate a design system file for an existing website
Have an AI coding agent reuse the source site's design
Run the generator through MCP from an editor
Browse ready-made DESIGN.md design systems
Features
Real CSS extraction
Counts colors, font stacks, type-size ratios, spacing, corner radii, shadows, and CSS custom properties from actual styles.
Evidence-driven analysis
Every hex color, font name, and corner radius comes from the site's real CSS; the extractor does not invent tokens.
Nine-section DESIGN.md
An AI design analyst generates themes, palette roles, typography, layout, components, hierarchy, radii, motion, and guidelines.
MCP editor connection
Search the library, read DESIGN.md, or run the generator in an editor through MCP.
Pros
- Tokens come from real CSS, avoiding guesswork
- Output can be placed in a code repository and referenced by agents
- Free generation within the daily limit
- Supports MCP for convenient editor operation
Cons
- Daily generation limit per visitor
Pricing Plans
Free
- Generate DESIGN.md
- Daily limit per visitor
- No credit card required
* Pricing information is for reference only. Please refer to the latest announcement on Design MD Generator's official website.