用途：逆向分析网站的视觉系统、布局、组件、响应式行为、内容层级与交互状态，产出可直接用于实现的 design.md。
主要能力：支持仅 URL、仅截图、URL 加截图、多张截图等输入形态；按环境选择证据路径——项目已有 playwright 则用它，机器有 Chrome/Edge 则用 scripts/browser-extract.mjs（零依赖，Node ≥ 22），都没有则退源码路线并强制标注转录边界。源码与浏览器路线可叠加：源码给出定义了哪些令牌，浏览器给出哪些真正在用。
使用方式：先探环境再选路线；打开用户提供的准确 URL，记录最终 URL、标题、视口、采集时间与页面状态；按视觉顺序识别区域，读取代表性元素的计算样式，统计重复组件，只记录已观察到的交互状态。起草前阅读 references/design-md-template.md，写入用户指定目录的 design.md，未指定则写当前项目，且不覆盖已有 design.md，改为 design-extracted.md。若 docs/product/ 存在对应产品体验基线，需增加产品基线映射并标记冲突。
证据标签：[OBSERVED: URL]、[OBSERVED: SCREENSHOT]、[INFERRED]、[UNKNOWN]。降级路线须在开头写证据边界，断点、悬停、焦点、空态、错误态一律标 UNKNOWN。交付前验证来源、日期、视口与证据类型，并检查中文乱码：grep -rnI $'\xef\xbf\xbd' <design.md 所在目录>。
适用场景：复刻、设计系统文档、UI 实现简报。限制：无浏览器控制时拿不到计算样式、断点行为与截图；不得仅凭像素推断 HTML 语义、DOM 结构、精确字体文件或未展示交互；不得仅凭视觉检查声称符合 WCAG；用户未提供 URL 或图片时应要求其提供。