技能库同步:另一台机的 2026-10-16 包 + element-picker 入包 + 工具归拢到技能级 assets/
product-planning(同步 26 改 65 新)
- 目录约定:docs/pm/<项目>/ ⇒ <工作区>/项目/<产品slug>/ 为产品根,下分 产品规划/ 与 产品原型/{designs,pages}
- ④段骨架六节 ⇒ 七节(新增「原型地址」;后两节改「页面导航」「原型状态取值」)
- ③段新增真机组件库;结案「源站只有暗色主题」,tokens.css(亮色)标为不可用于生产
- ③段改版规则反转为「一个产品只用一套原型、只留当前态」;②段新增 产品规划模板.md(表头唯一定义处)
- scripts:产品根定位重写(含 .registry/current-project 指针),新增 check_terms.py 与 selftest_product_root.py
session-mechanism(同步 3 改 2 新)
- references/06-技能优化规程.md 新增 §5「要求落在生成时看得见的面上」,总表 16 ⇒ 17 条;SKILL.md 同步
- scripts/collabctl.py 取回 _find_board() 候选定位(旧版写死 scripts/board.py,而看板已搬进 boards/会话看板/ ⇒ 旧版本就是坏的)
element-picker(新装)
- 按用户口径作「独立功能加入 product-planning」,非独立全局技能
- 修掉它自身三处路径漂移(技能根写法 ⇒ 同目录;README 两处旧落点;剪贴板示例文案与代码对齐)
工具归拢到技能级 assets/
- diagram-design / design-capture / element-picker / video-capture 从各段 assets/ 移到技能包 assets/
- 新增红线:本包有两处 assets/(技能级工具箱 vs 段内资产),引工具一律写「技能级 assets/<工具名>/」
- 路径口径由两类改三类(技能级工具箱 / 本段自带资产 / 同根技能)
不入库(磁盘保留)
- design-system-tiaoyue 整个目录(用户 2026-10-16 令):git rm -r --cached + .gitignore,理由=14 MB 且可 CDP 重采;
已在 ③段 SKILL.md 注明「取仓后这一层是空的属正常,用自带套需另取或重采」
- element-picker 的运行期存档 marks/(服务自己会建目录)
This commit is contained in:
1 parent
749c0e3d5d
commit
8160f91559
336 files changed
+12821
-6621
No files matched your search
@@ -0,0 +1,47 @@
|
||||
---
|
||||
name: design-capture
|
||||
description: ③段独立工具 —— 输入一个网站 URL,抓取它的设计风格与组件样板,生成一套可直接选用的样式模板(design-system-<名>/,与 design-system-tiaoyue 同构)。当用户说「获取 XXX 网站的设计风格」「抓一下这个网站的风格/配色/字体/组件」「按某网站风格新建一套样式」「把某个网页变成设计系统」时调用。
|
||||
agent_created: true
|
||||
---
|
||||
|
||||
# design-capture · 网站设计风格抓取(③段独立工具)
|
||||
|
||||
把「一个网址」变成「一套可选样式模板」:抓源站 → 落原始设计系统 → 生成 `design-system-<名>/` 模板包(与 `assets/design-systems/design-system-tiaoyue/` 同构),随后可被 D1 定调当普通样式套用。
|
||||
|
||||
## 一、什么时候用
|
||||
|
||||
- 用户说「**获取 XXX 网站的设计风格**」「抓这个网站的配色/字号/组件」「按这个网站新建一套样式」。
|
||||
- ③段 D1 定调时,现有 `assets/design-systems/` 里没有合适的套 → 从某个标杆网站**现场新建一套**。
|
||||
|
||||
## 二、怎么用(两步)
|
||||
|
||||
第一步 · 抓取(本机 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 选用)
|
||||
把生成目录整体放进 `assets/design-systems/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`。
|
||||
Reference in new issue
Block a user