DESIGN.md Style Extractor is a Chrome extension that pulls styles from a website and generates a DESIGN.md or SKILL.md file compatible with the TypeUI approach. Short verdict: it genuinely works for producing a usable baseline, especially if you want to give an AI clean design context, but it is not a full UX audit or a magic wand.
I tested it the way I would test a tool for a DevOps client: clean clone, code review, real run in Chromium, test web page with varied components, extraction, then inspection of the generated Markdown.
What is DESIGN.md Style Extractor?
DESIGN.md Style Extractor, hosted in the bergside/design-md-chrome repository, is a Chrome Manifest V3 extension. Its goal is straightforward: look at the active page, read its computed styles, and turn those signals into design system documentation.
The extension samples visible elements: headings, paragraphs, links, buttons, fields, navigation, sections, cards, tables. It then captures typography, colors, spacing, radii, shadows, animations, and a few structural signals.
The output comes in two forms:
DESIGN.md, to document a design system from an existing site.SKILL.md, to give an AI agent a reusable skill with rules, tokens, and accessibility constraints.
For a non-designer audience, the value is concrete: instead of telling an AI tool “redo this style for me”, you hand it a structured sheet with colors, type scale, detected components, rules, and guardrails.
Installing DESIGN.md Style Extractor
The repository is minimal. No complex build step, no mandatory npm dependencies for the extension itself. The README asks you to load the folder as an unpacked extension in Chrome.
I cloned the project into /tmp, as instructed, then ran the included tests:
git clone https://github.com/bergside/design-md-chrome /tmp/design-md-chrome
cd /tmp/design-md-chrome
node tests/run-tests.mjs
Actual result:
All tests passed.
I also inspected the manifest. The extension requests activeTab, scripting, storage, and downloads. That lines up with its purpose: inject a script into the active tab, store the output mode, then download the generated Markdown.
| Tested point | Result |
|---|---|
| Project type | Chrome Manifest V3 extension |
| Declared version | 0.4.0 |
| Included tests | node tests/run-tests.mjs |
| LLM required | No, local generation via JS code |
| Outputs | DESIGN.md and SKILL.md |
| Sensitive permissions | Access to active tab and script injection |
I exported the provided OpenAI and OpenRouter variables before launching, but the tool never needed them. It makes no LLM call in the tested path.
DESIGN.md Style Extractor in practice
To get a real use case, I created a local fictional page called OpsLedger: a SaaS dashboard with a hero, navigation, metric cards, a form, a table, buttons, visual states, and CSS custom properties.
Then I launched Chromium with the extension loaded and ran the extraction on that page. Under Xvfb, automatically opening the Chrome popup was not reliable, so I verified the core output through two paths: injecting the content script on the real page, then running through the same normalization and generation modules as the service worker.
This is not a simple smoke test. The product genuinely generated usable files.
On my OpsLedger page, the extraction observed:
- 73 total nodes.
- 39 sampled elements.
- 5 typography tokens.
- 8 color tokens.
- 10 spacing tokens.
- 3 radii.
- 2 shadows.
- 2 motion tokens.
- 7 cards, 4 links, 3 buttons, 2 inputs, 2 navigation areas, 1 list, and 1 table.
The DESIGN.md file opens like this:
# OpsLedger Dashboard
## Mission
Create implementation-ready, token-driven UI guidance for OpsLedger Dashboard that is optimized for consistency, accessibility, and fast delivery across dashboard web app.
## Brand
- Product/brand: OpsLedger Dashboard
- URL: http://127.0.0.1:43117/
- Audience: authenticated users and operators
- Product surface: dashboard web app
The most interesting part is the Style Foundations section. The tool found Inter as the primary font family, a type scale from 13.33 px to 56 px, colors like #111827, #2563eb, #d9e2ef, and spacing values from 12 to 22 px. It also classified the surface as dashboard web app and the audience as authenticated users and operators, which matches the test page well.
I also generated the SKILL.md. It contains the frontmatter, the TYPEUI_SH_MANAGED_START and TYPEUI_SH_MANAGED_END markers, then the same foundations converted into an agent skill.
What I like about DESIGN.md Style Extractor
The first strong point is simplicity. The flow is easy to understand: the extension reads the active page, normalizes the signals, generates Markdown, then validates the structure.
The second strong point is the output. It is not perfect, but it is directly readable by a human and usable by an AI. For a freelancer who needs to rebuild a landing page, document a small design system, or give context to Codex, Claude Code, or Cursor, it is genuinely useful.
I also appreciate the absence of LLM dependency. It is more predictable, faster, cheaper, and lower risk on the data side. From a security standpoint, that detail matters: analyzing an active page without sending its content to a remote model is a sound choice.
Finally, the code is short and easy to follow. The key functions are separated: extraction, normalization, DESIGN.md generation, SKILL.md generation, validation. Contributing or auditing is straightforward.
The limits of DESIGN.md Style Extractor
The big limitation: the tool infers. It does not truly understand design intent. It sees colors, spacing, headings, and likely components, then assembles plausible documentation.
Concrete example: in my test, it generated color.surface.base=#000000, probably because of computed values or default backgrounds. That is not catastrophic, but it shows you need to review the output before handing it to a team or an agent.
Another limit: the Chrome popup is harder to test automatically in a headless Linux environment. The core works, the modules produce the files correctly, but the full user experience inside the popup deserves a manual test in Chrome desktop.
On the security side, the permissions are reasonable for this type of extension, but they remain powerful. activeTab and scripting mean the extension can inject code into the active page after a user action. I see no red flags in this repository, but the classic rule still applies: only load the extension from a verified source.
Does DESIGN.md Style Extractor actually work?
Yes, for its main objective. In my test, it produced a valid DESIGN.md and a valid SKILL.md. Both files contain the expected sections: mission, brand, style foundations, accessibility, rules, workflow, output structure, component expectations, and quality gates.
The value is not in replacing a designer. The value is in creating a first map of the territory. For AI-generated content, that is already much better than a vague prompt based on a visual impression.
I can see it working well in these situations:
- quickly picking up the visual language of an existing site;
- documenting a design baseline before a redesign;
- creating context for a code agent;
- extracting starting tokens for a prototype;
- speeding up a brief between a freelancer, a client, and an AI tool.
I would use it less for a major brand identity or a product with many complex interactive states. That kind of work needs a real design system effort.
Should you adopt DESIGN.md Style Extractor?
My verdict: try it, then adopt it if your workflow already involves AI agents or page generation.
For a security/DevOps freelancer like me, it is not an everyday tool for hardening servers. But for producing content, preparing mockups, scoping a redesign, or feeding a code assistant, it has real utility.
I would put it in the “handy small tool” category: not robust enough to replace a design process, but good enough to save time and avoid vague visual prompts.
FAQ
Does DESIGN.md Style Extractor send the site to an LLM?
In the path I tested, no. Generation is done locally by the repository’s JavaScript modules, with no call to OpenAI or OpenRouter.
Can you use the generated Markdown as-is?
Yes to get started, no for publishing without a review. The tokens and rules are useful, but some inferences can be imprecise.
Is DESIGN.md Style Extractor useful without a design team?
Yes, especially for freelancers, developers, and content creators who want to give an AI structured visual context. It turns an existing page into a readable technical brief.