TypeUI DESIGN.md Extractor

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.