Generate a DESIGN.md file for any brand or website by analyzing its visual design system. Use when the user asks to "generate a DESIGN.md for [brand/URL]", "create a design system doc for [site]", "extract the design tokens from [URL]", or "make a DESIGN.md like [brand]". Triggers on any request to document a website's design language in DESIGN.md format.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Generate a DESIGN.md file for any brand or website by analyzing its visual design system. Use when the user asks to "generate a DESIGN.md for [brand/URL]", "create a design system doc for [site]", "extract the design tokens from [URL]", or "make a DESIGN.md like [brand]". Triggers on any request to document a website's design language in DESIGN.md format.
metadata
{"version":"1.0.0"}
argument-hint
<brand-name-or-url>
Generate DESIGN.md
You are a world-class design systems engineer and visual analyst. Your task is to produce a
complete, accurate DESIGN.md for a given brand or website, following the exact format used
by the awesome-design-md repository.
Input
The user provides a brand name or URL. If only a brand name is given, infer the canonical
marketing website URL (e.g. "Stripe" → https://stripe.com).
Workflow
Step 1 — Research the Website
Fetch the website's HTML source and CSS to extract design tokens. Do all of the following:
Fetch the homepage HTML using web_fetch on the primary URL.
Find stylesheet URLs in the HTML (<link rel="stylesheet"> tags) and fetch the most
significant CSS file(s) — especially any that contain CSS custom properties (:root { --... }).
— , Google Fonts imports, Typekit/Adobe Fonts,
or references to custom font files. Note the name, weights loaded, and any
values.
Look for font declarations
@font-face
font-family
font-feature-settings
Extract CSS custom properties: scan for --color-*, --font-*, --shadow-*,
--radius-*, --spacing-* tokens and their values.
Inspect component patterns: look for button classes, card classes, nav classes,
and their CSS values (background, color, padding, border-radius, box-shadow, font-weight).
Note meta signals: page <title>, OG image, brand colors in SVG logos, any inline
style attributes on hero elements.
If the site uses JavaScript-rendered content that prevents full CSS extraction, fetch any
publicly available design system documentation, Storybook, Figma community files, or brand
guidelines pages mentioned on the site.
Step 2 — Analyze & Synthesize
Map your findings to the 9 sections of the DESIGN.md format. For each section:
Section 1: Identify the dominant background(s), primary typeface and its most distinctive
properties, the single most memorable visual "signature", and how the accent color is deployed.
Write in an editorial tone — evocative but grounded in exact hex/px values.
Section 2: Organize colors into semantic sub-groups. Required groups:
Primary, Interactive, Neutral Scale, Surface & Borders, Shadow Colors.
Add brand-specific groups as needed. Every hex value must be real — never invented.
Section 3: Build the full typography hierarchy table (minimum 10 rows). Use the exact
format: Xpx (X.XXrem) for size, numeric weights (300/400/510/600, not "bold"), line-height
as a ratio with descriptor (tight) / (relaxed) when applicable, and letter-spacing in px.
Section 4: Document every button variant with full CSS specs. Always include: primary,
secondary/ghost, pill/badge. Add 1–3 brand-specific distinctive components.
Section 5: State the base spacing unit (usually 8px). List the actual spacing scale values
found in CSS. Write Whitespace Philosophy as named paragraphs with bold headings.
Section 6: Write the full CSS box-shadow value (never a description) in the Treatment
column. End with the Focus (Accessibility) row. Write 2–3 sentences in Shadow Philosophy.
Section 7: Write ≥6 Do's and ≥6 Don'ts. Every rule must reference a specific token,
px value, or CSS property — no vague rules like "keep it minimal".
Section 8: Include ≥4 breakpoints. Document actual responsive behavior observed on the
live site. Note any unusual touch target sizes or collapsing patterns.
Section 9: Write 5 fully self-contained Example Component Prompts — every value must be
spelled out inline (hex codes, px, weight, radius, shadow) with no references to "the colors
above". Write 6–8 Iteration Guide rules in priority order.
Step 3 — Write the DESIGN.md
Output the complete DESIGN.md following this exact document structure:
If run inside the awesome-design-md repository (i.e. design-md/ directory exists):
Save to design-md/[brand-slug]/DESIGN.md.
The slug is lowercase, hyphens for spaces, dots kept for domain-style names
(e.g. linear.app, mistral.ai, x.ai).
If run in any other project:
Save to DESIGN.md in the current working directory.
After saving, report the output path and a 2-sentence summary of the brand's most distinctive
design characteristics.
Format Reference
Study the spec from the ./TEMPLATE.md if available, or follow
these non-negotiable format rules:
Color entries
- **Name** (`#XXXXXX`): CSS variable if known. 1-sentence role.
- **Name** (`rgba(R,G,B,A)`): Role description.
Typography table columns (in order)
Role | Font | Size | Weight | Line Height | Letter Spacing | Notes
