Présentation
Générez automatiquement DESIGN.md et SKILL.md à partir du système de design de n'importe quelle page et utilisez-les avec Claude,…
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.
Détails
- Version1.1.1
- Dernière mise à jour22 juillet 2026
- Proposé parZack
- Taille384KiB
- Langues10 langues
- Développeur
E-mail
support@emailbuttons.com - Non-professionnelCe développeur ne s'est pas identifié comme professionnel. Pour les consommateurs de l'Union européenne, veuillez noter qu'il est possible que les droits des consommateurs ne s'appliquent pas aux contrats entre vous et ce développeur.
Confidentialité
Ce développeur déclare que vos données :
- Ne seront pas vendues à des tiers en dehors des cas d'utilisation approuvés.
- Ne seront ni utilisées ni transférées à des fins sans rapport avec la fonctionnalité de base de l'article.
- Ne seront ni utilisées ni transférées pour déterminer votre solvabilité ou en vue de vous proposer un prêt.
