# Design.md Chrome

> A Chrome extension that extracts a site's design into DESIGN.md or SKILL.md

- Category: Agent skills (`skills`)
- Tags: `free`, `open-source`
- Official: https://github.com/bergside/design-md-chrome
- Wunderlust: https://wunderlust.xyz/r/design-md-chrome
- Image: https://wunderlust.xyz/media/design-md-chrome-poster.jpg
- Video preview: https://wunderlust.xyz/media/design-md-chrome.webm
- Added: 2026-11-05

## What it is

A Chrome extension (TypeUI DESIGN.md Extractor) that reads typography, colors, spacing, radius, shadows and motion from the active tab and generates a DESIGN.md or SKILL.md file.

## What it’s for

Use it to turn a reference site's look into instructions an agent (Stitch, Claude Code, Codex) can follow.

## Benefits

- Extracts typography, colors, spacing, radius, shadows and motion from the open page
- Generates a DESIGN.md with WCAG 2.2 AA requirements, usage and component rules, or an agent-ready SKILL.md
- Lets you refresh, download and see how the file was generated

## Caveats

- MIT license; installing as an unpacked extension requires developer mode in Chrome

## Similar on Wunderlust

- [Designlang](https://wunderlust.xyz/r/designlang.md): Extracts colors and typography from a website into a visual system
- [Interface Skills](https://wunderlust.xyz/r/interface-skills.md): Jakub Krehel's set of 14 skills for building and reviewing interfaces
- [unslop](https://wunderlust.xyz/r/unslop.md): Skill that detects “AI-generated” UI and redesigns it in passes
- [Extract Design System](https://wunderlust.xyz/r/extract-design-system.md): Skill that extracts colors, typography and spacing from a design
- [Diagram Design](https://wunderlust.xyz/r/diagram-design.md): A skill that generates editorial diagrams in a single HTML file with SVG
- [Stitch Skills](https://wunderlust.xyz/r/stitch-skills.md): Skills for agents to work with Google Stitch and its MCP server