Color and surfaces
Recurring text, background, border, accent, gradient, and CSS variable values observed on the page.
Free website design system extractor
DESIGN.md Generator
Extract observed colors, typography, spacing, borders, shadows, and interface patterns from a public website into an AI-ready design system file.
Design context from a live page
What a DESIGN.md generator can capture
Maintained by Diwan SachiduTechnical review:
A production interface contains useful design evidence even when the original token library or Figma file is unavailable. This DESIGN.md generator renders a public webpage, reads its computed styles, and organizes recurring values into a Markdown reference that is easy for developers, designers, and coding agents to read.
The output is best treated as measured starting material. It can reveal the palette, type scale, spacing rhythm, radii, shadows, motion signals, and common element treatments present on the submitted page. It cannot recover private design intent or document a component that the browser never rendered.
Design system signals in the result
Typography
Rendered font families, sizes, weights, line heights, and common type combinations.
Spacing and geometry
Repeated margin and padding values, border widths, corner radii, and shadow patterns.
Interface patterns
Observed styles for elements such as buttons, links, badges, and inputs, plus breakpoint and motion signals.
How this DESIGN.md generator works
The generator measures the submitted page and up to two useful same-origin pages discovered from it. It records what those pages expose at crawl time rather than trying to reconstruct private design files.
- Validate the URL
- The form accepts public HTTP and HTTPS URLs. It rejects embedded credentials, obvious local or private-network hosts, whitespace, and URLs longer than 2,048 characters.
- Run the browser extraction
- A Trigger.dev task runs Dembrandt with a three-page crawl limit. Dembrandt uses Playwright to render each reachable page and reads computed styles from the DOM.
- Read the generated files
- The worker reads the generated DESIGN.md and design-token JSON from an isolated temporary folder. That folder is removed after the task completes or fails.
- Store and reuse the result
- Convex stores the normalized URL, Markdown, token JSON, job timing, generator version, request count, and cache hits. A successful result is reused for seven days before it is refreshed.
Observed evidence, not invented design rules
Exact colors, type values, spacing, radii, shadows, breakpoints, motion, and component styles come from the rendered pages. The generator omits sections when it has no supporting evidence instead of filling the document with generic defaults.
This version does not send the extraction to a generative AI model. That keeps the result explainable and avoids an AI charge for each request. The stored token JSON can support a separate inference layer later, while the seven-day cache prevents repeated work for the same normalized URL.
How to generate DESIGN.md from a website
- Step 1
Choose a representative page
Use a public page that shows the brand, typography, actions, cards, and other patterns you want documented.
- Step 2
Generate the design file
Paste the full URL above. The background job renders the page, measures its computed styles, and prepares the Markdown.
- Step 3
Review the observed token roles
Check that primary colors, fonts, spacing, and component descriptions match the intended system. Rename ambiguous semantic roles where needed.
- Step 4
Add it to your workflow
Save the reviewed output as DESIGN.md, commit it, and tell collaborators and coding agents when it should be followed.
A representative URL matters more than a broad domain name. If the homepage is mostly a campaign, analyze the product page or application surface whose patterns you actually plan to use.
When a website design system extractor helps
Recover undocumented UI decisions
Create a practical starting point when the production site is more current than its design documentation.
Give coding agents visual context
Provide specific observed values before an agent builds or updates UI, then review the implementation as usual.
Prepare a redesign audit
Capture the current visual vocabulary before deciding what to preserve, consolidate, or replace.
Compare product surfaces
Generate files for separate routes and inspect where colors, spacing, type, or component treatments have drifted.
Using DESIGN.md with a coding agent
Put the reviewed file near your project root where collaborators can find it. Then give the agent a direct instruction such as: Read DESIGN.md before changing UI, reuse its named tokens, and call out any decision the file does not cover. Explicit instructions are more reliable than assuming every tool discovers the file automatically.
Keep the document focused on durable rules. Remove one-off campaign colors, correct roles that the extractor inferred incorrectly, and note whether values apply to desktop, mobile, light mode, or dark mode. Commit the file so design changes can be reviewed alongside code changes.
Accuracy, storage, and permissions
The current generator analyzes up to three public pages in one desktop browser context. Another route, viewport, theme, or interaction state can expose different values. Treat the output as evidence from a snapshot, not a complete replacement for maintained design documentation.
The normalized URL, generated Markdown, token JSON, status, job timings, generator metadata, request count, cache hits, and logs are stored in Convex. A successful result can be reused for seven days, but that cache window is not an automatic deletion policy.
Analyze only websites you own or are authorized to inspect, and respect the site's terms and crawl policies. The result describes visual patterns; it does not grant permission to copy trademarks, protected assets, source code, or a competitor's complete trade dress.
Frequently Asked Questions
Publishing a shadcn registry?
Check the deployed registry JSON for current schema, naming, dependency, and file declaration problems before users install it.
Open the Shadcn Registry Validator