Star on GitHub

Give your AI projects a design system they can follow

Analyze any website. Generate a DESIGN.md file. Let AI agents build with pixel-level consistency.

bun install -g designermd copy

Why DESIGN.md matters for AI projects

AI coding agents are fast — but without a design spec, they guess. DESIGN.md is the single source of truth that bridges design intent and AI execution.

It captures every decision a designer made: colors, typography, component styles, spacing, elevation, motion, accessibility rules, and design boundaries. AI agents read it. Your app stays consistent.

DESIGN.md is not documentation for humans. It's structured design intelligence that AI agents consume to make correct UI decisions — every time.

What designermd gives you

01

Reverse-engineer any design

Point it at any URL. It fetches CSS, HTML, fonts, and extracts the complete design system automatically.

02

11 sections of structured intelligence

Colors, typography, components, layout, elevation, motion, accessibility, responsive rules, do's & don'ts, and agent-ready prompts.

03

AI agents stay on design

Feed DESIGN.md to any AI coding agent. They'll use the right colors, spacing, components, and patterns — no drift.

04

Framework aware

Detects Tailwind, Bootstrap, Material UI, Chakra, and more. Understands CSS variables, design tokens, and semantic roles.

What's inside DESIGN.md

01Visual theme & atmosphere
02Color palette & roles
03Typography rules
04Component styles
05Layout principles
06Depth & elevation
07Motion & animation
08Do's & don'ts
09Responsive behavior
10Accessibility
11Agent prompt guide

How it works

$ designermd
Enter website URL: https://linear.app
→ Fetching website...
✓ Found 16 stylesheets
→ Analyzing design system...
✓ DESIGN.md generated (9.3 KB)
$

Install

bun install -g designermd copy

Then run designermd in your terminal and enter any URL.

Copied to clipboard