Skills
.Work. You
Rest

design-inspector

Community

Extract design systems from live websites

Design & Creative#frontend#playwright#design-system#token-extraction#ui-audit#component-inventory#interaction-audit
Authorkmshihab7878
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the extraction of design tokens, component inventories, and interaction patterns from a live website so teams can document and reproduce a design system without cloning or rebuilding the site.

Core Features & Use Cases

  • Design token extraction: harvest colors, typography, spacing, border radii, shadows, and breakpoints from computed styles.
  • Component inventory: capture DOM snapshots and computed styles for navigation, cards, forms, buttons, media, and layout primitives.
  • Interaction audit: record scroll behaviors, hover states, click-driven transitions, and animation libraries.
  • Tech stack detection & assets: detect framework, CSS approach, font sources, icon libraries, svg counts, and lazy-loading strategy. Use cases include design audits, migrating visual systems to new projects, creating developer-ready design references, and UX research prior to reimplementation.

Quick Start

Inspect https://example.com to generate a structured design system report with tokens, component inventory, and interaction notes.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-inspector
Download link: https://github.com/kmshihab7878/claude-code-setup/archive/main.zip#design-inspector

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.