Design MD Generator

Generate DESIGN.md files from any website URL. Extracts the complete visual design system — colors, typography, spacing, components, shadows — into a structu...

Security Scan

The skill's stated purpose (extract design tokens from a URL) matches its code and instructions, but there are mismatches and omissions (notably undeclared runtime dependencies and duplicated browser access) that reduce trust and require user attention before installing.

Purpose & Capability

The skill really does what it claims: it captures a site and extracts CSS tokens to produce a DESIGN.md. However, the package claims no required binaries/env but includes a Node script that requires Node and the Puppeteer library (which pulls a headless Chromium). Not declaring these runtime requirements is an incoherence: a legitimate design-extraction tool would need Node/Puppeteer or a platform browser, so the omission should be fixed or documented.

Instruction Scope

SKILL.md gives a narrow, well-scoped runtime procedure: use the platform browser to screenshot/snapshot and run the included extraction script to collect computed styles, CSS vars, fonts, spacings, and shadows. The script only inspects DOM/computed styles and writes structured JSON; it does not call external endpoints or exfiltrate data. It does iterate document.styleSheets and computed styles (which is necessary to find tokens) — that can reveal any styles present on the page, but this is consistent with the stated purpose.

Install Mechanism

There is no install spec (instruction-only), which is low risk, but the included scripts rely on Puppeteer. If Puppeteer/Chromium are not present, the extraction will fail or installing Puppeteer will trigger a large Chromium download. The repository does not declare or vendor dependencies (no package.json), so the runtime environment must already provide Node + Puppeteer or the user must install them manually — an operational omission that could lead to unexpected downloads/executables.

Credentials

The skill requests no environment variables or credentials. The extraction script writes output to a filesystem path (default /tmp/design-tokens.json). It accesses only the target URL's DOM and styles (title, URL, computed styles, CSS custom properties). There are no hard-coded remote endpoints or secret-typed env variables requested. This is proportionate to the purpose.

Persistence & Privilege

The skill does not request persistent system presence; always:false. It does write an output file and spawns a headless browser process while running, which is normal for this task. It does not modify other skills or system-wide configs.

What to consider before installing

This skill appears to do what it says (scrape a site's computed styles and output tokens), but there are operational and privacy details to check before installing: 1) The package omits runtime requirements — you need Node and the Puppeteer package (which typically downloads Chromium). Be prepared for that download or run in an environment where Puppeteer/Chromium are already available. 2) The extractor loads the target URL in a headless browser and inspects the DOM and styles; do not point it at private/internal sites or pages containing sensitive info unless you understand the privacy implications. 3) The script writes a JSON file (default /tmp/design-tokens.json); you may want to change the output path if running in a shared environment. 4) If you need higher assurance, request the author add a package.json with pinned dependencies or a documented install step, and remove the duplicate 'browser tool' + Puppeteer navigation in the workflow (currently both are used). If these operational issues are acceptable and you trust the source, the skill is usable; otherwise ask the publisher for clearer dependency and installation instructions before proceeding.

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).