TypeUI DESIGN.md Extractor (Chrome Extension)

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

Getting started

Load the extension in Chrome:

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

Curated design skills

Check out curated design systems at typeui.sh/design-skills.

Available actions

Action	Description
Auto-extract	Reads styles from the active tab (typography, colors, spacing, radius, shadows, motion).
Generate DESIGN.md	Produces design-system documentation markdown from extracted signals.
Generate SKILL.md	Produces agent-ready skill markdown from extracted signals.
Refresh	Re-runs extraction for the current page state.
Download	Saves generated output as DESIGN.md or SKILL.md.
Explain (?)	Shows how the file was generated, with TypeUI reference.

Generated file structure

The generated markdown follows this structure:

Section	What it does
Mission	Defines the design-system objective for the extracted site.
Brand	Captures product/brand context, URL, audience, and product surface.
Style Foundations	Lists inferred visual tokens and foundations.
Accessibility	Applies WCAG 2.2 AA requirements and interaction constraints.
Writing Tone	Sets guidance tone for implementation-ready output.
Rules: Do	Lists required implementation practices.
Rules: Don't	Lists anti-patterns and prohibited behavior.
Guideline Authoring Workflow	Defines ordered guideline authoring steps.
Required Output Structure	Enforces consistent output sections.
Component Rule Expectations	Defines required interaction/state details.
Quality Gates	Adds testable quality and consistency checks.

Local development

Run tests locally:

node tests/run-tests.mjs

License

This project is open-source under the MIT License.