【免费下载链接】drawbridgeDesign editor for Claude Code and Cursor. Figma Comments for the browser, are sent directly to Claude Code and Cursor as prompts.项目地址https://gitcode.com/gh_mirrors/drawbridge1/drawbridge点击查看免费下载Drawbridge 是一款浏览器视觉标注工具让你像写 Figma 评论一样把网页上的 UI 批注直接发送给 Claude Code 和 Cursor。它的核心能力之一——任务依赖检测——能自动识别把按钮变蓝和移动那个蓝按钮之间的先后关系并让 AI 按正确的智能排序顺序执行修改。今天就来拆解这套机制是如何工作的。为什么需要任务依赖检测想象你连续在同一个按钮上留下两条批注任务 1把按钮变蓝任务 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文本寻找四类引用信号信号类型示例含义代词引用that button、this element、it指向之前提到的元素描述性引用the blue button、the updated header指向某个已被修改过的元素位置引用the button above、the left sidebar通过位置锁定目标颜色/样式引用the red text、the shadowed box通过外观特征锁定目标此外还有顺序指示词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.md1. 回溯引用Backward Reference——任务引用了前面任务的产出这是正常的依赖关系Task 2: Make button blue Task 5: Move that blue button → Task 5 依赖 Task 22. 正向引用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。实战步骤从批注到智能排序安装扩展并连接本地项目目录详见 README.md 的 Setup 部分在浏览器按C进入批注模式先点按钮留批注把按钮变蓝再点同一按钮留批注移动那个蓝按钮在 Cursor 运行bridgeClaude Code 中运行/bridgeAI 会先做依赖分析再按序执行在浏览器刷新查看结果 最佳实践一条批注只描述一个变更并让后续批注自然地引用前一步的产出如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 三种模式按序执行。理解了这套机制你就能写出依赖信号更明确、排序更精准的批注。赞分享【免费下载链接】drawbridgeDesign editor for Claude Code and Cursor. Figma Comments for the browser, are sent directly to Claude Code and Cursor as prompts.项目地址https://gitcode.com/gh_mirrors/drawbridge1/drawbridge点击查看免费下载相关推荐如何打造专属MacBook Pro触控栏从静态按钮到动态脚本按钮的完整指南如何打造专属MacBook Pro触控栏从静态按钮到动态脚本按钮的完整指南 MTMRMy TouchBar My Rules是一款强大的MacBook P桌面应用插件系统Varlet 按钮组件 Button 与 ButtonGroup 完全指南从 Material Design 形态到按钮组联动原理Varlet 按钮组件 Button 与 ButtonGroup 完全指南从 Material Design 形态到按钮组联动原理 本文以 Varlet基于UI组件前端Gepetto源码深度剖析理解插件生命周期与事件处理机制Gepetto源码深度剖析理解插件生命周期与事件处理机制 Gepetto是一款基于IDA Pro的插件它利用AI语言模型加速逆向工程流程。本文将深入剖析Ge人工智能AI 应用逆向工程上一篇Andrej Karpathy 编码指南提升企业级AI助手代码质量的最佳实践方案下一篇CefFlashBrowser让经典Flash内容在现代浏览器中重获新生创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考