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

• Primitive tokens
• Semantic tokens
• Background / atmosphere system
• Decorative motif system
• Component archetypes
• Interaction rules
• 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