企业官网建设流程全解析

Drawbridge 是一款浏览器视觉标注工具，让你像写 Figma 评论一样，把网页上的 UI 批注直接发送给 Claude Code 和 Cursor。它的核心能力之一——任务依赖检测——能自动识别"把按钮变蓝"和"移动那个蓝按钮"之间的先后关系，并让 AI 按正确的智能排序顺序执行修改。今天就来拆解这套机制是如何工作的。

为什么需要任务依赖检测？

想象你连续在同一个按钮上留下两条批注：

1. 任务 1："把按钮变蓝"
2. 任务 2："移动那个蓝按钮"

如果 AI 按提交顺序或倒序乱序执行，任务 2 描述的"蓝按钮"根本还不存在，改动就会落空。Drawbridge 的做法是：在动手改代码之前，先让 AI 通读全部批注，找出任务之间的引用关系，构建出一条依赖链，再按链上的顺序执行。

这套逻辑的完整规则定义在 AI 工作流规则文件 drawbridge-workflow.md 中，/bridge命令模板 bridge.md 里也重复强调了这一步。

依赖检测的数据来源

依赖检测不是"凭空猜"，而是基于扩展写出的结构化任务数据。每条批注都会被 taskStore.js 组织成一条任务记录，核心字段包括：

• comment：你的原始批注文本（依赖检测的主要分析对象）
• selector：目标元素的 CSS 选择器
• screenshotPath：批注时的截图路径，提供视觉上下文
• status：任务状态，遵循to do → doing → done生命周期

这些数据保存在项目的.moat/moat-tasks-detail.json（机器可读）和.moat/moat-tasks.md（人类可读清单，由 markdownGenerator.js 自动生成）中。目录结构详见 ARCHITECTURE.md。

四类引用信号：AI 如何识别任务关系

加载完所有任务后，AI 会逐条检查comment文本，寻找四类"引用信号"：

此外还有顺序指示词：after、then、once，以及"the [形容词] [元素]"这种句式，都是强依赖信号。

🧠 一个典型的分析过程（摘自工作流规则）：

Task 1: "Make this button blue" → 产出：蓝按钮 Task 2: "Move that blue button right" → 依赖 Task 1（引用了"蓝按钮"） Task 3: "Add shadow to the blue button" → 依赖 Task 1（引用了"蓝按钮"） 结论：Task 1 必须先于 Task 2、3 完成

三种依赖形态：回溯、正向与循环

识别出引用后，AI 会进一步判断依赖的"方向"，规则同样来自 drawbridge-workflow.md：

1. 回溯引用（Backward Reference）——任务引用了前面任务的产出，这是正常的依赖关系：

Task 2: "Make button blue" Task 5: "Move that blue button" → Task 5 依赖 Task 2

2. 正向引用（Forward Reference）——任务引用了一个尚不存在的状态，会被标记为潜在依赖问题：

Task 5: "Move the blue button" 但此前没有任何任务把按钮变蓝 → 标记为潜在依赖问题，请用户确认

3. 循环依赖（Circular Dependency）——两个任务互相引用，构成不可能完成的序列：

Task 1: "Move the centered button" Task 2: "Center the moved button" → 标记为循环依赖

最终，所有任务会被归入三种组态：独立任务（无引用，任意顺序）、依赖链（A → B → C，必须串行）、并行依赖（B 和 C 都依赖 A，则 A 先做，B、C 随后一起处理）。

依赖链如何驱动三种处理模式

智能排序的结果会直接喂给 Drawbridge 的三种处理模式（step/batch/yolo bridge），它们对依赖的处理方式不同：

• Step 模式（默认）：逐个执行，依赖未满足的任务会被跳过，并主动向用户播报依赖关系
• Batch 模式：按依赖链分组，同一链内按序处理，每组只需一次确认
• YOLO 模式：开始前先对所有任务做依赖排序，然后不中断地按序执行全部任务

在 Step 模式下，你还能在标准播报模板里看到依赖状态，例如：

🎯 Task 3: "Move that blue button to the right" 📍 button.cta-primary 📸 ✅ Loaded ⚙️ Dependency: Task 2 (blue button styling) - ✅ Satisfied

⚙️ Dependency这一行就是依赖检测结果对用户可见的体现——你可以清楚地看到 AI 先做了哪个任务、当前任务的前置条件是否已满足（模板定义见 drawbridge-workflow.md）。

实战步骤：从批注到智能排序

1. 安装扩展并连接本地项目目录（详见 README.md 的 Setup 部分）
2. 在浏览器按C进入批注模式，先点按钮留批注"把按钮变蓝"
3. 再点同一按钮留批注"移动那个蓝按钮"
4. 在 Cursor 运行bridge（Claude Code 中运行/bridge），AI 会先做依赖分析，再按序执行
5. 在浏览器刷新查看结果

💡 最佳实践：一条批注只描述一个变更，并让后续批注自然地引用前一步的产出（如"the blue button"），依赖信号越强，AI 的排序就越准确。

相关文件导航

• 依赖检测核心规则：chrome-extension/rules-templates/drawbridge-workflow.md
• /bridge命令模板：chrome-extension/rules-templates/bridge.md
• 任务数据结构：chrome-extension/utils/taskStore.js
• 任务清单生成器：chrome-extension/utils/markdownGenerator.js
• 系统架构说明：chrome-extension/ARCHITECTURE.md

小结：Drawbridge 的任务依赖检测本质上是一次"语义分析 + 拓扑排序"——用四类引用信号和三种依赖形态，把散乱的浏览器批注组织成有序的依赖链，再交给 Step / Batch / YOLO 三种模式按序执行。理解了这套机制，你就能写出依赖信号更明确、排序更精准的批注。