# bergside/design-md-chrome

Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI

Repository: https://github.com/bergside/design-md-chrome
Canonical: https://ross.abutalabs.com/products/design-md-chrome
Homepage: https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma
Language: JavaScript
License: MIT
License Family: permissive
Topics: ai, chrome, chrome-extension, design-md, design-skills, extension, open-source, skills, skills-ai, typeui, claude, claude-design, codex, gemini
Last push: 2026-05-25T18:28:25+00:00

## Health v2 (maintenance only)
Score: 68/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 84, release rhythm 80, longevity 10
- inputs: {"age_days": 141, "days_push": 100, "days_rel": 138, "gap_med": 0, "n_releases_24m": 4}
- flags: young
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 2738, forks 298 (observed 2026-08-28T04:07:16.331463+00:00)

## What it is
A Chrome extension that extracts visual styles (typography, colors, spacing, shadows, motion) from any website and generates DESIGN.md or SKILL.md files based on the open-source TypeUI format. These files serve as design-system blueprints for AI coding tools like Claude Code, Codex, and Google Stitch.

## Use cases
- extract design tokens from an existing website
- generate a DESIGN.md design system blueprint from a live site
- create SKILL.md files for AI coding agents
- reverse-engineer a website's visual style for rebuilding it
- feed a site's design system into Claude Code or Codex
- document typography, colors, and spacing of any webpage

## When to choose
- you want to replicate or extend an existing site's design with AI tools
- you need a structured design-system document from a live webpage
- you use Claude Code, Codex, Gemini, or Stitch and want design context

## When to avoid
- you need a full design-to-code converter rather than a style extractor
- you work outside Chrome or need Firefox/Safari support
- you want automated visual regression testing of designs

## Facets
- artifact type: plugin
- maturity: active
- function: developer-tools, documentation, markdown, web-scraping, prompt-engineering
- domain: web-development, web-design, developer-tools, browser-extensions
- platform: browser, browser-extension
- tags: chrome-extension, design-systems, design-md, typeui, ai-skills, claude, codex, gemini, style-extraction, design-tokens

## Member repositories
- bergside/design-md-chrome (main) score 68

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:07:16.331463+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T08:19:12.956138+00:00, confidence not recorded.
  - readme: https://github.com/bergside/design-md-chrome (fetched 2026-08-28T04:07:16.331463+00:00, sha d12d05f7e20e)
  - homepage: https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma (fetched 2026-08-29T09:57:41.426725+00:00, sha 44136fa355b3)
- Data as of 2026-08-30T08:39:29.467469+00:00.