design-md-chrome: Turn Any Website's Design System Into a SKILL.md

"Make it look like this site" is where agentic front-end work falls apart — the agent never saw the site. bergside/design-md-chrome closes that gap: a Chrome extension that reads the styles of the tab you are on and turns them into a DESIGN.md or SKILL.md file your agent can actually consume.

Why This Skill Matters

The extension is built on the open TypeUI DESIGN.md format from typeui.sh, and it does more than dump CSS variables. One extraction pass reads typography, colors, spacing, radius, shadows, and motion from the active tab, then generates a structured document with eleven sections — Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules: Do, Rules: Don't, Guideline Authoring Workflow, Required Output Structure, Component Rule Expectations, and Quality Gates. The Accessibility section bakes in WCAG 2.2 AA requirements, so the output constrains generation instead of just describing it.

Because the output is a standard markdown file, it works with anything that reads instructions: the README names Google Stitch, Claude Code, Codex, and others.

Installation

The README documents an unpacked load:

1. Open chrome://extensions.
2. Enable Developer mode.
3. Click Load unpacked and select the cloned repo folder.

git clone https://github.com/bergside/design-md-chrome.git

Real Workflow: Clone a Design Language, Then Build Against It

1. Open the reference site whose look you want to reuse, and run Auto-extract from the extension. It reads the styles of the active tab.
2. Generate DESIGN.md first if you want human-readable design-system documentation, or SKILL.md if the file's destination is an agent. Download the file.
3. Drop the SKILL.md into your project's skills directory and prompt normally:

Build the pricing page for our product. Follow the design
system in the attached SKILL.md exactly.

4. If the result drifts, use the extension's Explain (?) action — it shows how the file was generated, with the TypeUI reference — so you can see which signals produced which rules.

The generated file keeps text editable and rules inspectable: when a build disagrees with the reference, the Rules: Don't section tells you whether the agent violated a constraint or the extraction missed one.

Tips

• Generate both files for a big reference: DESIGN.md for your team's review, SKILL.md for the agent.
• typeui.sh/design-skills hosts curated design systems if you want a starting point without scraping first.
• Re-run extraction with Refresh after interacting with the page, so the extraction reflects the current page state.
• The repo keeps tests in node tests/run-tests.mjs if you want to modify the extractor.

When Not to Use This

The extension extracts what CSS can express. Imagery, brand illustration, and layout intent that lives in pictures will not survive as rules, and a single-page capture of a large site is a sample, not the whole system. For pixel-faithful replication you still want the reference open next to your agent; use the file to enforce the system, not to replace the eye.

See the leaderboard for more skills.