design-system-analyzer

Design System Analyzer

Analyze websites via ChromeDevTools to extract deep CSS logic (keyframes, transitions, tokens) and generate comprehensive Design System System Prompts.

Critical Rules

1. MUST output the final prompt using EXACTLY the structure in references/design-system-template.md
2. MUST limit extraction data to prevent context overflow (see analysis-guide.md for limits)
3. MUST fill ALL template placeholders with extracted or observed values
4. NEVER skip sections - use "Not observed" if data unavailable

Best Practice: Use Your Own Chrome

For the best experience (no CAPTCHAs, shared login cookies), advise the user to run Chrome with: chrome.exe --remote-debugging-port=9222 (See references/setup-guide.md for details)

---

Workflow Overview

[1. Navigate] → [2. Anti-Bot Check] → [3. Deep Extraction] → [4. Synthesize to Template]

IMPORTANT: Do NOT take screenshots. Screenshots consume excessive context and are unnecessary - all visual data is extracted from CSS.

---

Step 1: Navigate & Anti-Bot Check

mcp__chrome-devtools__navigate_page (url: "<target-url>")

Immediately check for bot challenges:

() => {
  const text = document.body.innerText.toLowerCase();
  const title = document.title.toLowerCase();
  if (text.includes('cloudflare') || text.includes('verify you are human') || title.includes('just a moment')) {
    return 'CHALLENGE_DETECTED';
  }
  return 'OK';
}

IF CHALLENGE_DETECTED:

1. PAUSE all actions.
2. Tell the user: "Bot protection detected. Please manually solve the CAPTCHA in the browser, then confirm here."
3. Wait for user confirmation before proceeding.

---

Step 2: Deep CSS Extraction

Run the extraction scripts from references/analysis-guide.md in order:

Order	Script	Purpose	Max Items
1	CSS Variables & Tokens	Colors, spacing, typography variables	50 tokens
2	Animation & Keyframes	@keyframes, animation usage, transitions	10 KF, 15 trans
3	Interaction States	:hover, :focus, :active rules	15 rules
4	Typography	Font stacks from key elements	7 elements
5	Layout & Spacing	Border radius, gaps, shadows	5 each
6	Tech Stack	Framework detection	-

IMPORTANT: Each script has built-in limits. Do NOT modify to extract more data.

---

Step 3: Synthesize to Template

MANDATORY: Generate output using EXACTLY the template structure from references/design-system-template.md.

Template Mapping Table

Extracted Data	Template Section	Notes
tokens.colors	Design Token System > Colors	Format as table
tokens.spacing	Spacing, Radius & Borders	Include radius values
tokens.typography	Typography	Include font stacks
Typography script	Typography > Font Stacks, Type Scale	Computed styles
keyframes	Animation & Motion > Key Animations	Full keyframe definitions
animationUsage	Animation & Motion > Timing	Duration, easing
transitions	Animation & Motion > Timing	Common patterns
interactions	Component Styling > State Transitions	Hover/focus effects
Layout sampler	Layout Principles	Spacing system
Tech stack	Implementation Notes	Tailwind/CSS notes

Output Format Checklist

Before outputting, verify ALL these sections are present:

• <role> block (copy exactly from template)
• <design-system> wrapper
• ## Design Philosophy with Core Principles, Vibe, Historical Context
• ## Design Token System with Colors table, Typography, Spacing
• ## Component Styling Principles with Buttons, Cards, Form Inputs
• ## Layout Principles with Spacing System, Grid, Responsive
• ## The "Signature" Factor with 3 mandatory elements
• ## Animation & Motion with Philosophy, Timing, Key Animations
• ## Accessibility Constraints
• ## Anti-Patterns with Visual and Interaction no-nos
• ## Implementation Notes with tech-specific guidance
• ## Aesthetic Checklist with 4 verification items
• Closing </design-system>

---

Resources

• references/design-system-template.md: The REQUIRED output template
• references/analysis-guide.md: Deep extraction scripts with context limits
• references/setup-guide.md: Guide for reusing user's Chrome