DESIGNMD.fun

A design.md file is a machine-readable documentation specification that describes a website's complete design system, including OKLCH/HEX color roles, Satoshi & Geist typography scales, spacing rhythm, button/card primitives, motion rules, and AI prompt instructions for Claude Code, Cursor, and Windsurf.

Yes. Simply paste any public website address into the generator input. Our headless extraction engine reads the rendered DOM, computes exact styles, and synthesizes token scales automatically.

design.md is supported natively across Claude Code CLI, Cursor IDE (.cursorrules), Windsurf (Cascade), Lovable, v0 by Vercel, Bolt.new, ChatGPT, and GitHub Copilot.

Each export bundle includes 8 cross-referenced files: design.md, tokens.json, tailwind.config.ts (Tailwind v4), variables.css (CSS Custom Properties), colors.json, typography.json, components.md, and prompt.md.

We generate native Tailwind CSS v4 @theme configurations. Your exported tailwind.config.ts contains @theme variables like --color-primary, --font-sans, and --radius-lg, allowing zero-build-step consumption in Tailwind v4 apps.

Yes. The export suite produces standard CSS Custom Properties (:root { --color-primary: #... }) as well as W3C-compliant Design Tokens JSON compatible with Figma Tokens and Style Dictionary.

AI coding models often invent arbitrary colors when given vague prompts. Providing a design.md file forces the AI model to consume explicit token boundaries, ensuring zero color drift and 100% brand consistency.

Extracted URL data is processed statelessly in ephemeral browser instances. Private analyses are never indexed or sold, and Pro/Team subscribers can keep their generation history strictly confidential.

Absolutely. All extracted design tokens, Tailwind configs, and CSS variables are 100% royalty-free and can be integrated into commercial client projects, agency work, and production SaaS web applications.

The extractor calculates color luminance using perceptually uniform OKLCH spaces. It categorizes surfaces, text inks, and interactive brand accents separately so light and dark mode variables map cleanly.