skills.rest
broomva
broomvaCOMMUNITY
Explore all skills by this author →
Website𝕏@broomva_techGitHub

design-distill

Extract design tokens and typography from live web references via headless browser measurement.

3|2|Updated Mar 17, 2026
Search Tags:#automation#design#branding#ui#css#tokens
One-click install
npx skills add https://github.com/broomva/skills --skill design-distill-broomva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-distill
Source: https://github.com/broomva/skills/tree/main/skills/design/design-distill
Command: npx skills add https://github.com/broomva/skills --skill design-distill-broomva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates the guesswork in design by replacing subjective model inference with measured, ground-truth data extracted from reference websites.

Core Features & Use Cases

  • Measured Extraction: Uses headless browser evaluation to capture exact computed styles, colors, and typography from reference sites.
  • Dual-Mode Generation: Produces semantic, dual-mode (light/dark) design tokens and Tailwind v4/shadcn-compatible UI components.
  • Claude Design Handoff: Generates a diff-ready prompt and manifest to ensure AI-assisted design refinements align perfectly with your established system.

Quick Start

Use the design-distill skill to capture the visual style of the provided reference URLs and generate a dual-mode design system.

Frequently Asked Questions about design-distill

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

FAQPage Schema
How do I extract design tokens and typography from a live reference website?▼

You can extract design tokens from reference websites by using headless browser measurement to capture exact computed styles, colors, and typography, ensuring objective style fidelity rather than subjective inference.

What is the best way to generate a dual-mode design system from existing web references?▼

Generating a dual-mode design system involves capturing measured computed styles from reference URLs and producing semantic light and dark mode tokens alongside Tailwind v4 or shadcn-compatible UI components.

Can I create shadcn-compatible UI components and Tailwind v4 tokens from computed CSS styles?▼

Yes, extracting precise computed CSS styles from reference sites allows you to generate semantic design tokens and Tailwind v4 or shadcn-compatible UI components for your design system.

Does extracting computed styles from web references require a headless browser?▼

Yes, extracting objective ground-truth computed styles from live web references requires a headless browser agent to evaluate and capture exact colors and typography measurements.

How do I hand off extracted design system tokens to an AI assistant for UI refinements?▼

You can hand off extracted design tokens by generating a diff-ready prompt and manifest, ensuring AI-assisted design refinements align perfectly with your established design system.

What format discipline is required for generating design system artifacts?▼

Generating design system artifacts requires adherence to P18 format discipline to ensure proper structure when outputting dual-mode tokens and UI component definitions.

Related Skills

Explore More Design & Creative Skills→
horuz-aihoruz-ai
5

website-cloner

Clone websites into React components with Tailwind and motion via multi-agent QA workflow.

Official
Advanced
christopheraaronhoggchristopheraaronhogg

aholiab-ui

Identify UI design quality issues and AI-generated slop in interfaces.

Community
Advanced
actionbookactionbook
1.6k

actionbook

Retrieve pre-computed action manuals with DOM selectors for browser automation.

Official
Basic
yonetim258852yonetim258852

extract-design

Extract design tokens from live websites using Dembrandt.

Community
Advanced