---
name: design-capture
description: ③段独立工具 —— 输入一个网站 URL，抓取它的设计风格与组件样板，生成一套可直接选用的样式模板（design-system-<名>/，与 design-system-tiaoyue 同构）。当用户说「获取 XXX 网站的设计风格」「抓一下这个网站的风格/配色/字体/组件」「按某网站风格新建一套样式」「把某个网页变成设计系统」时调用。
agent_created: true
---

# design-capture · 网站设计风格抓取（③段独立工具）

把「一个网址」变成「一套可选样式模板」：抓源站 → 落原始设计系统 → 生成 `design-system-<名>/` 模板包（与③段**样式套目录**里那套 `design-system-tiaoyue` 同构），随后可被 D1 定调当普通样式套用。

## 一、什么时候用

- 用户说「**获取 XXX 网站的设计风格**」「抓这个网站的配色/字号/组件」「按这个网站新建一套样式」。
- ③段 D1 定调时，现有**样式套目录**（落点见本技能 `references/manifest.md` 的「样式套目录」行）里没有合适的套 → 从某个标杆网站**现场新建一套**。

## 二、怎么用（两步）

第一步 · 抓取（本机 Chrome + CDP，零其他依赖）
```
node scripts/capture_design_system.mjs --url https://example.com --out raw.json
```
- 前置：本机有可连的 Chrome 远程调试端口；没有就先起一个：
  `chrome.exe --remote-debugging-port=9333 --user-data-dir=<临时目录> about:blank`
- 产出 `raw.json`：含 `html`（设计系统 HTML）、`data`（结构化：palette/typography/assets/components/layout）、`resources`。

第二步 · 生成样式模板包
```
python scripts/build_style_package.py --raw raw.json --out ./design-system-<名> --name "<样式名>"
```
- 可选暗色：`--dark-raw dark.json`（另跑一次暗色采集再并入）。
- 产出：`SKILL.md` ＋ `assets/tokens.css`（＋`tokens-dark.css`）＋ `assets/brand.json` ＋ `references/{components.md,library.json,design-system.html,capture-notes.md}`。

第三步 · 装进样式库（供 D1 选用）
把生成目录整体放进**样式套目录**（落点见本技能 `references/manifest.md` 的「样式套目录」行）下的 `design-system-<名>/`，即成为可选样式；③段 D1 定调时与 open-design 的套**同权，每次只选一套**。

## 三、边界（如实登记）

- ⛔ 不依赖 open-design daemon：抽取脚本已搬进 `vendor/`，只连本机 Chrome。
- ⛔ 不抓登录墙后 / 需交互才出现的内容：抓的是「页面上可见的样式」。
- ⛔ 跨域样式表若禁止读取，其规则不进统计。
- 组件是「每类一个代表性样本」（button/input/card/nav），不是全站枚举。
- 暗色：默认只抓亮色；要暗色须对暗色形态另跑一次（`--dark-raw`）。
- 抓取质量取决于源站；生成后应**目视比对**再采用。

## 四、归属

`vendor/brand-capture.js` 搬运自 open-design clipper（Apache-2.0），细节与改造见 `ATTRIBUTION.md`。