Design MD Generator

核心功能：从指定网站URL提取颜色、排版、组件、布局等设计tokens，生成含9个标准章节的结构化DESIGN.md（符合Google Stitch格式），还可生成视觉预览页。典型场景：需提取网站设计系统、生成设计规范、逆向分析视觉语言时使用。输入为目标URL，输出适配AI编码Agent生成像素一致的UI。

wavmson

热度 34.73

最近更新 2026-05-11 17:40:32

分类：效率依赖：联网浏览搜索 / 代码执行 / 读写文件 / 内部调用大模型应用场景：UI 原型 / 报告撰写 / 数据处理 / 模板

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add design-md-generator

Metadata

name: design-md-generator
description: Generate DESIGN.md files from any website URL. Extracts the complete visual design system — colors, typography, spacing, components, shadows — into a structured markdown document that AI coding agents can read to produce pixel-perfect, visually consistent UI. Use when asked to "extract design system", "generate DESIGN.md", "capture the look of a website", "create a design spec from URL", or "reverse-engineer a site's visual language". Based on the Google Stitch DESIGN.md format.

Design MD Generator

Generate structured DESIGN.md files from any website URL. The output follows the Google Stitch DESIGN.md format with 9 standard sections.

Workflow

Step 1: Capture the site

Use the browser tool to load the target URL and take a screenshot:

browser action=navigate url="<TARGET_URL>"
browser action=screenshot
browser action=snapshot

Step 2: Extract CSS tokens

Run the extraction script to pull all design tokens from the page's computed styles:

# From the skill directory
node {baseDir}/scripts/extract-tokens.js "<TARGET_URL>"

The script outputs a JSON file with:

All unique colors (background, text, border, accent)
Font families, sizes, weights, line-heights, letter-spacing
Border radii, shadows, spacing values
Component patterns (buttons, cards, inputs)

Step 3: Generate DESIGN.md

Using the extracted tokens + screenshot for visual context, write a DESIGN.md with these 9 sections:

#	Section	What to capture
1	Visual Theme & Atmosphere	Mood, density, design philosophy. Write like an art director describing the aesthetic.
2	Color Palette & Roles	Every color with semantic name + hex + functional role. Group by: Brand, Background, Text, Semantic, Border.
3	Typography Rules	Font families with fallbacks. Full hierarchy table: role, font, size, weight, line-height, letter-spacing.
4	Component Stylings	Buttons (primary/secondary/ghost), Cards, Inputs, Navigation, Badges — with all states (default, hover, active, disabled).
5	Layout Principles	Spacing scale table, grid system, max-width, column count, whitespace philosophy.
6	Depth & Elevation	Shadow system table (flat → raised → floating → overlay). Surface hierarchy list.
7	Do's and Don'ts	Design guardrails. What makes this design system unique and what breaks it.
8	Responsive Behavior	Breakpoints table, touch targets, collapsing strategy for nav/grids/typography.
9	Agent Prompt Guide	Quick color reference block + 2-4 ready-to-use prompts for common page types.

Writing Guidelines

Be specific: Use exact hex values, px sizes, font weights — not "dark blue" or "large text"
Be opinionated: Describe the atmosphere like a design critic, not a spec sheet
Name colors semantically: "Lobster Coral" not "Red 1", "Deep Sea" not "Background Dark"
Include states: Every interactive component needs default + hover + active + focus states
Show hierarchy: List surfaces from darkest to lightest, text from brightest to dimmest
Agent-ready prompts: Write Section 9 prompts that another AI agent can copy-paste to build matching UI

Output

Save the generated file as DESIGN.md in the target location specified by the user.

Optionally generate:

preview.html — A visual catalog page showing color swatches, type scale, and component samples
preview-dark.html — Same catalog on dark surface

Reference

See references/format-spec.md for the complete section-by-section format specification with examples.

See references/example-linear.md for a high-quality example (Linear's DESIGN.md).