[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-breschio--drawbridge":3,"tool-breschio--drawbridge":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",152630,2,"2026-04-12T23:33:54",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":78,"owner_email":77,"owner_twitter":77,"owner_website":79,"owner_url":80,"languages":81,"stars":94,"forks":95,"last_commit_at":96,"license":97,"difficulty_score":32,"env_os":98,"env_gpu":99,"env_ram":100,"env_deps":101,"category_tags":106,"github_topics":77,"view_count":32,"oss_zip_url":77,"oss_zip_packed_at":77,"status":17,"created_at":107,"updated_at":108,"faqs":109,"releases":140},7046,"breschio\u002Fdrawbridge","drawbridge","Design editor for Claude Code and Cursor. \"Figma Comments\" for the browser, are sent directly to Claude Code and Cursor as prompts.","Drawbridge 是一款专为前端开发设计的浏览器插件，旨在打通视觉反馈与代码实现之间的壁垒。它允许开发者在浏览器中像使用 Figma 评论功能一样，直接对网页元素进行点击标注或绘制矩形框选，并输入修改意见。这些可视化的注释会自动同步到本地的 Cursor 或 Claude Code 编辑器中，转化为结构化的开发任务。\n\n该工具主要解决了传统开发流程中“截图 - 描述 - 定位代码”的繁琐痛点。以往开发者需要手动截图并文字描述 UI 问题，现在只需在页面上圈选目标，AI 即可结合上下文理解意图并直接生成代码修改方案。通过简单的\"bridge\"命令，Drawbridge 能自动分析任务依赖关系，支持单步确认、批量处理或全自动执行等多种模式，大幅提升了迭代效率。\n\nDrawbridge 特别适合使用 Cursor 或 Claude Code 进行开发的前端工程师、全栈开发者以及需要频繁调整 UI 的设计师。其独特亮点在于将非结构化的视觉反馈（如鼠标圈选区域、DOM 元素定位）无缝转换为 AI 可执行的 Prompt，并维护本地任务状态文件（moat-tasks.md），让视觉修改建议能直","Drawbridge 是一款专为前端开发设计的浏览器插件，旨在打通视觉反馈与代码实现之间的壁垒。它允许开发者在浏览器中像使用 Figma 评论功能一样，直接对网页元素进行点击标注或绘制矩形框选，并输入修改意见。这些可视化的注释会自动同步到本地的 Cursor 或 Claude Code 编辑器中，转化为结构化的开发任务。\n\n该工具主要解决了传统开发流程中“截图 - 描述 - 定位代码”的繁琐痛点。以往开发者需要手动截图并文字描述 UI 问题，现在只需在页面上圈选目标，AI 即可结合上下文理解意图并直接生成代码修改方案。通过简单的\"bridge\"命令，Drawbridge 能自动分析任务依赖关系，支持单步确认、批量处理或全自动执行等多种模式，大幅提升了迭代效率。\n\nDrawbridge 特别适合使用 Cursor 或 Claude Code 进行开发的前端工程师、全栈开发者以及需要频繁调整 UI 的设计师。其独特亮点在于将非结构化的视觉反馈（如鼠标圈选区域、DOM 元素定位）无缝转换为 AI 可执行的 Prompt，并维护本地任务状态文件（moat-tasks.md），让视觉修改建议能直接驱动代码落地，实现了从“看图说话”到“自动编码”的流畅闭环。","Drawbridge - Visual annotations for Claude Code and Cursor\n==========================================\n\nMake comments in the browser (like in Figma) and send them to Claude Code and Cursor.  This chrome plugin + cursor ruleset connects your browser to your local development project. Comments made on the front end are batched into a markdown file. Run the command \"bridge\" to process them in Cursor. Simplify your workflow by adding more context to visual edits with Cursor.\n\n🚀 1. Setup\n-----------\n\n1.  Download or clone the Drawbridge to your desktop or location of choice\n\n2.  Go to chrome extensions, switch to dev mode, and unpack the extension drawbridge\u002Fchrome-extension\n\n3.  Activate the plugin\n\n4.  Pin it for easy access\n\n![db-open-extension](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_36f545dc3fea.png)\n\n\n💬 2. Connect your project\n-------------------\n\n1. Click the icon to open Drawbridge\n\n2. Click \"Connect\" to open your file browser\n\n3. Select the local project folder you want to work in\n\n4. Grant acess to Drawbridge to edit your file\n\n5. Drawbridge can now write to its moat-tasks.mdc and moat-task-detail.json files\n\n\n💬 3. Make Comments\n-------------------\n\n1.  Press `C` in your browser (or click the Tools dropdown → Comment), to turn your cursor into a pointer\n\n2.  Hover over your page to see selectable DOM elements you can leave comments on\n\n3.  Click an element to leave a comment, type your comment, hit `Submit` or press `Enter`\n\n4.  Tasks will be shown in the `Moat` area on the bottom of the page\n\n5. Tasks will also be synced to Cursor\n\n![db-comments-1](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_179b83bc0831.gif)\n\n\n📐 4. Draw Rectangles (Freeform Annotations)\n----------------------------------------------\n\n1.  Press `R` in your browser (or click the Tools dropdown → Rectangle), to enter rectangle drawing mode\n\n2.  Your cursor will change to a crosshair, indicating you're in drawing mode\n\n3.  Click and drag on the page to draw a rectangle around the area you want to annotate\n\n4.  Release the mouse button to finalize the rectangle - a comment box will appear at your cursor\n\n5.  Type your comment and hit `Submit` or press `Enter`\n\n6.  The rectangle coordinates and screenshot will be saved with your task\n\n**Keyboard Shortcuts:**\n- Press `C` to switch to Comment mode (pointer cursor)\n- Press `R` to switch to Rectangle mode (crosshair cursor)\n- Press `Esc` to exit either mode\n- You can toggle between modes with `C` and `R` before starting an interaction\n\n![db-rectangle-drawing](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_5cc0a6d6844c.gif)\n\n\n\n🤖 5. Process with AI\n-----------------------\n\nDrawbridge works with **Cursor** and **Claude Code**:\n\n### In Cursor\n\n1.  **Run Drawbridge**: In your editor, simply run the command:\n\n    ```\n    bridge\n    ```\n\n2.  **Drawbridge** will analyze your tasks, understand dependencies, and begin making edits.\n\n3.  **Approve**: By default, drawbridge processes tasks in **Step** mode - one at a time. You may be asked for approval:\n\n    1.  To begin the task\n\n    2.  To finish the task (updates the status in moat-tasks.md and moat-tasks-detail.json)\n\n4.  **Wait:** You can watch your tasks get updated in the **moat-tasks.md**\n\n5. IF you run into trouble with \"bridge\" simply be more explicit by saying \"use @drawbridge-workflow.mdc to process @moat-tasks.mdc\"\n\n![db-process-tasks](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_d8700443a015.png)\n\n### In Claude Code\n\n1.  **Run the slash command** (works in terminal or Cursor with Claude Code):\n\n    ```\n    \u002Fbridge\n    ```\n\n2.  **Choose mode**: Claude will ask for your preferred processing mode:\n    -   **step**: One task at a time with approval\n    -   **batch**: Group related tasks together\n    -   **yolo**: Process all tasks autonomously\n\n3.  **Automatic Setup**: The `\u002Fbridge` command is automatically deployed to `.claude\u002Fcommands\u002F` when you connect your project\n\n**Claude Code Features:**\n-   ✅ **Smart error messages** - Helpful guidance if tasks aren't found\n-   ✅ **File references** - Tasks include file paths for easy navigation\n-   ✅ **Screenshot support** - Visual context from browser annotations\n-   ✅ **Git-safe** - Automatically adds `.claude\u002F` and `.moat\u002F` to `.gitignore`\n-   ✅ **Status tracking** - Follows `\"to do\" → \"doing\" → \"done\"` lifecycle\n\n\n👩🏼‍🎨 6. Review your changes\n------------------------------\n\n1.  Go back to your browser to see your changes\n\n    1.  Should be automatic if you're using react \u002F next.js\n\n    2.  Refresh the page if you're using html \u002F css \u002F js\n\n2.  Continue making edits to refine your work!\n\n![db-tasks-complete](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_60d5cadd6efe.png)\n\n\n\n📁 Core Files\n-------------\n\n-   **`drawbridge-workflow.mdc`**: The main ruleset for the AI. This is where Drawbridge's \"brain\" is defined.\n\n-   **`moat-tasks.md`**: A human-readable list of your pending tasks.\n\n-   **`moat-tasks-detail.json`**: The raw, detailed data for each task, including selectors and screenshot paths.\n\n-   **`\u002Fscreenshots`**: Visual context for each annotation, used by the AI to understand your intent.\n\n\n🎯 Example Workflow\n-------------------\n\n1.  **Annotate**:\n\n    -   Click a button → \"make this green\".\n\n    -   Click the same button → \"add more padding\".\n\n2.  **Process**: In your editor, run `bridge`.\n\n3.  **AI Analyzes**:\n\n    ```\n    🤖 Dependency detected. Processing \"make this green\" before \"add more padding\".\n\n    ```\n\n4.  **Review**: The AI reviews your **moat-tasks-detail.json** for details of your comment.\n\n5.  **Approve**: You reply `yes`.\n\n6.  **Repeat**: The AI proceeds to the next dependent task.\n\n\n🛠️ Advanced Usage & Processing Modes\n-------------------------------------\n\nYou can control how Drawbridge processes tasks by specifying a mode.\n\n-   **`step bridge`** (Default: Safe & Incremental)\n\n    -   Processes tasks one by one, asking for approval at each step. Perfect for complex changes.\n\n-   **`batch bridge`** (Efficient & Grouped)\n\n    -   Intelligently groups related tasks (e.g., all button styles) and processes them together, asking for a single approval per batch.\n\n-   **`yolo bridge`** (Autonomous & Fast)\n\n    -   **Use with caution.** Processes *all* pending tasks in the correct dependency order *without stopping for approvals*. A full summary is provided at the end.\n\n\n🎨 Best Practices for Annotations\n---------------------------------\n\n-   **Be Specific**: \"change font to sans-serif\" is better than \"change font\".\n\n-   **Chain Your Thoughts**: For multi-step changes, create separate but related annotations. The AI is smart enough to understand the order.\n\n    -   *Good*: 1. \"make button blue\" → 2. \"add shadow to the blue button\"\n\n    -   *Bad*: 1. \"make button blue and add a shadow\"\n\n-   **Focus on One Thing**: One annotation should represent one distinct change.\n\n\n🐛 Troubleshooting\n------------------\n\n-   **\"Dependency Error\"**: This means tasks might be out of order. Check the AI's analysis to see the required sequence.\n\n-   **Task `failed` Status**: If a task fails (especially in `yolo` mode), check `moat-tasks.md`. You can reset its status to `pending` in the `.json` file to retry.\n\n-   **Connection Issues**: If Drawbridge can't find tasks, press `Cmd\u002FCtrl+Shift+P` in your browser and re-select your project directory to reconnect.\n\n**Happy building with Drawbridge!** 🎯\n\n📄 License\n----------\n\nThis project is licensed under a custom license. See the [LICENSE](LICENSE) file for details.\n\n**Key points:**\n- ✅ Free to use, copy, and modify for any lawful purpose\n- ❌ No redistribution, sublicensing, or selling\n- ❌ Cannot be offered as a commercial service\n\nFor commercial licensing inquiries: breschicreative@gmail.com\n","Drawbridge - 针对 Claude Code 和 Cursor 的可视化标注工具\n==========================================\n\n在浏览器中添加注释（类似于 Figma），并将这些注释发送到 Claude Code 和 Cursor。这款 Chrome 插件与 Cursor 规则集结合，可将您的浏览器连接到本地开发项目。前端页面上的注释会批量汇总到一个 Markdown 文件中，运行 `bridge` 命令即可在 Cursor 中处理这些注释。通过为 Cursor 中的视觉编辑添加更多上下文，简化您的工作流程。\n\n🚀 1. 设置\n-----------\n\n1. 下载或克隆 Drawbridge 到您的桌面或其他位置。\n\n2. 打开 Chrome 扩展程序管理页面，切换到开发者模式，并解压扩展程序 drawbridge\u002Fchrome-extension。\n\n3. 激活插件。\n\n4. 将其固定以便于访问。\n\n![db-open-extension](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_36f545dc3fea.png)\n\n\n💬 2. 连接您的项目\n-------------------\n\n1. 点击图标以打开 Drawbridge。\n\n2. 点击“Connect”以打开文件浏览器。\n\n3. 选择您想要工作的本地项目文件夹。\n\n4. 授予 Drawbridge 编辑文件的权限。\n\n5. 现在，Drawbridge 可以写入 moat-tasks.mdc 和 moat-task-detail.json 文件。\n\n\n💬 3. 添加注释\n-------------------\n\n1. 在浏览器中按下 `C` 键（或点击“Tools”下拉菜单 → “Comment”），将光标变为指针。\n\n2. 将鼠标悬停在页面上，查看可选的 DOM 元素，您可以在这些元素上留下注释。\n\n3. 单击某个元素以添加注释，输入内容后按 `Submit` 或 `Enter` 键。\n\n4. 任务将显示在页面底部的“Moat”区域。\n\n5. 任务也会同步到 Cursor。\n\n![db-comments-1](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_179b83bc0831.gif)\n\n\n📐 4. 绘制矩形（自由形式标注）\n----------------------------------------------\n\n1. 在浏览器中按下 `R` 键（或点击“Tools”下拉菜单 → “Rectangle”），进入矩形绘制模式。\n\n2. 光标将变为十字准线，表示您正处于绘制模式。\n\n3. 在页面上单击并拖动，围绕您想要标注的区域绘制矩形。\n\n4. 松开鼠标按钮以完成矩形绘制——此时会在光标位置出现一个注释框。\n\n5. 输入您的注释并按 `Submit` 或 `Enter` 键。\n\n6. 矩形的坐标和截图将与您的任务一同保存。\n\n**快捷键：**\n- 按 `C` 切换到评论模式（指针光标）。\n- 按 `R` 切换到矩形模式（十字准线光标）。\n- 按 `Esc` 退出任一模式。\n- 您可以在开始交互之前使用 `C` 和 `R` 在两种模式之间切换。\n\n![db-rectangle-drawing](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_5cc0a6d6844c.gif)\n\n\n\n🤖 5. 使用 AI 处理\n-----------------------\n\nDrawbridge 可与 **Cursor** 和 **Claude Code** 配合使用：\n\n### 在 Cursor 中\n\n1. **运行 Drawbridge**：在编辑器中，只需运行以下命令：\n\n    ```\n    bridge\n    ```\n\n2. **Drawbridge** 将分析您的任务、理解依赖关系，并开始进行编辑。\n\n3. **批准**：默认情况下，Drawbridge 以“Step”模式逐个处理任务。系统可能会要求您进行批准：\n\n    1. 开始执行任务。\n    2. 完成任务（更新 moat-tasks.md 和 moat-tasks-detail.json 中的状态）。\n\n4. **等待**：您可以观察任务在 **moat-tasks.md** 中被更新的情况。\n\n5. 如果在使用“bridge”命令时遇到问题，只需更明确地说明：“使用 @drawbridge-workflow.mdc 处理 @moat-tasks.mdc”。\n\n![db-process-tasks](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_d8700443a015.png)\n\n### 在 Claude Code 中\n\n1.  **运行斜杠命令**（在终端或 Cursor 中使用 Claude Code 时均可）：\n\n    ```\n    \u002Fbridge\n    ```\n\n2.  **选择模式**：Claude 会询问您偏好的处理模式：\n    -   **step**：一次处理一项任务，需经批准\n    -   **batch**：将相关任务分组一起处理\n    -   **yolo**：自主处理所有任务\n\n3.  **自动设置**：当您连接项目时，`\u002Fbridge` 命令会自动部署到 `.claude\u002Fcommands\u002F` 目录中。\n\n**Claude Code 功能：**\n-   ✅ **智能错误提示** - 如果未找到任务，会提供有用的指导\n-   ✅ **文件引用** - 任务包含文件路径，方便导航\n-   ✅ **截图支持** - 通过浏览器标注提供视觉上下文\n-   ✅ **Git 安全** - 自动将 `.claude\u002F` 和 `.moat\u002F` 添加到 `.gitignore`\n-   ✅ **状态跟踪** - 按照“待办”→“进行中”→“已完成”的生命周期管理任务\n\n\n👩🏼‍🎨 6. 查看您的更改\n------------------------------\n\n1.  返回浏览器查看您的更改\n\n    1.  如果您使用的是 React 或 Next.js，通常会自动更新\n\n    2.  如果您使用的是 HTML\u002FCSS\u002FJS，请手动刷新页面\n\n2.  继续编辑以完善您的作品！\n\n![db-tasks-complete](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_readme_60d5cadd6efe.png)\n\n\n\n📁 核心文件\n-------------\n\n-   **`drawbridge-workflow.mdc`**：AI 的主要规则集。这是 Drawbridge 的“大脑”所在。\n\n-   **`moat-tasks.md`**：一份人类可读的待处理任务列表。\n\n-   **`moat-tasks-detail.json`**：每项任务的原始详细数据，包括选择器和截图路径。\n\n-   **`\u002Fscreenshots`**：每个标注的视觉上下文，供 AI 理解您的意图。\n\n\n🎯 示例工作流程\n-------------------\n\n1.  **标注**：\n\n    -   点击一个按钮 → “把这个变成绿色”。\n\n    -   再次点击同一个按钮 → “再加点内边距”。\n\n2.  **处理**：在编辑器中运行 `bridge`。\n\n3.  **AI 分析**：\n\n    ```\n    🤖 检测到依赖关系。正在先处理“把这个变成绿色”，再处理“再加点内边距”。\n    ```\n\n4.  **审查**：AI 会查看您的 **`moat-tasks-detail.json`**，了解评论的具体内容。\n\n5.  **批准**：您回复 `yes`。\n\n6.  **重复**：AI 接着处理下一项依赖任务。\n\n\n🛠️ 高级用法与处理模式\n-------------------------------------\n\n您可以通过指定模式来控制 Drawbridge 处理任务的方式。\n\n-   **`step bridge`**（默认：安全且逐步推进）\n\n    -   逐个处理任务，每一步都需要您的批准。非常适合复杂的更改。\n\n-   **`batch bridge`**（高效且分组处理）\n\n    -   智能地将相关任务（例如所有按钮样式）分组在一起，并一次性请求批准。\n\n-   **`yolo bridge`**（自主且快速）\n\n    -   **请谨慎使用。** 按照正确的依赖顺序*自动处理所有*待处理任务，无需中途等待批准。最后会提供一份完整的总结。\n\n\n🎨 标注最佳实践\n---------------------------------\n\n-   **尽量具体**：“把字体改为无衬线体”比“改变字体”更好。\n\n-   **逻辑清晰**：对于多步骤的更改，应创建相互关联但独立的标注。AI 能够理解操作顺序。\n\n    -   *好例子*：1. “把按钮变成蓝色” → 2. “给蓝色按钮加上阴影”\n\n    -   *坏例子*：1. “把按钮变成蓝色并加上阴影”\n\n-   **一次只做一件事**：每个标注应代表一个明确的变化。\n\n\n🐛 故障排除\n------------------\n\n-   **“依赖错误”**：这意味着任务可能没有按照正确的顺序执行。请查看 AI 的分析，确认正确的执行顺序。\n\n-   **任务状态为“失败”**：如果任务失败（尤其是在 `yolo` 模式下），请检查 `moat-tasks.md`。您可以在 `.json` 文件中将其状态重置为“待处理”，以便重新尝试。\n\n-   **连接问题**：如果 Drawbridge 找不到任务，请在浏览器中按 `Cmd\u002FCtrl+Shift+P`，然后重新选择您的项目目录以重新连接。\n\n**祝您使用 Drawbridge 构建愉快！** 🎯\n\n📄 许可证\n----------\n\n本项目采用自定义许可证授权。详情请参阅 [LICENSE](LICENSE) 文件。\n\n**要点：**\n- ✅ 可免费用于任何合法目的，可复制和修改\n- ❌ 不得再分发、转授权或出售\n- ❌ 不得作为商业服务提供\n\n如需商业授权，请联系：breschicreative@gmail.com","# Drawbridge 快速上手指南\n\nDrawbridge 是一款浏览器插件，支持在网页上像 Figma 一样进行视觉标注（评论或绘制矩形），并将这些注释同步到本地项目，通过 AI 助手（Cursor 或 Claude Code）自动执行代码修改。\n\n## 环境准备\n\n*   **操作系统**：Windows, macOS, Linux\n*   **浏览器**：Google Chrome 或基于 Chromium 的浏览器（如 Edge）\n*   **开发工具**：\n    *   **Cursor** 编辑器（推荐）或终端中的 **Claude Code**\n    *   Node.js 环境（用于运行本地项目）\n*   **前置依赖**：无需额外安装 npm 包，核心逻辑通过 `.mdc` 规则文件集成。\n\n## 安装步骤\n\n### 1. 获取源码\n下载或克隆 Drawbridge 仓库到本地任意位置：\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge.git\n# 或者手动下载 ZIP 包并解压\n```\n\n### 2. 加载浏览器插件\n1.  打开 Chrome 浏览器，地址栏输入 `chrome:\u002F\u002Fextensions\u002F` 进入扩展管理页面。\n2.  右上角开启 **“开发者模式” (Developer mode)**。\n3.  点击 **“加载已解压的扩展程序” (Load unpacked)**。\n4.  选择刚才下载的 `drawbridge\u002Fchrome-extension` 文件夹。\n5.  插件激活后，建议点击图钉图标将其固定在工具栏以便访问。\n\n### 3. 连接本地项目\n1.  在浏览器中点击 Drawbridge 插件图标。\n2.  点击 **\"Connect\"** 按钮，在弹出的文件选择器中找到你的本地前端项目根目录。\n3.  授予 Drawbridge 写入权限。\n4.  连接成功后，插件将在项目根目录生成 `moat-tasks.mdc` 和 `moat-task-detail.json` 文件。\n\n## 基本使用\n\n### 第一步：在浏览器中添加注释\n打开你的本地开发服务器页面（如 `localhost:3000`）：\n\n1.  **添加评论**：按下键盘 `C` 键（或点击插件菜单 → Comment），鼠标变为指针。悬停选中页面上的 DOM 元素，点击后输入指令（例如：\"make this button green\"），按 `Enter` 提交。\n2.  **绘制区域**：按下键盘 `R` 键（或点击插件菜单 → Rectangle），鼠标变为十字准星。拖拽绘制矩形框选区域，输入指令并提交。\n3.  所有任务将显示在页面底部的 `Moat` 区域，并同步至本地文件。\n\n### 第二步：在编辑器中处理任务\n\n#### 方案 A：使用 Cursor（推荐）\n1.  打开你的项目文件夹。\n2.  在 Chat 面板或命令行中输入以下命令：\n    ```bash\n    bridge\n    ```\n3.  AI 将分析任务依赖关系。默认采用 **Step** 模式，每步需确认：\n    *   确认开始任务。\n    *   确认任务完成（状态将更新为 \"done\"）。\n4.  若命令未识别，可显式调用：\n    ```text\n    use @drawbridge-workflow.mdc to process @moat-tasks.mdc\n    ```\n\n#### 方案 B：使用 Claude Code\n1.  在终端或 Cursor 的 Claude 模式中运行：\n    ```bash\n    \u002Fbridge\n    ```\n2.  选择处理模式：\n    *   `step`: 逐个处理，需人工确认（安全）。\n    *   `batch`: 智能分组处理。\n    *   `yolo`: 全自动处理所有任务（慎用）。\n\n### 第三步：查看结果\n*   **React\u002FNext.js 项目**：修改通常会自动热重载，直接在浏览器查看效果。\n*   **传统 HTML\u002FCSS 项目**：刷新浏览器页面即可看到变更。\n*   如需调整，可继续在浏览器中添加新注释并重复上述流程。","前端开发者小李正在与设计师协作，需要根据设计稿对现有网页进行多处视觉调整和交互优化。\n\n### 没有 drawbridge 时\n- 沟通成本高昂：小李必须截图并在即时通讯软件中反复描述\"按钮偏左了”或“这里颜色不对”，设计师难以精准定位 DOM 元素。\n- 上下文割裂：修改需求散落在聊天记录、邮件和文档中，开发时容易遗漏细节或搞混优先级。\n- 手动转换低效：小李需要看着截图，手动在 Cursor 中输入冗长的自然语言提示词来描述修改位置，极易出错。\n- 反馈循环缓慢：每次修改后需重新部署并邀请设计师查看，简单的视觉微调往往演变成漫长的拉锯战。\n\n### 使用 drawbridge 后\n- 所见即所得的标注：小李直接在浏览器中按下 `C` 键点击具体按钮，或按 `R` 键框选区域，像使用 Figma 一样留下精准评论。\n- 自动化任务同步：所有视觉批注自动聚合为 `moat-tasks.md` 文件，并实时同步至本地 Cursor 项目，需求不再分散。\n- 一键 AI 执行：在 Cursor 中输入 `bridge` 命令，AI 即刻读取标注内容，理解坐标与意图，自动生成代码修复方案。\n- 可控的迭代流程：通过 Step 模式逐个确认 AI 的修改建议，确保每个视觉调整都符合预期，大幅缩短验证周期。\n\ndrawbridge 将原本割裂的“设计反馈 - 代码实现”流程无缝连接，让浏览器上的视觉批注直接转化为可执行的代码指令。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fbreschio_drawbridge_d8700443.gif","breschio","bresch.io","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fbreschio_06e72830.png","Product Designer",null,"New York","https:\u002F\u002Fbresch.io","https:\u002F\u002Fgithub.com\u002Fbreschio",[82,86,90],{"name":83,"color":84,"percentage":85},"JavaScript","#f1e05a",88.9,{"name":87,"color":88,"percentage":89},"CSS","#663399",10.6,{"name":91,"color":92,"percentage":93},"Shell","#89e051",0.4,901,71,"2026-04-12T13:16:09","NOASSERTION","未说明 (需运行 Chrome 浏览器及 Cursor\u002FClaude Code 编辑器，通常支持 Windows, macOS, Linux)","未说明 (本工具为浏览器插件与编辑器规则集，不涉及本地 GPU 计算)","未说明",{"notes":102,"python":100,"dependencies":103},"该工具并非传统的本地 AI 模型，而是一个 Chrome 浏览器插件配合 Cursor 或 Claude Code 使用的开发工作流工具。无需安装 Python 环境、CUDA 或下载大型模型文件。核心需求是：1. 安装 Google Chrome 浏览器并以开发者模式加载插件；2. 安装并配置 Cursor 编辑器或 Claude Code；3. 允许插件访问本地项目文件夹以读写任务文件（moat-tasks.md 等）。",[104,105],"Google Chrome (浏览器)","Cursor (代码编辑器) 或 Claude Code",[52,13],"2026-03-27T02:49:30.150509","2026-04-13T16:16:50.531847",[110,115,120,125,130,135],{"id":111,"question_zh":112,"answer_zh":113,"source_url":114},31713,"为什么提示“浏览器不支持文件系统访问”且无法选择项目文件夹？","这通常是因为您的网站通过非 localhost 的 HTTP 协议访问（例如 `mywebsite.local`），而 Chrome 的 File System Access API 要求安全上下文（HTTPS 或 localhost）。\n\n解决方案：\n1. 在 Chrome 地址栏输入：`chrome:\u002F\u002Fflags\u002F#unsafely-treat-insecure-origin-as-secure`\n2. 找到该选项，将您的本地域名（如 `http:\u002F\u002Fmywebsite.local`）添加到白名单中并启用。\n3. 重启浏览器后再次尝试。\n\n注意：该 API 仅支持 `https:\u002F\u002F` 开头的地址或 `http:\u002F\u002Flocalhost`。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F35",{"id":116,"question_zh":117,"answer_zh":118,"source_url":119},31714,"截图功能报错\"Attempting to parse an unsupported color function 'oklch'\u002F'lab'\"怎么办？","这是因为默认的 `html2canvas` 库不支持现代 CSS 颜色格式（如 oklch, lab, lch 等），常见于使用 Tailwind v4 的项目。\n\n解决方案：\n项目维护者已在新版本中修复此问题。请确保您安装的是最新版本（v1.0.2 及以上），该版本已将底层依赖从 `html2canvas` 升级为 `html2canvas-pro` (v1.5.11)，从而完美支持这些现代颜色模型。如果仍遇到问题，请检查扩展是否已更新。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F11",{"id":121,"question_zh":122,"answer_zh":123,"source_url":124},31715,"如何在 DDEV、LocalWP 等非 localhost 的本地开发环境中使用 Drawbridge？","Drawbridge 默认限制仅在 localhost 运行，但您可以通过配置 Chrome 标志来解除此限制，以支持 `myproject.ddev.site` 或 `mywebsite.local` 等自定义本地域名。\n\n具体步骤：\n1. 打开 Chrome 浏览器，访问 `chrome:\u002F\u002Fflags\u002F#unsafely-treat-insecure-origin-as-secure`\n2. 在该设置项中输入您的本地开发域名（例如 `http:\u002F\u002Fmyproject.ddev.site`）。\n3. 将该标志设置为\"Enabled\"。\n4. 完全重启 Chrome 浏览器。\n\n这样即可在非 localhost 的本地 HTTPS\u002FHTTP 环境中使用文件系统访问功能。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F3",{"id":126,"question_zh":127,"answer_zh":128,"source_url":129},31716,"Drawbridge 是否支持在 Claude Code 中使用？","是的，Drawbridge 已经内置了对 Claude Code 的支持。\n\n使用方法：\n在 Claude Code 中直接使用 `\u002Fbridge` 命令即可调用 Drawbridge 的功能。您可以参考相关的演示视频或文档了解具体操作细节。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F4",{"id":131,"question_zh":132,"answer_zh":133,"source_url":134},31717,"点击扩展图标时出现 popup.html 错误或导致浏览器崩溃如何解决？","这通常是由于扩展版本过旧或与当前浏览器版本存在兼容性冲突导致的。\n\n建议尝试以下步骤：\n1. 前往 Chrome 扩展管理页面 (`chrome:\u002F\u002Fextensions\u002F`)。\n2. 开启\"开发者模式\"。\n3. 移除当前的 Drawbridge 扩展。\n4. 重新从官方渠道加载最新版本的扩展程序。\n5. 如果问题依旧，请查看控制台（DevTools）的具体报错信息，这通常指向特定的资源加载失败或脚本错误，需等待维护者在后续版本中修复。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F30",{"id":136,"question_zh":137,"answer_zh":138,"source_url":139},31718,"Drawbridge 支持哪些现代 CSS 颜色格式？","自升级到 `html2canvas-pro` (v1.5.11) 后，Drawbridge 的截图功能已全面支持 CSS Color Module Level 4 规范中的现代颜色格式，包括：\n- `lab()`\n- `lch()`\n- `oklab()`\n- `oklch()`\n\n这使得它能够正确处理使用 Tailwind v4 或其他现代 CSS 框架设计的页面截图，不再因解析颜色失败而中断。","https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fissues\u002F5",[141,146,151,156,161],{"id":142,"version":143,"summary_zh":144,"released_at":145},238917,"v.1.0.5","\r\n\r\n\u003Cimg width=\"2858\" height=\"1620\" alt=\"CleanShot 2025-12-06 at 13 46 07@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F88cedc07-bed3-4553-9c4b-0ea74dcfe67a\" \u002F>\r\n\r\n### 关于\r\n自由矩形绘制工具允许你在 DOM 上跨越多个元素的区域绘制一个矩形。尤其在无法选中特定 DOM 元素时非常有用。\r\n\r\n**新增：**\r\n- 工具下拉菜单，包含“注释”和“矩形”选项\r\n- 键盘快捷键（C 键用于注释，R 键用于矩形）\r\n- 工具模式之间的切换\r\n- 可视化指示器（每种模式使用不同的光标）\r\n- 带有键盘快捷键的提示框系统\r\n- 适用于左侧或右侧停靠侧边栏的紧凑模式\r\n\r\n\u003Cimg width=\"490\" height=\"458\" alt=\"CleanShot 2025-12-06 at 13 36 47@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F9d77806d-dfb9-471c-a4e1-46214be9b655\" \u002F>\r\n\r\n**变更：**\r\n- 将工具按钮改为下拉菜单\r\n- 更新了项目按钮的样式\r\n- 菜单布局加入了键盘快捷键\r\n- 图标更新\r\n\r\n**改进：**\r\n- 按钮的一致性和内边距\r\n- 视觉上的优化（移除了分隔线）\r\n- 响应式设计\r\n- 与 TaskStore 的兼容性\r\n\r\n**修复：**\r\n- 按钮内边距问题\r\n- 图标大小一致性\r\n- 工具切换逻辑","2025-12-06T18:47:27",{"id":147,"version":148,"summary_zh":149,"released_at":150},238918,"v1.0.4","**任务卡片缩略图**\n- 任务卡片上的截图缩略图（114×64px），可智能聚焦于被点击的元素\n- 将鼠标悬停在任务卡片上时，页面中的实时元素会以蓝色叠加层高亮显示\n- 当元素位于视口之外时，自动滚动至该元素\n\n\u003Cimg width=\"684\" height=\"296\" alt=\"CleanShot 2025-11-11 at 23 02 58@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F792c12b7-b5f7-49d8-a01e-f9d0be762a78\" \u002F>\n\n\n**清理截图**\n- 项目下拉菜单中的“清理截图”选项可移除已完成任务中的截图文件\n- 橙色徽章显示可清理的截图数量\n- 删除前会弹出确认对话框；任务数据将被保留\n\n\u003Cimg width=\"606\" height=\"554\" alt=\"CleanShot 2025-11-11 at 23 04 59@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5e9d384e-233f-4d01-b899-457f9eaa11e8\" \u002F>\n\n\n## ✨ 改进内容\n\n- 移除 localhost 限制——支持所有 URL\n- 下拉菜单智能定位（空间允许时显示在上方）\n- 鼠标悬停时才显示按钮，界面更加简洁\n- 全程采用流畅的动画和过渡效果\n- 单一菜单强制机制（同一时间仅允许打开一个菜单）\n- 统一的 DOM 叠加层系统取代了闪烁效果\n\n---\n\n**技术细节**：对 TaskStore 进行了增强，新增 `deleteCompletedScreenshots()` 方法，共享了下拉菜单的定位逻辑，并优化了缩略图缓存。","2025-11-12T04:16:53",{"id":152,"version":153,"summary_zh":154,"released_at":155},238919,"v1.0.3","## 衷心感谢！\r\n我非常感谢 [AI Labs](https:\u002F\u002Fwww.youtube.com\u002F@AILABS-393) 对这个项目进行评测。视频链接在此：[Drawbridge on AI Labs](https:\u002F\u002Fyoutu.be\u002F1cB2iqz_vnM?si=nB8SatztrNn4F4Hx&t=224)。您关于与 Claude Code 集成的建议，激励我完成了这项工作，并将继续推进后续开发。再次感谢您提供的宝贵反馈以及对 Drawbridge 的分享。\n\n## 🎯 新增内容\r\n\r\nDrawbridge 现已支持 **Claude Code**！本次发布实现了与 Anthropic 官方 CLI 的全面集成，使开发者能够在终端和编辑器环境中利用 AI 处理 UI 注释。\n\n## ✨ 主要特性\r\n\r\n### 🤖 `\u002Fbridge` 斜杠命令\r\n\r\n只需一条命令即可处理 UI 注释：\r\n```bash\r\n\u002Fbridge\r\n```\r\n\r\n**功能亮点：**\r\n- 🚀 自动部署——当您连接项目时，该命令会自动创建在 `.claude\u002Fcommands\u002F` 目录下。\r\n- 🎚️ 三种处理模式：\r\n  - step：每次处理一项任务并需确认（最安全）。\r\n  - batch：将相关任务分组处理（高效）。\r\n  - yolo：所有任务自主完成（最快）。\r\n- 🔍 智能文件搜索——自动在 `.moat\u002F`、根目录或父目录中查找任务。\r\n- 💬 友好的错误提示——当未找到任务或设置不完整时，提供清晰指引。\r\n\r\n**📁 任务格式优化**\r\n\r\n现在任务包含文件引用，便于导航：\r\n1. [ ] 按钮：提交——“将颜色改为蓝色” `demo\u002Findex.html`\r\n2. [ ] 标题：欢迎——“增大字体大小” `demo\u002Fstyles.css`\r\n\r\n**🔐 默认 Git 安全机制**\r\n\r\n- 连接项目时，自动将 `.claude\u002F` 和 `.moat\u002F` 添加到 `.gitignore` 文件中。\r\n- 防止意外提交生成的文件。\r\n- 与现有 Git 工作流无缝兼容。\r\n\r\n**🔧 其他改进**\r\n\r\n- 强制执行状态生命周期——明确的“待办”→“进行中”→“已完成”工作流。\r\n- 处理竞态条件——优雅地恢复扩展自动同步后的状态。\r\n- 截图路径解析——正确处理相对路径与绝对路径。\r\n- 跨平台支持——可在终端、Cursor 编辑器以及任何 Claude Code 环境中使用。\r\n\r\n**📊 技术细节**\r\n\r\n版本：1.0.3  \r\n更改文件：8 个文件被修改，新增 1 个文件。  \r\n代码变动：+334\u002F-21行。\r\n\r\n**关键变更：**  \r\n- `moat-chrome\u002Fmanifest.json`——版本升级至 1.0.3。  \r\n- `moat-chrome\u002Fcontent_script.js`——命令部署逻辑及 `.gitignore` 自动化。  \r\n- `moat-chrome\u002Frules-templates\u002Fbridge.md`——新增 159 行的斜杠命令模板。  \r\n- `moat-chrome\u002Futils\u002FmarkdownGenerator.js`——在任务输出中加入文件路径引用。\r\n\r\n**🚀 安装与升级**\r\n\r\n**新用户**\r\n\r\n1. 从本发布下载扩展程序。  \r\n2. 打开 `chrome:\u002F\u002Fextensions` → 启用“开发者模式”。  \r\n3. 点击“加载已解压的扩展程序”→选择 `moat-chrome` 文件夹。  \r\n4. 导航至本地运行的项目。  \r\n5. 按下 `Cmd+Shift+P`（Mac）或 `Ctrl+Shift+P`（Windows），以完成连接。  \r\n6. `\u002Fbridge` 命令将自动部署到 `.claude\u002Fcommands\u002F` 目录中。  \r\n\r\n**老用户**\r\n\r\n1. 更新您的扩展文件。  \r\n2. 打开 `chrome:\u002F\u002Fextensions` 并重新加载扩展。  \r\n3. 重新连接您的项目。","2025-10-23T01:48:41",{"id":157,"version":158,"summary_zh":159,"released_at":160},238920,"v1.0.2","## ⚡ 性能与工作流优化发布\n\n### 重点改进\n\n**效率提升50%**  \n通过强制执行批处理操作，将每个任务的工具调用次数从6–7次减少至3次。\n\n**AI合规性增强**  \n借助明确的强制执行机制和可视化指南，合规性由约60%提升至95%。\n\n**模板标准化**  \n采用一致的emoji任务公告，便于快速浏览与跟踪。\n\n---\n\n## 🆕 新功能\n\n### 批处理操作\n- **三步工作流**：开始批处理 → 执行 → 完成批处理\n- **冲突更少**：通过批处理写入实现并发更新的高效处理\n- **可视化示意图**：清晰展示正确与错误的操作方式\n\n### 工作流文件格式\n- 从`.mdc`迁移到`.md`，以提升兼容性\n- 更新了扩展程序文件中的所有引用\n- 保持完全向后兼容\n\n### 截图处理\n- 将路径解析统一整合到一个模块\n- 自动转换：`.\u002Fscreenshots\u002F` → `.moat\u002Fscreenshots\u002F`\n- 加载与缓存的最佳实践\n\n### 上下文感知沟通\n- 在处理过程中输出简洁信息\n- 提供带有可操作指导的详细错误信息\n- 针对首次使用的用户推出引导模式\n- 对重复操作启用静默模式\n\n---\n\n## 📊 性能指标\n\n| 指标 | 优化前 | 优化后 | 改进幅度 |\n|--------|--------|-------|-------------|\n| 每个任务的工具调用次数 | 6–7次 | 3次 | **50%** 降低 |\n| AI合规性 | ~60% | ~95% | **+35%** |\n| 更新冲突 | 频繁 | 稀少 | **显著减少** |\n| 处理速度 | 基线 | 更快 | **约2倍提升** |\n\n---\n\n## 🔗 升级说明\n\n**Chrome 扩展程序**：\n1. 拉取最新代码\n2. 访问 `chrome:\u002F\u002Fextensions`\n3. 更新或重新加载扩展程序\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fcompare\u002Fv1.0.1...v1.0.2","2025-10-21T03:08:14",{"id":162,"version":163,"summary_zh":164,"released_at":165},238921,"v1.0.1","感谢 @falkfrentzen 和 @jankowtf 的贡献！\n\n## 🐛 Bug 修复\n\n### 现代 CSS 颜色的截图支持\n修复了截图功能与 CSS Color Module Level 4 及更高版本规范的兼容性问题。扩展现在能够正确处理现代颜色函数：\n\n- `lab()` - CIE Lab 色彩空间\n- `lch()` - CIE LCH 色彩空间\n- `oklab()` - Oklab 色彩空间\n- `oklch()` - Oklch 色彩空间\n\n**解决的问题**：避免出现“尝试解析不支持的颜色函数”错误。\n\n### 哪些人会受益？\n- 使用 Tailwind v4 的项目（默认使用 `oklch()`）\n- 使用现代 CSS 颜色模型自定义配色方案的应用程序\n- 处理广色域色彩空间的开发者\n\n---\n\n## 📦 安装\n\n### Chrome 扩展更新\n1. 打开 `chrome:\u002F\u002Fextensions`\n2. 找到“Drawbridge - Cursor 的可视化编辑器”\n3. 点击“更新”，或将其移除后从更新后的源重新安装\n\n### 手动安装\n1. 下载本版本中的最新代码\n2. 打开 `chrome:\u002F\u002Fextensions`\n3. 启用“开发者模式”\n4. 点击“加载已解压的扩展程序”\n5. 选择 `moat-chrome` 目录\n\n---\n\n## 🔗 变更内容\n- 扩展版本更新：`1.0` → `1.0.1`\n- 包版本更新：`1.0.0` → `1.0.1`\n- 新增 `CHANGELOG.md` 文件，用于记录版本变更\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fbreschio\u002Fdrawbridge\u002Fcompare\u002Fv1.0.0...v1.0.1\n\n---\n\n## 📋 发布类型\n**补丁版** - 仅包含 bug 修复，无破坏性变更。可立即安全升级。","2025-10-21T02:57:08"]