skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-analyze-web

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
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-analyze-web
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
djankiesdjankies

sanitizing-user-inputs

Sanitize and validate user input with typed schemas in TypeScript applications.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
nyldnnyldn
4.0k

skill-extract

Extract tokens, components, and architecture mappings into structured documentation.

Community
Advanced
jaredcroxtonjaredcroxton

popular-web-designs

Generate HTML/CSS web pages from ready-to-use design system templates.

Community
Intermediate