Design Inspector

Inspect $ARGUMENTS and extract a complete design system analysis.

This is a read-only reconnaissance skill — it analyzes a live website's visual design, extracts tokens, documents components, and outputs structured specs. It does NOT clone or rebuild anything.

Use this when you want to:

• Understand a site's design system before building something similar
• Extract exact colors, typography, spacing for use in your own project
• Document component patterns and interaction behaviors
• Create a design reference for a frontend team

Requirements

• Playwright MCP must be available (browser_navigate, browser_evaluate, browser_take_screenshot, browser_snapshot, browser_resize, browser_hover, browser_click)

Execution

Step 1: Navigate and Screenshot