# TypeUI DESIGN.md Extractor

> A Chrome extension that extracts styles from any website and generates DESIGN.md or SKILL.md files for use with AI coding tools like Claude Code, Codex, and Google Stitch.

TypeUI DESIGN.md Extractor is an open-source Chrome extension that reads visual styles from any active browser tab and produces structured markdown files for AI-assisted web development. It captures typography, colors, spacing, border radius, shadows, and motion tokens, then formats them into a standardized DESIGN.md or SKILL.md blueprint. These files can be fed directly into AI coding tools such as Claude Code, OpenAI Codex, and Google Stitch to build websites that faithfully follow a given design system. The project is built on the open-source TypeUI DESIGN.md format and is freely available under the MIT License.

- **Auto-extract styles** — *Automatically reads typography, colors, spacing, radius, shadows, and motion from the active tab with a single click.*
- **Generate DESIGN.md** — *Produces design-system documentation markdown structured with Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules, and Quality Gates sections.*
- **Generate SKILL.md** — *Produces agent-ready skill markdown from the same extracted signals, optimized for AI agent consumption.*
- **Download output** — *Saves the generated file locally as DESIGN.md or SKILL.md for immediate use in AI workflows.*
- **Refresh extraction** — *Re-runs style extraction for the current page state to capture dynamic or updated styles.*
- **Explain generation** — *Shows how the file was generated with a TypeUI reference, providing transparency into the extraction logic.*
- **Curated design skills** — *Access a library of pre-built design systems at typeui.sh/design-skills for popular brands and UI patterns.*
- **Open-source & extensible** — *MIT-licensed JavaScript project with a local test runner, making it easy to fork, modify, and contribute.*

## Features
- Auto-extract typography, colors, spacing, radius, shadows, and motion from any website
- Generate DESIGN.md design-system documentation markdown
- Generate SKILL.md agent-ready skill markdown
- Download output as DESIGN.md or SKILL.md
- Refresh extraction for current page state
- Explain generation with TypeUI reference
- Curated design skills library
- WCAG 2.2 AA accessibility requirements in output
- Quality gates for testable consistency checks

## Integrations
Claude Code, OpenAI Codex, Google Stitch, Gemini, TypeUI

## Platforms
API, BROWSER_EXTENSION, VSC_EXTENSION

## Pricing
Open Source

## Version
v0.4.0

## Links
- Website: https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma
- Documentation: https://github.com/bergside/design-md-chrome
- Repository: https://github.com/bergside/design-md-chrome
- EveryDev.ai: https://www.everydev.ai/tools/typeui-design-md-extractor