Extract Design

Extract Design

Output Location

CRITICAL: All extracted style files MUST be saved to the skill's own assets/theme/ directory — never to the user's project directory, never to a relative path from the current working directory.

Before writing any output file, resolve the skill directory by running:

Glob pattern: **/skills/extract-design/SKILL.md

The directory containing that SKILL.md file is SKILL_DIR. All output goes under SKILL_DIR/assets/theme/.

Output files use the source domain or project name as a prefix:

SKILL_DIR/assets/theme/
├── {name}-style-manifest.json    # Structured style manifest
└── {name}-style-specimen.html    # Universal style specimen HTML

Examples (where SKILL_DIR is whatever path the Glob resolved):

• {SKILL_DIR}/assets/theme/ampcode-style-manifest.json
• {SKILL_DIR}/assets/theme/ampcode-style-specimen.html
• {SKILL_DIR}/assets/theme/vercel-style-manifest.json
• {SKILL_DIR}/assets/theme/vercel-style-specimen.html

Create the assets/theme/ directory if it does not exist before writing.

Reference Files

The references/ directory inside this skill contains two files you MUST use during every extraction. Both paths are relative to SKILL_DIR (resolved via Glob above):

• {SKILL_DIR}/references/extraction-checklist.md — comprehensive checklist for all extraction dimensions. Work through every section; note why if a dimension is not applicable.
• {SKILL_DIR}/references/style-specimen.html — structural template for Output C. Your generated specimen must follow the same structure.

WARNING: The template contains /* REPLACE */ placeholders for every CSS token value. You MUST replace ALL of them with values measured from the target site. Do NOT keep any placeholder value in the final output. A /* REPLACE */ in the output file means the extraction is incomplete.

When to use

Use this skill when the user wants to:

• 提取某个网页的视觉风格
• 让 AI 学习一个网站的设计语言并生成同风格页面
• 从网页中抽取字体、字号、字色、背景样式、图片背景、条纹/网格/纹理、动画、卡片样式、代码块样式
• 将网页风格沉淀为一个可复用的 HTML 参考文件
• 构建设计样张页 / style specimen / design reference file
• 将一个具体网页抽象成更通用的设计系统表达
• 抽取整页“氛围感 / atmosphere / art direction”，而不仅是组件样式

Do not use this skill if the user wants:

• 仅截图网页
• 仅复制页面 DOM 或下载页面资源
• 仅修复某个单独 CSS 问题
• 仅做像素级 1:1 复刻
• 仅导出 raw CSS dump

This skill is for style system extraction, not page cloning.

Core principle

Your task is not to reproduce the page structure.

Your task is to extract the page's visual system and represent it as:

1. Primitive tokens
2. Semantic tokens
3. Background / atmosphere system
4. Decorative motif system
5. Component archetypes
6. Interaction rules
7. A universal style specimen HTML

The final result must be a general-purpose reference file that another AI can read and use to generate new pages in the same style.

Think in terms of:

• design tokens
• semantic roles
• theme layers
• background atmosphere
• decorative motifs
• component patterns
• state behavior
• motion language
• responsive rules
• art direction

Do not think in terms of:

• copying all classes
• mirroring page DOM
• dumping raw CSS blindly
• preserving irrelevant content text
• flattening atmospheric styling into a single background color

The goal is:

Preserve not only the component language, but also the page atmosphere, decorative motifs, and art direction. A faithful extraction must capture both system structure and visual mood.

Output contract

When using this skill, produce three outputs:

Output A — Extraction summary

A concise explanation of the extracted style system:

• overall design character
• typography system
• color system
• spacing/layout rhythm
• surface/elevation language
• background / atmosphere language
• decorative motifs
• motion language
• component family
• theme/responsive behavior
• extraction confidence
• limitations

Output B — Structured style manifest

A required machine-readable JSON file saved to {SKILL_DIR}/assets/theme/{name}-style-manifest.json, describing:

• meta
• primitives
• semantic tokens
• background system
• motifs
• themes
• motion tokens
• component archetypes
• responsive rules
• accessibility notes
• limitations

Output C — Universal style specimen HTML

A single HTML file containing:

• CSS tokens
• theme layers
• background/atmosphere layers
• motif samples
• component styles
• specimen sections
• a design manifest in <script type="application/json">
• optional minimal demo scripts for theme switching / state preview

