Skip to content
UXClaim
Design Systems

Make Design.md

Extract design systems from websites, HTML, or screenshots and generate Google design.md specification documents automatically.

View source More in Design Systems

What it does

Make Design.md analyzes websites, HTML files, or screenshots to automatically extract design specifications and generate structured DESIGN.md documents following Google’s design.md standard. It serves as a design system documentation tool that bridges visual inspection with machine-readable specifications.

How it works

The tool supports three input methods:

  • URL analysis — Crawls websites and extracts design tokens from CSS and DOM
  • HTML file analysis — Parses local HTML files to identify colors, typography, spacing, and components
  • Screenshot analysis — Uses vision to infer design elements like color palettes, fonts, and spacing from visual screenshots

Output includes YAML front matter with structured design tokens (colors, typography, spacing, rounded corners, components) plus human-readable Markdown sections covering design principles, color systems, type scales, layout grids, elevation models, shape systems, components, and design guidelines.

Use cases

  • Design system audits — Quickly document existing design patterns across products
  • Competitor analysis — Extract and compare design specifications from competitor websites
  • Design handoff — Create machine-readable design tokens for development teams
  • Tailwind/DTCG export — Generate developer-friendly configuration files for CSS frameworks
  • Design documentation — Build comprehensive design system documentation with both visual and technical specs

Who benefits

Design systems managers, product designers documenting existing systems, design ops teams automating specification capture, and teams standardizing design tokens across products.

Frequently asked questions

How do I analyze a website with make-design-md?
Simply provide the website URL in Claude Code. The tool will crawl the site, extract design tokens from CSS and DOM elements, and generate a complete DESIGN.md document with all color schemes, typography, spacing, and component specifications.
What output formats does make-design-md support?
The tool generates DESIGN.md files with YAML front matter plus Markdown documentation. You can then export to Tailwind CSS configuration or DTCG (Design Token Community Group) format using Google's official CLI tools.
Can I use make-design-md with local HTML files?
Yes. Provide the path to your local HTML file (e.g., ./dist/index.html) and the tool will parse CSS styles, layout structure, and visual elements to extract design specifications.
How does screenshot analysis work?
Upload a screenshot and the tool uses vision analysis to infer design elements including color palettes, font families, spacing patterns, and component boundaries. This works well for reverse-engineering existing designs.
What is the Google design.md specification?
design.md is Google's open standard for documenting design systems in a machine-readable YAML format combined with human-readable Markdown. It enables automated validation, export to frameworks like Tailwind, and standardized design token sharing.
How do I validate the generated DESIGN.md file?
Use Google's official CLI: `npx @google/design.md lint DESIGN.md`. This validates the document structure, token format, and compliance with the design.md specification.
Can make-design-md export to Tailwind configuration?
Yes. After generating DESIGN.md, run `npx @google/design.md export --format tailwind DESIGN.md` to convert design tokens into a Tailwind config file for development teams.
What design elements does make-design-md extract?
The tool extracts colors, typography systems, spacing scales, border radius values, shadows/elevation, component patterns, and layout grids. It organizes these into standardized categories within the DESIGN.md structure.

Glossary

design.md
Google's open specification for documenting design systems in a portable YAML+Markdown format, enabling automated validation and export to frameworks like Tailwind CSS.
Design tokens
Machine-readable design attributes (colors, fonts, spacing, sizes) stored as structured data that can be shared across design tools, documentation, and development frameworks.
DTCG
Design Token Community Group standard format for representing and exchanging design tokens across tools and platforms in a vendor-neutral way.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.