Design-md-chrome is a Chrome extension that extracts visual styles from websites and generates design system documentation for use with AI coding tools.
The extension solves the problem of manually documenting design systems by automatically reading typography, colors, spacing, border radius, shadows, and motion properties from any active webpage. It then generates either a DESIGN.md file containing structured design-system documentation or a SKILL.md file formatted for AI agents. Both outputs follow the open-source TypeUI DESIGN.md format and include sections covering brand context, style foundations, accessibility requirements aligned with WCAG 2.2 AA, writing tone guidance, implementation rules, component expectations, and quality gates.
Developers should adopt this tool if they need to quickly document existing design systems or create design blueprints for AI-assisted web development. It suits projects where you want to capture the visual language of a live website and feed that into tools like Claude Code, Google Stitch, or Codex. The extension works by loading unpacked in Chrome's developer mode and provides actions to auto-extract styles, generate markdown files, refresh extraction as page state changes, download the output, and view explanations of how extraction was performed. The tool is most useful for teams already working with AI code generation and the TypeUI ecosystem.
The project shows active maintenance with a clear focus on supporting AI-assisted design workflows. Development appears oriented toward practical usability, with straightforward local testing setup and transparent documentation of the generated file structure. The extension is distributed through the Chrome Web Store alongside curated design skills available on the TypeUI website, indicating ongoing integration with a broader design-system ecosystem.
