liaocaoxuezhe/get-web-design

Extract the design style of any online website into a structured DESIGN.md. This skill is a command-line / AI Agent port of the design-extractor Chrome extension.

Features

• Generate DESIGN.md from any URL for AI programming prompts
• Extract site design tokens (color / font / spacing / rounded corners / shadows / animations)
• Directly analyze using the current AI Agent without additional API keys; Supports combining screenshots with images; otherwise, use DOM/CSS
• Identify truly memorable iconic elements on web pages and output visual rules in plain text (excluding code)
• Collect DOM, computed CSS, and up to 3 optional screenshots via chrome-devtools MCP
• Output a test token and eight main text that comply with Google DESIGN.md alpha format, combined with Vercel’s task-oriented, component reuse, and acceptance methods

Trigger Scenario

• “Generate https://stripe.com DESIGN.md”
• “Analyze linear.app’s design style and preserve it”
• "extract design from "

Upfront dependency

1. chrome-devtools MCP — Verify the presence of chrome-devtools services by /mcp.
2. Python ≥ 3.9 — Only standard libraries are used, no need to install Python dependencies

The current model does not require visual support; When images can be read, it automatically combines with screenshots; when images cannot be read, it analyzes and annotates visual validation limitations based on DOM/CSS. No need to configure API Key, service address, or model name separately; Subscription or billing by the host AI tool itself still applies.

See references/setup.md for details.

Installation

One-Line Command (Automatically Detects Your AI Tools)

Install via NPX Skills (Recommended)

If you have already installed the skill.sh ecosystem, you can directly install it with the following command:

After installation, skill will automatically be injected into the context of the current AI Agent, eliminating the need to manually copy files.

Install on specified platforms

Manual installation

Copy SKILL.md, skill.yaml, assets/, [T10]], references/ from the full repository to the target skill directory; Copying only SKILL.md cannot run the generation script.

Workflow

All products extracted each time are consolidated into a output/ / folder for easy archiving and reuse.

For detailed steps, see references/workflow.md. For chrome-devtools MCP call recipes, see references/chrome_devtools_recipes.md.

File Structure