This HTML file should be general and reusable.

Required extraction dimensions

You must extract the following categories.

1. Meta context

Capture:

• source URL if available
• page title
• capture time/context
• viewport size
• whether dark mode exists
• whether reduced motion behavior exists
• whether the page uses heavy canvas/WebGL/video-only visuals
• whether shadow DOM/custom elements are present
• whether the extraction is from live render or static code

2. Typography

Extract:

• primary font family
• fallback stack
• mono/code font family
• font weights
• size scale
• line heights
• letter spacing
• paragraph rhythm
• link styles
• prose/body styles
• heading hierarchy
• button/label/input text styles

Do not only report raw values. Abstract them into roles such as:

• --font-family-sans
• --font-family-mono
• --font-size-body
• --font-size-heading-lg
• --line-height-body
• --font-weight-semibold

3. Color system

Extract:

• page background
• surface/background layers
• card backgrounds
• overlay/scrim
• primary text
• secondary text
• inverse text
• muted text
• borders/dividers
• brand/accent colors
• interactive colors
• success/warning/error/info
• code block background and syntax colors
• gradients
• translucent layers
• blur/frosted surface styles

Abstract colors into semantic roles, not just raw hex values.

Examples:

• --color-bg-page
• --color-surface-card
• --color-text-primary
• --color-text-secondary
• --color-border-default
• --color-brand-primary
• --color-code-bg

4. Spacing and layout

Extract:

• container widths
• grid behavior
• gutter
• section spacing
• component padding
• gap rhythm
• common stack spacing
• alignment preferences
• desktop/tablet/mobile changes

Abstract into spacing and layout tokens.

5. Surface / shape / elevation

Extract:

• border radius scale
• border treatments
• shadow scale
• backdrop blur
• surface layering
• z-index/elevation feel
• outline/focus ring style

Examples:

• --radius-sm
• --radius-card
• --shadow-sm
• --shadow-elevated
• --focus-ring

6. Motion / Animation

Extract motion and animation tokens:

Transitions (via computed styles):

• transition durations
• easing curves
• delays
• common hover motion
• transform language
• opacity motion

@keyframes animations (require direct stylesheet parsing):

• Each @keyframes rule must be captured separately — extract-styles.py does NOT capture these
• For each keyframe, record: name, semantic description, from/to/keyframe percentages, usage context

How to extract @keyframes — run {SKILL_DIR}/scripts/extract-keyframes.py or this browser console snippet:

const keyframes = [];
for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      if (rule.type === CSSRule.KEYFRAMES_RULE) {
        keyframes.push({ name: rule.name, cssText: rule.cssText });
      }
    }
  } catch(e) { /* CORS restriction, skip */ }
}
console.log(JSON.stringify(keyframes, null, 2));

Abstract into motion tokens:

• --motion-duration-fast, --motion-duration-normal
• --motion-ease-standard, --motion-ease-emphasized

Animation archetypes to look for:

• Modal/drawer: scaleIn, scaleOut, enterFromRight/Left
• Accordion: accordion-down/up
• Pattern: slidePattern (background pattern drift)
• Loading: spin, pulse, shimmer, progress-slide
• Reveal: fadeIn, slideUp, enter
• Hover: subtle scale, lift, glow

7. Component archetypes

Extract reusable component families rather than page-specific instances.

At minimum inspect:

• page/container sections
• nav/header/footer
• buttons
• links
• cards
• badges/tags/chips
• inputs/textareas/selects
• switches/checkboxes/radios
• tabs/accordions
• tables
• alerts/callouts
• modals/drawers/popovers/tooltips
• lists/media rows
• empty states
• stat cards
• code blocks
• inline code
• toasts/skeletons if present

For each component archetype record:

• structure/slots
• visual DNA
• spacing
• radius
• border/shadow
• default state
• hover
• focus-visible
• active
• selected
• disabled
• loading
• theme variants
• compact/comfortable variants if visible

8. Code block system

This is mandatory if code blocks exist or may matter later.

Extract:

• code font
• code size
• line height
• block background
• border/radius
• padding
• title bar / filename strip
• line-number style
• inline code style
• syntax color family
• copy button / toolbar style
• highlighted line style

