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
- MUST output the final prompt using EXACTLY the structure in
references/design-system-template.md - MUST limit extraction data to prevent context overflow (see analysis-guide.md for limits)
- MUST fill ALL template placeholders with extracted or observed values
- 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