定制Drawbridge工作流：修改drawbridge-workflow.md打造你的专属AI前端助手-开发者社区

【免费下载链接】drawbridge

Design 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 是一款面向 Claude Code 和 Cursor 的浏览器视觉标注工具：你在网页上像用 Figma 一样点选元素并留下注释，这些"设计评论"会直接变成发给 AI 编程助手的提示词，让 AI 按你的要求修改前端代码。而真正决定 AI 如何干活的核心，就是项目里那份名为drawbridge-workflow.md的工作流文件。本文带你了解如何修改 drawbridge-workflow.md，为 Drawbridge 定制一套贴合自己项目规范的 AI 前端助手，让bridge一条命令就能按你的标准批量改样式。

Drawbridge 是如何工作的？

先用 30 秒理解整个链路，你才会知道改哪里最有效：

浏览器标注：安装 Drawbridge 的 Chrome 扩展后，在任意本地页面按C进入评论模式，点击元素输入"把这个按钮变蓝"之类的注释；
写入任务文件：扩展会把注释连同 CSS 选择器、截图一起写入项目里的.moat/目录（moat-tasks.md+moat-tasks-detail.json）；
AI 处理：在 Cursor 或 Claude Code 中执行bridge命令，AI 读取任务，按照drawbridge-workflow.md中定义的行为规范逐一实现修改。

也就是说：扩展负责"输入"，而drawbridge-workflow.md负责"规则"。它是 AI 的"大脑"——默认版本已经内置了状态生命周期、依赖分析、批量调用等一整套严谨规则，但完全允许你按自己的项目风格增删。

默认模板就放在仓库的模板目录里，连接项目时会被自动部署：

完整工作流规则：drawbridge-workflow.md
Claude Code 的/bridge命令模板：bridge.md
目录说明文档：README.md

找到你的 drawbridge-workflow.md

当 Drawbridge 连接到某个项目目录后，drawbridge-workflow.md会被写入该项目根目录。它由三部分构成：

区域	内容	是否建议定制
Frontmatter（文件头）	`description`、`globs`、`alwaysApply`等元信息	一般不改
Critical Workflow Requirements	状态生命周期`to do → doing → done`、批量工具调用规则	⚠️ 谨慎修改
Processing Modes	Step / Batch / YOLO 三种处理模式与默认选择逻辑	✅ 推荐定制
Shared Infrastructure & Standards	截图路径解析、状态文件管理、框架识别、实现标准	✅ 推荐定制
UI Change Pattern Library	"变蓝""居中""加阴影"等常见需求的实现套路	✅ 最推荐定制

一个容易忽略的细节：JSON 里的截图路径是相对路径./screenshots/...，真实文件在.moat/screenshots/下，模板里内置了路径解析逻辑（见 drawbridge-workflow.md），定制时不要破坏这段规则。

4个实用定制技巧

技巧1：调整默认处理模式

Drawbridge 提供三种处理模式：

Step（逐条审批，最安全）——默认模式
Batch（相关任务分组批量处理）
YOLO（全自动一口气跑完，需明确指定）

默认模板规定"YOLO 绝不会被自动选中"（见 drawbridge-workflow.md）。如果你是资深用户、任务量又大，可以把自动选择 Batch 的门槛从"6 个以上任务"改低，或调整 Step 的触发条件。反过来，如果是新手，可以把 Step 的条件写得更宽，让 AI 更频繁地停下来等你确认。

执行时依然可以用命令显式指定模式：

step bridge # 逐条处理 batch bridge # 分组处理 yolo bridge # 全自动处理

技巧2：把你的设计令牌（Design Tokens）写进去

这是性价比最高的定制点。模板的"UI Change Pattern Library"部分教 AI 如何把口语需求翻译成代码，比如"make this blue"会先找var(--color-brand-blue)这类令牌（见 drawbridge-workflow.md）。

你可以直接把自己项目的真实令牌名替换进去，例如：

颜色令牌：--db-primary、--db-success、--db-gray-500；间距令牌：--space-1到--space-8，最小单位 0.25rem；阴影令牌：--shadow-sm、--shadow-md。

这样 AI 生成的样式会直接复用你的设计系统，而不是随手写死#3B82F6之类的裸色值，代码质量立刻上一个台阶。

技巧3：定制实现标准与框架适配

模板内置了 React / Vue / Svelte / 原生 HTML 四套文件查找与实现模式（见 drawbridge-workflow.md）。如果你的项目技术栈单一，可以只保留相关部分，并补充项目特有约定，例如：

"本项目所有组件放在src/components/，全局样式统一改src/styles/globals.css"
"禁止使用内联样式，一律走 CSS Modules"
"修改后必须保证npm run lint通过"

这类"项目私有知识"正是默认模板无法覆盖、最需要你自己补充的内容。

技巧4：修改任务播报模板

默认模板要求 AI 用固定格式播报每个任务（🎯 任务号、📍 选择器、📸 截图状态，见 drawbridge-workflow.md）。你可以把它改成更简洁的一行式，或加入自己关心的字段，比如目标文件路径、预估改动行数。只要保持"状态流转可追踪"这一核心，格式如何设计完全由你决定。

定制时请守住这几条底线

保留状态生命周期：to do → doing → done的状态机和批量更新规则（drawbridge-workflow.md）是扩展与 AI 同步任务进度的基础，删掉它任务勾选就会不同步；
保留截图路径解析逻辑：否则 AI 找不到.moat/screenshots/里的标注截图，视觉上下文就断了；
保留并发更新容忍：扩展可能自动同步任务文件，模板明确要求 AI"遇到已更新的文件要知会并继续，而不是报错"（drawbridge-workflow.md）。

修改后如果 AI 表现异常，最简单的回滚办法是断开项目、删除根目录的drawbridge-workflow.md，再重新连接，扩展会用 rules-templates 里的原始模板重新部署。

常见问题速查

现象	原因与处理
AI 说找不到任务	浏览器重启后连接失效，按`Ctrl/Cmd+Shift+P`重新选择项目目录
任务卡在`doing`状态	检查你删改 workflow 时是否破坏了状态流转章节
想跳过审核全速跑	显式执行`yolo bridge`，跑完检查`moat-tasks.md`中的失败项
注释写得含糊导致改错	遵循"一次注释一个改动"的原则，见 rules-templates/README.md 的最佳实践

总结

drawbridge-workflow.md是 Drawbridge 的"灵魂文件"：扩展负责采集视觉标注，而这份 markdown 决定了 AI 用什么模式、什么标准、什么格式去改代码。记住三个定制优先级——先填设计令牌，再补项目约定，最后调处理模式，同时守住状态生命周期和截图解析两条底线。改完后执行一次bridge，你就能拥有一个真正懂你项目的专属 AI 前端助手。

更多细节可以参考项目总览 README.md、chrome-extension/README.md，以及仓库里现成的演示站点 demo/index.html——用它做你的第一个标注练习再合适不过。