44
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.
Built with