design-analyze-web

Name: design-analyze-web
Availability: InStock
Author: joi-fairshare

Extract and merge W3C DTCG design tokens from web URLs.

1|2|Updated Mar 19, 2026

Search Tags:#automation #analysis #web #design-tokens #visual-system #dembrandt

Ready to run

npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-analyze-web

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-analyze-web
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-analyze-web
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-analyze-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual design token extraction from reference websites is time-consuming and inconsistent, especially when trying to bake shared colors, typography, and spacing into a cohesive system for a web UI.

Core Features & Use Cases

Validated Inputs: Ensures each URL is safe and well-formed before any CLI work begins, reducing wasted runs.
Dembrandt Automation: Runs Dembrandt with W3C DTCG flags (and optional dark-mode scans) across one or more references to harvest structured tokens.
Smart Merging: Resolves conflicts via frequency/prominence, preserves primary-reference preference, and writes the consolidated design-tokens.json for downstream mockups and implementations.

Quick Start

Command /design-analyze-web https://linear.app https://vercel.com to capture and merge tokens from the supplied web references.

Frequently Asked Questions about design-analyze-web

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

FAQPage Schema

How do I extract design tokens from multiple websites into a single file?▼

To extract design tokens from multiple websites, supply reference URLs to an automated CLI tool that validates each address, harvests structured tokens, and merges conflicting values into a single JSON output.

What is the best way to consolidate color and typography tokens from different web references?▼

The best way to consolidate color and typography tokens is by using an automated merging process that resolves conflicts via frequency and prominence, while preserving primary-reference preference to ensure cohesive downstream mockups.

Can I generate dark mode design tokens from web references automatically?▼

Yes, you can generate dark mode design tokens automatically by running the extraction CLI with a specific dark-mode flag, which scans the provided URLs and includes dark theme variables in the merged JSON output.

Do I need to manually catalog W3C DTCG formatted tokens from web pages?▼

No, you do not need to manually catalog W3C DTCG formatted tokens. An automated extraction tool harvests structured design tokens directly from web references and outputs them in compliant DTCG formatting.

How does conflict resolution work when merging design tokens from several URLs?▼

Conflict resolution during token merging works by evaluating the frequency and visual prominence of values across the referenced URLs, while giving preference to the primary reference to maintain design consistency.