Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

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.