Purpose
DESIGNMD.fun positions itself as a "decision-grade AI system," aimed at enterprise leaders working in complex, high-stakes environments, as well as developers and AI design engineers. Its core function is to turn a public website URL into AI-readable design documentation (design.md and accompanying token files), thereby providing real design context for AI coding tools such as Claude Code, Cursor, and Windsurf, and reducing the problem of AI arbitrarily inventing colors, font sizes, or spacing when generating UI.
Main capabilities
According to the official page, entering a public website domain triggers the analysis, and about 10 AI-ready files can be generated at once. The output includes: color tokens (divided by role, such as primary #165DFC, background #0A0A0C, etc.), typography (the page mentions the Satoshi font and Display Extrabold, and font scale), CSS variables, spacing rhythm, shadows, basic components such as buttons and cards, motion rules, and prompts or rule configurations prepared for AI agents. The complete export package contains 8 cross-referenced files: design.md, tokens.json, tailwind.config.ts (Tailwind v4), variables.css, colors.json, typography.json, components.md, and prompt.md; elsewhere on the page, animations.md, figma-tokens.json, and others are also listed. Tailwind v4 support generates native @theme configuration, including variables such as --color-primary, --font-sans, and --radius-lg. It also supports exporting standard CSS Custom Properties and W3C-compliant Design Tokens JSON, compatible with Figma Tokens and Style Dictionary.
The extraction process has four steps: paste the URL (render the page as a visitor sees it), AI analysis (colors into roles, font sizes into scales, spacing into rhythm), generate files (write multiple formats at once while keeping them consistent), download ZIP (put it into a repository or paste it to an AI agent).
How to use
In the generator input boxPaste any public website address, and the tool reads the rendered DOM through a headless extraction engine, computes exact styles, and synthesizes token scales. You can then download a ZIP or directly copy configurations for specific tools: Claude Code (Claude CLI prompts), Cursor (.cursorrules configuration), Windsurf (cascade rules), Lovable (system prompts), v0 by Vercel (React prompts). The page also provides guides for use with DESIGN.md for Aider, Claude Code, Cline, Codex, Continue.dev, Cursor, Devin, GitHub Copilot, Google Stitch, Kiro, v0 and Lovable, Windsurf, and others.
Use cases
Suitable for development teams that need to quickly obtain the design systems of competitors or reference products, product teams that need to inject unified design rules into AI coding agents, and SaaS or client projects that want to reuse existing interface design tokens (the page states that the generated tokens, Tailwind configuration, and CSS variables can be used royalty-free in commercial projects). It also provides a public design library (brand design systems documented in the same DESIGN.md format), a component library, design inspiration, and category browsing.
Limitations and pricing
The page states that you can start for free without registering, and the free tier includes 5 extractions per month plus design.md and token JSON downloads; there are also higher-quota and team plans, and the specific prices are subject to what is actually displayed on the page. Extracted data is said to be processed statelessly in temporary browser instances, and private analyses are not indexed or sold. Regarding dark/light mode, the tool uses the OKLCH perceptually uniform space to calculate brightness and classify surfaces, text, and brand accent colors. The page does not clearly state limitations such as the types of websites for which analysis fails or the scope of language support.
