Design.md Generator

What is design.md?

Your project's visual identity — colors, fonts, spacing, component styles — usually lives in a Figma file, a brand PDF, or a designer's head. An AI coding agent can't read any of those. A design.md is a plain-text file that describes how your UI should look, so both humans and agents work from the same rules. Same idea as a README, but for design.

Why it matters for AI-assisted development

Without a design.md, every screen an AI agent builds looks slightly different — wrong blue, wrong font weight, buttons that don't match anything else. With one, the agent uses your actual palette, your type scale, your component patterns. Screens start looking like they belong to the same product. You update the file as your design changes.

How it works

The generator screenshots the site and extracts its styleguide (colors, fonts, spacing, shadows, component styles) at the same time. Then it sends both to an AI model that looks at the visual design and writes a structured design.md — the palette, type scale, component descriptions, and a short summary of the overall aesthetic.

When to use it

• You're starting a project and want to clone another site's visual language as a starting point
• You use Cursor, Claude Code, or Copilot and want them to stop guessing your design
• A client sent you a URL instead of a brand guide and you need to hand something to your dev team
• You want to see how a competitor's design system is actually structured