admin
8160f91559
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/（服务自己会建目录）
4.6 KiB
4.6 KiB
name, description, version, updated_at, agent_created
| name | description | version | updated_at | agent_created |
|---|---|---|---|---|
| element-picker | ③段独立工具 —— 在浏览器里点选任意组件，取出它的 CSS 选择器与所属网页，复制给 AI 后可直接定位到源码改样式/改结构。两条路：① Chrome 扩展（装一次，任意网页可用，按 Z 或点胶囊进拾取模式）；② 页面注入（本地开发页加一行 script ＋ URL 带 ?pick）。点「确认」后剪贴板得到「选择器：… / 网页：…」两行，同时把完整上下文（文本 / class / 属性 / 尺寸 / 关键计算样式 / HTML 片段）落到 marks/_ui-marks.json。当用户说「选中这个组件」「把这个元素的位置给你」「改这个页面的样式」「这个按钮在哪」「点选元素」「取组件路径」「改界面」「调样式」时调用。 | 1.0 | 2026-10-16 | true |
element-picker · 页面元素拾取（③段独立工具）
把「页面上那个组件」变成「AI 能精确定位的坐标」—— 点一下，拿到它的选择器与所属网页，交给 AI 改代码。
一、什么时候用
- 用户说「选中这个组件」「把这个元素的位置给你」「改这个页面的样式」「这个按钮在哪」。
- 用户要改界面，但靠嘴说不清是哪一个（"左上角那个"、"第二张卡片"，讲不准）。
- 做完原型/页面后做局部微调，需要把改动点精确指出来。
二、两条路，按场景二选一
路 1 · Chrome 扩展（任意网页都能用）
装一次，之后每个页面都有拾取器。适合改线上页面、别人的网站、或不在本地开发的服务。
装法：chrome://extensions/ → 开发者模式 → 「加载已解压的扩展程序」→ 选本目录下的 chrome-extension/。
扩展目录变了（换机器、换路径）要重新加载一次。
用法：打开任意页面 → 右下角有半透明胶囊（拾取器已在）→ 按 Z、点胶囊、点扩展图标、或按 Alt+Shift+Z 进拾取模式 → 点元素 → 确认窗里点「确认」。
路 2 · 页面注入（本地开发页）
只给本地开发中的页面用。在页面 HTML 的 </body> 前加一行，访问时 URL 带 ?pick：
<script src="http://127.0.0.1:8890/picker.js"></script>
不带 ?pick 时脚本完全不碰页面，所以可以常留在开发页里。
三、点一下之后拿到什么
- 剪贴板两行，直接粘给 AI 即可：
选择器：div#recentScriptsList > button.recent-card:nth-of-type(3)
网页：短视频工作台
- 同时往
marks/_ui-marks.json追加一条完整上下文：选择器、祖先路径、元素文本、class 列表、data-*属性、位置尺寸、关键计算样式、outerHTML片段。选择器定位"在哪儿"，这份档案定位"是哪一个"。
四、服务怎么起
扩展与注入脚本都要连本地服务（可选 —— 不连也能复制，只是少一份存档）：
node ui-picker-server.js 8890
端点：GET /picker.js、POST /mark、GET /marks、POST /clear、GET /health。零依赖，只用 Node 标准库。
五、选择器的准确边界
- 选择器描述的是元素在 DOM 里的位置（标签 ＋ class ＋ 第几个），不是它的身份。生成时会自校验「是否恰好只命中这一个」，不通过就退到每一级都带
:nth-of-type的完整树路径。 - 动态列表增删或换序之后，同一条选择器可能落到别的条目上 —— 所以它是"此刻的点位"，不是长期坐标。
- 真正落到源码的路径是：从选择器里读 class 名 → 去项目源码里反查是哪段模板渲染的 → 用存档里的文本/属性/HTML 片段交叉确认。
六、铁律
1、默认不激活。拾取模式会接管页面点击，所以扩展在每个页面只挂一个半透明胶囊，等用户按 Z 或点它才进拾取模式；退出后页面点击立刻恢复正常。
2、只落本地。不上传任何数据，不调外部接口；存档只写在技能目录下的 marks/ 里。
3、页内按键：Z 进/出拾取模式，Esc 有弹窗先关弹窗、没弹窗就退出拾取模式，Ctrl+Enter 等同确认窗的「确认」。
4、浏览器内部页面注入不了（chrome://、扩展商店、其它浏览器内部页），这些页面按 Z 不会有反应，属正常。
七、改代码怎么生效
- 注入版：改完脚本刷新页面即可（响应头带
no-store，不吃缓存）。 - 扩展版：改完在
chrome://extensions/点本扩展卡片的刷新（⟳），再刷新目标页面。不需要重新「加载已解压的扩展程序」。