Extract Design

当用户想要将网页的设计语言提取到可重用的 HTML 样式参考文件中时，请使用此技能，包括版式、颜色、间距、表面、组件、状态、主题、动作、代码块样式、背景氛围、装饰图案和艺术指导。输出应该是未来人工智能生成页面的通用样式样本 HTML，而不是原始页面的 1:1 副本。提取的样式文件将保存到技能自己的“assets/theme/”目录中，而不是保存到用户的项目中。

# 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:

```javascript
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: f