9. Responsive and theme rules

Capture:

• breakpoints
• type scaling across breakpoints
• spacing changes across breakpoints
• layout collapse/stack behavior
• theme variants
• dark mode
• reduced motion handling
• print behavior if visible or inferable

10. Atmosphere / Background System

Extract the page-level and section-level visual atmosphere, not only flat background colors.

You must inspect and abstract:

• page background color
• section background color
• hero background treatments
• gradients (linear / radial / conic)
• repeating patterns (stripes / grid / dots / lines / checker / mesh)
• image-based backgrounds
• SVG decorative backgrounds
• noise / grain / texture overlays
• glow / blur / vignette / spotlight effects
• background blend / mask / filter usage
• pseudo-element decorative layers (::before, ::after)
• absolutely positioned decorative elements
• floating blobs / glow shapes / ambient lights
• background repeat / size / position / attachment
• section separators / dividers that contribute to overall mood
• whether the site atmosphere is flat / textured / editorial / futuristic / industrial / terminal-like / soft / playful

Do not flatten atmospheric styling into a single background-color. Always model it as a distinct system.

Examples of useful semantic outputs:

• --bg-page-base
• --bg-page-overlay
• --bg-page-pattern
• --bg-hero-gradient
• --bg-section-muted
• --pattern-stripe-color
• --pattern-grid-color
• --texture-noise-opacity
• --ambient-glow-primary
• --ambient-glow-blur
• --decorative-line-opacity

11. Decorative Motif System

Extract repeated visual motifs that may appear in only a few places but clearly shape the site’s identity.

You must inspect and abstract:

• diagonal stripes
• grids
• dotted fields
• editorial rules/lines
• terminal scan lines
• waveform / chart-like lines
• geometric accents
• glow shapes
• border corner treatments
• repeated iconography
• signature hover textures
• signature pattern movement
• recurring mask or clipping styles
• recurring pseudo-element decorations

A motif may originate in one component but still represent page-level visual DNA. Elevate it when appropriate.

Useful outputs include:

• motifs.diagonal-stripe
• motifs.gridline
• motifs.editorial-rule
• motifs.noise-overlay
• motifs.ambient-glow
• motifs.scanline

Extraction method

Rule 1: Prefer rendered reality over source intent

Use the final rendered/computed result as the ground truth.

Prioritize:

• actual visible DOM
• computed styles
• pseudo elements
• measured layout
• live states
• effective animations

Do not rely solely on authored CSS.

Mandatory computed style checks — before recording any token value, use browser tools to read the actual computed value. Do not infer from class names, design system conventions, or framework patterns. Specifically:

• Read document.documentElement.getAttribute('data-theme') to confirm the actual default theme on page load. Never assume dark-first or light-first from visual appearance alone.
• Read CSS custom properties via getComputedStyle(document.documentElement).getPropertyValue('--var-name') to get exact values.
• Read computed colors via getComputedStyle(el).backgroundColor, .color, .borderColor etc. — not from class names.
• Read computed transitions via getComputedStyle(el).transition to get the actual easing curve, not a generic approximation.
• Read background-image on all elements to detect patterns, gradients, and motifs.

If a value cannot be read via computed style (e.g. cross-origin stylesheet blocked, canvas-only visuals), you must label it as "inferred" in the manifest's limitations field. Do not silently use an approximated value as if it were measured.

Rule 2: Cluster before naming

Do not emit a token for every distinct observed value.

Instead:

1. collect raw values
2. group near-equivalent visual values
3. infer the system
4. assign semantic names

Example:

Bad:

• --blue-1
• --blue-2
• --blue-3
• --text-gray-7

Better:

• --color-brand-primary
• --color-link-default
• --color-link-hover
• --color-text-secondary

Rule 3: Extract semantic roles, not only raw values

A useful reference file must explain what a value does, not only what the value is.

Always try to map raw observations into roles.

Rule 4: Extract states actively

Do not assume the static DOM shows all relevant UI states.

For every component archetype in the manifest, you must record all of the following states:

• default
• hover
• focus-visible
• active
• selected
• disabled
• loading

If a state cannot be reliably observed, you must explicitly record it as "inferred" or "unavailable" — do not omit it silently. A missing state entry is not the same as an unavailable state.