design-system-analyzer

Installation
SKILL.md

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

Related skills

More from nakanosanku/ohmyskills

Installs
30
GitHub Stars
158
First Seen
Jan 23, 2026