Back to directory

TypeUI DESIGN.md Extractor

A Chrome extension that reads a website's typography, color, and spacing and turns them into a design-system reference file that AI coding tools can use when building a site.

Visit website (opens in a new tab)chromewebstore.google.com
TypeUI DESIGN.md Extractor

TypeUI DESIGN.md Extractor is a Chrome extension that reads a live web page's typography, colors, spacing, corner radius, shadows, and motion, and turns those signals into a design-system reference file. The generated file follows an open-source format and can be handed to tools such as Claude Code, Codex, or Google Stitch as a reference when building a site with a matching design system.

The generated document includes sections for the design system's mission and brand context, extracted visual foundations, accessibility requirements, a writing-tone guide, required and prohibited implementation patterns, an authoring workflow, and testable quality gates. It is loaded into Chrome as an unpacked extension through developer mode rather than distributed through the Chrome Web Store listing alone.

It is written in JavaScript and released under the MIT license.

More in UI kits

See all 31
  • A public-domain, JavaScript-free reference of loading-spinner designs implemented as low-frame-rate CSS or SVG, cutting a typical laptop's GPU usage from around 50 percent to single digits.

  • madeui

    madeui.com

    An open-source UI component library whose 59 components are copied into your project as editable source files, built on Base UI and StyleX with typed design tokens.

  • Crucible

    crucible-docs.naveenr.in

    A code generation engine that scaffolds production-ready React, Vue, Angular and React Native components styled with CSS Modules, SCSS, Tailwind, NativeWind or StyleSheet, producing plain source files a project owns instead of a runtime package.