DESIGN.md Generator

DESIGN.md is an open spec from Google Labs that captures a brand's visual identity in a single, machine-readable Markdown file. It combines YAML design tokens with human-readable rationale, so AI coding agents produce on-brand UI consistently across sessions.

Paste a URL. We fetch the page, extract a structured signal (CSS variables, Tailwind classes, Google Fonts, hero selectors, logo candidates), then run it through an AI model that produces a brand-distinctive DESIGN.md.

Yes. No signup, no credits. Built and hosted by Masumi as a free tool for the design system community.

Claude Code, Cursor, GitHub Copilot, Aider, Continue — any agent that reads Markdown files in your repository. Drop the DESIGN.md at the root of your project and the agent picks it up as persistent style context.

Yes. The editor lets you tweak colors, fonts, and tokens visually with live preview. Download the .md when you're satisfied, or copy the markdown to your clipboard.

Yes — sections appear in canonical spec order (Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts), token references use {colors.primary} syntax, and dimensions use spec-allowed units. Extensions like layout, elevation, and logo fields are accepted under the spec's 'unknown content' rule.

Masumi is the payment network for AI agents. We care about the tools that make agents better collaborators — and DESIGN.md is one of them. Learn more about Masumi →