‏Drawbridge؛ کامنت بصری روی اپ برای ابزارهای کدنویسی AI

Drawbridge یه افزونهٔ کرومه که یه دردسر آشنای کار روی UI رو حل می‌کنه: این‌که ببینی یه چیزی تو ظاهر اپ ایراد داره ولی توضیح‌دادنش به ابزار کدنویسی سخت باشه. به گفتهٔ سازنده، Drawbridge می‌ذاره مستقیم روی اپ در حال اجرات کلیک کنی و کامنت‌های سبک Figma بذاری.

کاری که می‌کنه اینه: عناصر قابل‌دیدن UI رو annotate می‌کنی، یا برای باگ‌های چیدمان و فاصله‌گذاری که به یه گرهٔ DOM خاص وصل نیستن، مستطیل آزاد می‌کشی. کنار هر یادداشت هم دادهٔ سلکتور، context عنصر، bounding box و اسکرین‌شات ذخیره می‌شه.

محور اصلی ماجرا اینه که این یادداشت‌ها به فایل‌های محلی تو خودِ پروژه سینک می‌شن — یه Markdown خوانا و یه JSON ساختارمند — تا ابزار کدنویسی AI بتونه صف کار رو بخونه. Drawbridge برای Cursor، Claude Code، Codex و Windsurf ساخته شده و وضعیت هر تسک رو بین to do، doing و done ردگیری می‌کنه.

برای پردازش هم بعد از افزودن یادداشت‌ها، تو ابزار کدنویسیت دستور /bridge (یا bridge) رو اجرا می‌کنی. سه مُد داره: step bridge که تک‌تک تسک‌ها رو با تأیید پیش می‌بره، batch bridge که تسک‌های مرتبط رو گروه می‌کنه، و yolo bridge که همهٔ تسک‌های معلق رو خودگردان انجام می‌ده.

Drawbridge چند فایل هم توی پروژه می‌سازه، مثل .moat/moat-tasks.md (لیست تسک خوانا برای آدم)، .moat/moat-tasks-detail.json (دادهٔ ساختارمند برای پردازش AI) و فایل‌های ورک‌فلو مخصوص هر ابزار (مثل .claude/commands/bridge.md). لایسنسش هم سفارشیه: استفاده، کپی و تغییر برای مقاصد قانونی آزاده، ولی بازتوزیع یا عرضه به‌عنوان سرویس تجاری بدون لایسنس تجاری مجاز نیست.

نکات کلیدی:

• افزونهٔ کروم برای بازخورد بصری «مرورگر به کد»
• کلیک/کشیدن روی UI، کامنت سبک Figma و اسکرین‌شات + دادهٔ سلکتور و context
• تبدیل یادداشت‌ها به تسک محلی (Markdown خوانا + JSON ساختارمند)
• سازگار با Cursor، Claude Code، Codex و Windsurf از طریق دستور /bridge
• سه مُد پردازش: step، batch و yolo، با ردگیری وضعیت to do/doing/done