design-analyze
CommunityAnalyze website design systems.
Authormistakeknot
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the tedious and error-prone process of manually auditing a website's design system, providing a structured, machine-readable output.
Core Features & Use Cases
- W3C DTCG Token Extraction: Automatically identifies and extracts design tokens (colors, typography, spacing, etc.) in the W3C Design Tokens Community Group format.
- Component Inventory: Discovers and lists UI components used on the site.
- Layout and Visual Analysis: Assesses layout patterns, visual hierarchy, and color harmony using screenshots and AI vision.
- Use Case: A UI/UX designer needs to audit a competitor's website for their design system. This Skill can quickly generate a comprehensive report of their tokens, components, and visual style.
Quick Start
Analyze the design system of the website located at https://example.com.
Dependency Matrix
Required Modules
@playwright/mcp
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-analyze Download link: https://github.com/mistakeknot/Demarch/archive/main.zip#design-analyze Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.