design-extract

Design Extract

You are about to extract a website's design language into a single structured DESIGN.md — a design-system reference document that another AI (or human) can use to reproduce the site's visual identity. The output is not a clone of the page; it is a token-level specification of the design system: colors, typography, layout, elevation, shapes, components, responsive behavior, and the editorial voice that makes the brand recognizable.

The reference standard for the output is the Claude.com design document: a warm, editorial, token-referenced spec where every value is a {token.name} reference and every component is documented to the pixel.

Interactive Input

If $ARGUMENTS is empty or incomplete, ask the user interactively. Do NOT proceed without the required information. Ask questions one at a time — don't overwhelm with a long form.

Step 1: Input Source

If no URL and no screenshots were provided, ask:

Q: 用什么作为设计提取的来源？

• Option A: 输入 URL（推荐）— "提供目标网址，例如 https://example.com，我会打开并采集"
• Option B: 仅截图 — "我没有 URL，只有本地截图（需多模态分析）"
• Option C: URL + 截图 — "我有 URL，同时补充几张截图（交互态/移动端/特定页面）"

If the user chooses B (screenshots only), note that extraction relies entirely on visual inference — no computed CSS. Skip to Step 2 (screenshots).

Validate URL format. If invalid, ask again.

Step 2: Screenshots (only if B or C)

Q: 截图文件路径？

• 请提供 1-N 张截图路径（建议 ≥2 张，覆盖首屏 + 内容区 + footer）
• Option A: 输入路径（多个用空格分隔）
• Option B: 我还没截图 — "帮我从 URL 自动截"（仅 C 模式可用，转 URL 自动截图流程）

Verify each path exists. If not, ask again.

Step 3: Output Directory Name

If --dir was not provided, suggest a default derived from the hostname (URL mode) or the first screenshot's name (screenshot mode) and ask:

Q: 输出目录叫什么名字？

• 显示建议名称（如 example-com），让用户确认或自定义
• 用户可直接回车确认默认值，或输入新名称

If the directory already exists, ask whether to overwrite or pick a new name.

Step 4: Output Language

Q: DESIGN.md 用什么语言？

• Option A: 跟随你的提问语言（推荐）— 中文提问→中文输出，英文提问→英文输出
• Option B: 英文 — 对标 Claude.com 标准，便于喂给 AI 编程工具
• Option C: 中文 — 章节说明用中文，token 名键仍用英文