design-md-chrome: extract any website's style into a DESIGN.md or SKILL.md for AI coding agents

What design-md-chrome does

design-md-chrome is a Chrome extension that extracts styles and information from any given site and generates a DESIGN.md or SKILL.md file you can use with tools such as Google Stitch, Claude Code and Codex to build websites with a given design-system blueprint. The generated file follows the open-source TypeUI DESIGN.md format.

The problem it solves is a familiar one when working with AI coding agents: describing a visual style in prose is slow and lossy. This extension instead reads the style directly from a page you already like, typography, colours, spacing, radius, shadows and motion, and writes it down in a structured Markdown file the agent can follow. The people it fits are designers and developers who use AI agents to build UI and want a repeatable way to capture a design language rather than re-explaining it each time.

DESIGN.md versus SKILL.md

The extension produces two flavours of output from the same extracted signals, and the distinction matters. Generate DESIGN.md produces design-system documentation: a human-readable description of the tokens and rules. Generate SKILL.md produces agent-ready skill Markdown, the same information shaped as a skill an agent like Claude Code or Codex loads directly.

That pairing is the useful part. If you want a reference document your team reads and maintains, DESIGN.md is the target; if you want something an agent consumes as part of its workflow, SKILL.md is. Both come from one auto-extraction pass, so you can produce either, or both, from the same page without re-running the analysis differently. The other actions round out the loop: Refresh re-runs extraction for the current page state, Download saves the file, and Explain (the ? action) shows how the file was generated with a TypeUI reference.

What the generated file contains

The generated Markdown is not just a dump of tokens; it follows a defined structure aimed at producing implementation-ready output. A Mission section states the design-system objective for the extracted site, and Brand captures product context, URL, audience and surface. Style Foundations lists the inferred visual tokens. Notably, an Accessibility section applies WCAG 2.2 AA requirements and interaction constraints, so the blueprint carries accessibility rules rather than only appearance.

The rest is about guiding an agent to build consistently. A Writing Tone section sets the guidance tone, Rules: Do and Rules: Don't list required practices and anti-patterns, and there are sections for a guideline authoring workflow, a required output structure, component rule expectations covering interaction and state detail, and Quality Gates with testable consistency checks. This structure is what turns a style extraction into a usable brief: an agent given Do and Don't rules, component-state expectations and quality gates has far more to work with than a palette and a font list.

Installing and using the extension

There are two ways in. The extension is published on the Chrome Web Store, linked from the repository as its homepage, which is the simplest route for most users. For the source version, you load it unpacked, which is standard for a developer build:

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select this project folder

Once loaded, the workflow is: open the page whose style you want, run Auto-extract to read its visual signals, generate a DESIGN.md or SKILL.md, and Download it. For anyone working on the extension itself, the README documents a local test run:

node tests/run-tests.mjs

The repository is a straightforward extension layout, with a manifest.json, a content-script.js that reads the page, a service-worker.js, and a popup/ for the UI, so it is easy to inspect before loading unpacked.

The TypeUI format and curated skills

design-md-chrome is one piece of the wider TypeUI project rather than a standalone idea. The DESIGN.md format it emits is the open-source TypeUI DESIGN.md format, documented at typeui.sh, and the project also curates ready-made design systems at typeui.sh/design-skills. That matters for two reasons: the output is a shared, documented format rather than a one-off invention, so files generated here should be usable anywhere that understands TypeUI DESIGN.md; and if you do not want to extract from a live site, the curated design-skills gallery is an alternative source of the same kind of file.

Because the format is open, the extension is essentially a fast on-ramp to it. You could write a TypeUI DESIGN.md by hand, but extracting one from a page you admire and then editing it is quicker, and the Explain action ties each generated file back to the TypeUI reference so you can see how a signal became a rule.

Limits, licence and releases

The honest limit is inherent to style extraction: an automated read of a page infers tokens from what the browser renders, so the result is a strong approximation of a design language, not a guaranteed pixel-exact reproduction, and complex or heavily scripted pages will capture less cleanly than simple ones. The generated file is best treated as a blueprint to review and refine before handing it to an agent, especially the inferred foundations and the accessibility constraints, which you should confirm against the real design intent.

The project is MIT licensed and open source, with the extension code available to inspect. Its recent releases are v0.4.0 on 2026-04-17, v0.3.0 on 2026-04-16 and v0.2.0 on 2026-04-15, a cluster of quick iterations, and the last push was on 2026-05-25. For a free, open-source way to turn a website's look into a structured brief for Claude Code, Codex or Google Stitch, it fills a specific and practical gap.

Editorial conclusion

Use design-md-chrome when you want an AI coding agent to build in a specific site's visual style and would rather extract that style than describe it. Load the extension, open the page whose look you want, auto-extract, and download a DESIGN.md or SKILL.md to drop into Claude Code, Codex or Google Stitch. Treat the output as a strong starting blueprint to refine, not a pixel-exact copy.

Frequently asked questions

Official sources

1. bergside/design-md-chrome on GitHub
2. License: MIT
3. Project website
4. README
5. Releases