DESIGN.md Inspector

About

DESIGN.md Inspector extracts design tokens from any webpage and generates ready-to-use DESIGN.md and SKILL.md files for AI coding agents.

How it works:
↳ Open the side panel on any site
↳ The extension automatically scans visible elements and CSS custom properties
↳ Outputs structured markdown files following the Google DESIGN.md specification

What it extracts:
↳ Colors — hex values, CSS variable names, inferred roles (background, text, accent, border)
↳ Typography — font families, size scale, weight scale, line heights
↳ Spacing — margin, padding, gap values with base grid unit detection
↳ Border radius — all detected radius values, normalized
↳ Shadows — box-shadow values, labeled by intensity
↳ Motion — transitions and animations with duration labels
↳ Components — buttons, links, inputs, navigation, forms, images, tables

What it generates:
↳ DESIGN.md — full design system documentation with color tables, typography scale, spacing grid, do's and don'ts, authoring workflow, component requirements, and definition of done
↳ SKILL.md — agent skill file with frontmatter, tokens, constraints, and structured output rules
↳ Design palette PNG — visual overview image of the extracted design system

Built for AI-assisted development:
↳ Drop DESIGN.md into your project root for Claude Code, Cursor, GitHub Copilot, or Codex to follow
↳ Install SKILL.md as an agent skill for context-aware component generation
↳ Token-driven output ensures AI agents reference design tokens, not hardcoded values

Key features:
↳ Zero config — works on any website, no setup required
↳ Runs entirely locally — no API calls, no data sent anywhere
↳ Auto-refreshes when you navigate between pages
↳ One-click copy, download, or quick install to your project folder
↳ Supports Claude Code, Cursor, and Codex project structures

Use cases:
↳ Reverse-engineer any site's design system for reference
↳ Bootstrap a design token file for a new project
↳ Feed consistent design context to AI coding assistants
↳ Audit an existing site's visual consistency
↳ Generate component guidelines from extracted tokens

All processing runs in your browser. No account required. No data leaves your machine.