Design In The Browser：让 AI 看到你点的是哪个按钮

2026-02-03 | Product Hunt | 官网

30秒快速判断

这App干嘛的：点击网页上任意元素，用自然语言告诉 AI 你想改什么，它会把指令+截图发给 Claude Code/Cursor/Gemini CLI，AI 直接帮你改代码。

值不值得关注：如果你每天用 AI 写前端代码，但受够了"往上一点、颜色深一点"这种描述——这工具解决了一个真实的痛点。值得一试。

和谁比？有什么不同？

与我有关三问

与我有关吗？

目标用户是谁：

• 每天用 Claude Code/Cursor 写前端的开发者
• 需要频繁调整 UI 细节的人
• 不想在聊天框里写"第三个按钮往右移5px"这种话的人

我是吗：

• 如果你用 AI 写代码但总觉得描述 UI 变更很费劲 → 是
• 如果你是纯后端开发 → 不是
• 如果你用 Figma 做设计不碰代码 → 不是

什么场景会用到：

• 调整按钮颜色、间距、字体大小 → 用这个
• 让 AI 生成新的 SVG 图标 → 用这个
• 从零开始搭建页面架构 → 不需要这个，直接用 AI 对话

对我有用吗？

ROI 判断：如果你每天调 UI 超过 5 次，这工具能省下不少沟通成本。推荐前端开发者试用。

喜闻乐见吗？

爽点在哪：

• 指哪打哪：直接点击元素，AI 知道你要改的是什么
• 截图自动发送：AI 能"看到"你看到的东西
• 多编辑队列：可以一次选多个元素批量修改

用户真实评价（来自 Product Hunt）：

"图标支持：是的。如果你的图标是 SVG（内联文件或图标组件），你可以让它生成新的 SVG 图标。" — @Peter Assentorp（创始人回复）

"我们可以选择 5-10 个不同的 UI 微调，让 AI 在一个批次中处理它们以节省 token 吗？" — @Xiang Lei（用户关心 token 成本）

"看起来很棒！它能处理更复杂的请求吗，比如创建图标和插画？" — @Alina Petrova（用户关心功能边界）

给独立开发者

技术栈

• 形式：浏览器扩展/工具
• 核心技术：元素选择器 + 截图 + 指令发送
• AI 集成：Claude Code、Cursor、Gemini CLI
• 终端：内置终端运行 AI 命令

核心功能怎么实现的

1. 用户在浏览器中点击任意网页元素
2. 工具自动获取 CSS 选择器 + 截取当前视图截图
3. 用户用自然语言描述想要的修改
4. 工具把（选择器 + 截图 + 指令）打包发给 AI 编码助手
5. AI 在内置终端中执行代码修改

说白了就是给 AI 编码工具装了一双"眼睛"，让它能看到你指的是哪个元素。

开源情况

• 开源吗：未知（官网未明确说明）
• 类似开源项目：Brackets（可视化代码编辑器）
• 自己做难度：中等。核心是浏览器扩展 + 元素选择器 + AI 接口对接，预计 1-2 人月

商业模式

• 变现方式：工具本身可能免费，依赖 AI 编码工具的付费订阅
• 定价：暂无公开定价信息
• 注意：使用需要配合 Claude Pro ($20/月) 或 Cursor Pro ($20/月)

巨头风险

中等风险。Claude 官方已经推出了 Claude in Chrome 扩展，可以让 Claude Code 直接控制浏览器。但 Design In The Browser 的"点击选择元素"交互方式是差异化卖点。

给产品经理

痛点分析

问题：用 AI 写前端代码时，描述"改哪个元素"是最费劲的事。你得说"页面顶部导航栏第三个按钮右边那个图标"，AI 可能还理解错。

痛点程度：

• 对前端开发者 → 高频刚需
• 对后端开发者 → 不痛
• 对设计师 → 不痛（他们用 Figma）

用户画像

1. 典型用户 A：全栈独立开发者，每天用 Claude Code 写代码，调 UI 时最头疼
2. 典型用户 B：前端工程师，用 Cursor 但觉得描述 UI 变更太费劲

功能拆解

竞品差异

可借鉴的点

1. "给 AI 装眼睛"：让 AI 看到用户看到的东西，而不是让用户费劲描述
2. 轻量集成：不替代现有工具，而是增强现有工具
3. 批量操作：用户关心 token 成本，批量处理是刚需

给科技博主

创始人故事

• 创始人：Peter Assentorp
• 背景：开发者/产品创建者（从 PH 评论来看是一人创业）
• 为什么做这个：解决自己用 AI 写前端时"描述 UI 位置"的痛点

争议点/讨论角度

1. "AI 会不会淘汰前端开发？" — 这工具反而说明 AI 还需要人类"指方向"
2. "可视化编辑会不会回归？" — 从纯代码到 Figma，现在又回到"在浏览器里改代码"
3. "设计师和开发者的边界在哪？" — 这工具让非设计师也能精确调 UI

热度数据

• PH排名：#8，144 票
• 分类：AI Coding Agents
• 讨论热度：中等，用户主要关心功能边界和 token 成本

内容建议

• 角度 1："AI 写代码的最后一公里：让 AI 看到你指的是什么"
• 角度 2："Cursor vs Claude Code vs Design In The Browser：前端开发者的 AI 工具选择"
• 角度 3："为什么'指哪打哪'才是 AI 编码的正确姿势"

给早期采用者

定价分析

隐藏成本：AI 工具的订阅费用是主要成本。

上手指南

1. 访问 designinthebrowser.com
2. 安装工具（浏览器扩展或本地应用）
3. 确保已安装 Claude Code/Cursor/Gemini CLI
4. 打开你的网站，点击任意元素
5. 用自然语言描述修改，按下发送

上手时间：5-10分钟 学习曲线：低

坑和吐槽

1. 依赖其他 AI 工具：这不是独立产品，必须配合 Claude Code/Cursor 使用
2. 元素必须在代码库中：外部加载的元素（如 CDN 脚本生成的）可能无法识别
3. 复杂结构调整困难：用户反馈"完全重新设计容器结构时比较痛苦"
4. 团队协作局限：没有像 Figma 那样的多人评审流程

来源：Reddit 讨论

安全和隐私

• 数据存储：截图和指令发送给 AI 服务（Claude/OpenAI）
• 隐私考虑：生产环境敏感数据慎用
• 建议：在开发环境使用

替代方案

给投资人

市场分析

• 赛道：AI Code Tools
• 2026 市场规模：$10.06B（AI 代码工具整体市场）
• 增长率：27.57% CAGR，2034 年预计达 $70.55B
• 驱动因素：开发者效率需求、AI 模型能力提升

来源：Verified Market Research、Fortune Business Insights

竞争格局

Timing 分析

为什么是现在：

1. Claude Code/Cursor 等 AI 编码工具刚普及，用户开始发现"描述 UI"的痛点
2. AI 多模态能力提升，能"理解"截图
3. 开发者工作流正在被 AI 重塑，配套工具有机会

团队背景

• 创始人：Peter Assentorp
• 团队：疑似一人团队（indie hacker 风格）
• 过往：信息有限

融资情况

• 融资：未知（可能是 bootstrapped）
• 商业模式：尚不清晰，可能依赖 AI 工具生态

结论

Design In The Browser 是给 AI 编码工具装的一双"眼睛"。它不替代 Claude Code 或 Cursor，而是让它们能"看到"你指的是哪个元素。对于每天调 UI 的前端开发者来说，这是一个实用的效率工具。

资源链接

2026-02-03 | Trend-Tracker v7.3