skills.rest
mistakeknot
mistakeknotCOMMUNITY
Explore all skills by this author →
GitHub

design-analyze

Analyze website design systems by extracting W3C DTCG tokens and component inventories.

3|1|Updated Feb 15, 2026
Search Tags:#design system#ui/ux#component analysis#website audit#token extraction#w3c dtcg
One-click install
npx skills add https://github.com/mistakeknot/Demarch --skill design-analyze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-analyze
Source: https://github.com/mistakeknot/Demarch/tree/main/interverse/intersight/skills/analyze
Command: npx skills add https://github.com/mistakeknot/Demarch --skill design-analyze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/mcp, and includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about design-analyze

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract W3C DTCG design tokens from an existing website?▼

You can extract W3C DTCG design tokens by analyzing a website's design system automatically. This process identifies colors, typography, and spacing, outputting them in a structured, machine-readable format without manual auditing.

What is a website design system audit and what does it include?▼

A website design system audit assesses layout patterns, visual hierarchy, and color harmony. It generates a comprehensive report containing a component inventory, layout analysis, and extracted design tokens for UI/UX evaluation.

Do I need Playwright to analyze a website's UI components and layout?▼

Yes, Playwright MCP is required for browser interaction during website UI analysis. It enables the automated crawling and screenshot capture necessary to assess visual hierarchy and discover component inventories.

Can I crawl multiple pages for a component inventory and layout analysis?▼

Yes, multi-page crawling is supported for generating a component inventory and layout analysis. You can analyze various pages across a website to ensure comprehensive discovery of UI components and design patterns.

How does AI vision evaluate visual hierarchy and color harmony during a website audit?▼

AI vision evaluates visual hierarchy and color harmony by analyzing screenshots captured during the website audit. This allows automated assessment of layout patterns and visual style without manual inspection.

Related Skills

Explore More Design & Creative Skills→
BeltDoorBeltDoor

install-playwright

Install and configure a persistent Playwright browser automation environment for Claude.

Community
Intermediate
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate
joi-fairsharejoi-fairshare
1

design-analyze-web

Extract and merge W3C DTCG design tokens from web URLs.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced