Обзор
Автоматически генерируйте DESIGN.md и SKILL.md из дизайн-системы любой страницы и используйте с Claude, Codex и 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.
Подробности
- Версия1.1.1
- Обновлено22 июля 2026 г.
- Автор:Zack
- Размер384KiB
- ЯзыкиПоддерживаемых языков: 10
- Разработчик
Электронная почта
support@emailbuttons.com - Не продавецРазработчик не указал для себя статус продавца. Просим клиентов из Европейского союза обратить внимание, что на сделки между вами и этим разработчиком не распространяются законы о защите прав потребителей.
Конфиденциальность
Этот разработчик утверждает, что ваши данные:
- Не продаются третьим лицам, за исключением разрешенных вариантов использования
- Не используются и не передаются в целях, не связанных с работой основных функций продукта
- Не используются и не передаются для определения платежеспособности или в целях кредитования
