# 网页圈个圈，Agent替你改代码 **导语：** 这两天翻 Hacker News 的 Show HN 区，我淘到了一件国内还没人写教程的宝贝：一个浏览器工具条，设计师在网页上“圈个圈、写句话”，你仓库里的 Claude Code 就自动把 UI 改了。它叫 devbar，MIT 开源、免费、可自托管。配套还有三件值得顺走的新货：一个对标 Claude Code 的开源终端 Agent Aurict、一个 2 美元/小时的 H100 租赁站、一个把 YouTube 上 AI 生成视频一键隐藏的 Safari 插件。这四样合起来，恰好是“派活 → 干活 → 算力 → 内容治理”的完整链路，而且全部免费或白菜价。这篇文章给你拆清楚每个工具是什么、怎么装、和国内方案差在哪。 ## 主角：devbar — 把网页变成 Agent 的输入口 **官网**：[devbar.sh](https://devbar.sh)（作者 Tim Mikeladze，Show HN 上线 18 小时，MIT 协议，官方明确写着 free forever、可自托管） **它解决什么问题？** 做过前端的人都知道最烦的流程：设计或产品发来一句“hero 区域有点挤，能不能调一下”，你来回追问五轮才搞清楚她说的是哪个按钮。截图不是上下文，人看不懂的东西 Agent 更看不懂。devbar 的思路是：在网页里注入一个工具条，任何人指哪、圈哪、写备注，它自动抓取这个元素的完整“技术指纹”—— - XPath 和 CSS 选择器 - 计算后的样式（颜色、字号、padding） - React 组件树路径和 props（直接从 fiber 树读） - **源码位置**：精确到 `src/ui/Button.tsx:6` 这种文件行号 - 元素截图、 bounding box、文本内容 然后这份报告一键路由到 `claude`、`codex`、`opencode` 命令行（报告会推送到你项目目录里正在跑的 Agent CLI，截图以真实文件形式写盘，Agent 可以直接读），或者走 GitHub Issue、webhook、Slack、Jira、Linear。 **怎么用？三步：** 1. 接入：往页面贴一个 `