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

Copy code
[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

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

Immediately check for bot challenges:

javascriptCopy code
() => {
  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:

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

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