Inspector：给 AI 编码 Agent 装上“眼睛”的前端可视化编辑器

2026-02-08 | 官网 | ProductHunt | YC

30 秒快速判断

这 App 是干嘛的：一个 Mac 桌面应用，让你在浏览器里直接点选前端元素、拖拽修改、编辑文字，然后把改动同步回你的代码库。它不是一个独立的 AI，而是连接你已有的 Claude Code、Cursor 或 Codex，给这些 AI Agent 提供浏览器里的视觉上下文。

值不值得关注：值得关注，但先别急。YC F25 背书 + 解决了真实痛点（前端调样式的“截图-粘贴-调试”循环），但产品还很早期 —— 定价不明、只支持 Mac、只支持 React 生态。如果你天天写 React 前端而且已经在用 Claude Code 或 Cursor，可以尝试。否则先观望。

与我有关三问

与我有关吗？

• 目标用户是谁：前端工程师（React/Next.js/Vite）、使用 AI 编码工具（Claude Code/Cursor）的开发者、想直接参与前端修改的设计师和 PM
• 我是吗：如果你每天花大量时间在“看 Figma 设计稿 → 截图给 AI → 在 DevTools 里调试 → 再截图”这个循环里，你就是目标用户
• 什么场景会用到：
  • 调 UI 细节（间距、字体、对齐）→ 直接在浏览器里拖拽，Inspector 帮你改代码
  • 设计师想改文案/颜色 → 双击编辑文字，不用找开发
  • 用 Lovable/Bolt 生成的代码想继续迭代 → 导入 Inspector 继续可视化编辑
  • 不适合：后端开发、非 React 项目、Windows 用户

对我有用吗？

ROI 判断：如果你是高频前端开发者且用 React + AI 工具，值得试试。但定价未公布让人不放心 —— 一个 PH 用户说得好：“落地页上没有价格，这让我立刻产生了怀疑。”

喜闻乐见吗？

爽点在哪：

• 浏览器变 IDE：直接在你看到的页面上点、拖、改，所见即所得地修改代码
• 代码映射 (Code Mapping)：点一个按钮，Inspector 直接高亮对应的源代码行号，省去了在 DevTools 里翻找 DOM 的痛苦
• AI 上下文增强：你的 Claude Code/Cursor 能“看到”浏览器渲染效果，而不只是看代码瞎猜

用户怎么说：

“它连接到你已经在使用的 Agent（Claude Code, Cursor, Codex），并将更改直接写入你的代码库或 GitHub 仓库。” —— PH 用户

“我能预见到产品研发团队会非常喜欢这个工具，让非技术人员也能参与代码交付。” —— PH 用户

“这看起来很棒，但官网上没有定价信息，这让我本能地感到怀疑。” —— PH 用户

给独立开发者

技术栈

• 支持框架：React, Next.js, Vite
• 平台：Mac 桌面应用（Windows 待发布，需加入等待列表）
• AI 集成：不自带模型，连接外部 Agent（Claude Code, Cursor, Codex）
• 核心技术：代码映射 (Code Mapping) —— 将 DOM 元素映射到源代码精确行号
• 存储：全部本地化，不上传代码，不训练模型

核心功能实现

Inspector 的核心技术是 Code Mapping：当你在浏览器里点选一个元素，Inspector 能定位到代码库中对应的 React 组件和具体行号。这让 AI Agent 拿到的不只是“修改这个按钮的颜色”这种模糊指令，而是精确的文件 + 行号 + 视觉上下文。

团队在博客中详细解释了他们的理念：“可视化设计工具必须先做到‘正确’，然后才是‘智能’”。他们创建了 PanelBench —— 一套包含 89 个视觉测试用例的基准套件，用来测试 CSS 属性的正确展示。结果显示：Cursor 的设计面板在 89 个测试中失败了 43 个，而 Inspector 全部通过。

开源情况

• 开源吗：闭源，GitHub 上未找到仓库
• 类似开源项目：Onlook —— Apache 2.0 许可证，8500+ GitHub Stars，同赛道且同样受 YC 支持的产品
• 自己做难度：中等偏高。Code Mapping 的准确性是核心壁垒（Inspector 2 人团队 2 周搭建了编辑器，但精细打磨需要更久）

商业模式

• 变现方式：未公布，推测为订阅制
• 定价：未知 —— 官网没写价格，PH 用户已经在吐槽这件事
• 用户量：未公开，Twitter 167 关注者，产品非常新

巨头风险

这是个值得思考的问题。Cursor 已经在做类似的浏览器内可视化编辑功能，但 Inspector 团队用 PanelBench 证明了 Cursor 的实现质量尚待提高（43/89 测试失败）。更大的风险来自 Cursor、Windsurf 这些 AI IDE 持续加强前端可视化功能。Inspector 的护城河在于：

1. Code Mapping 的准确性
2. Agent 无关性（不绑定特定 AI）
3. 专注前端这个垂直场景

但如果 Cursor 把这个功能做好了，Inspector 的独立存在价值就会受到质疑。

给产品经理

痛点分析

• 解决什么问题：前端开发中的“上下文传递”痛苦 —— Figma 看设计 → 截图给 AI → Chrome DevTools 调试 → 再截图，如此循环
• 痛点有多痛：高频、中度刚需。创始人自述“每天 12 小时调前端”的亲身痛苦。但这主要影响前端密集型团队。

用户画像

• 核心用户：前端工程师 + React 生态 + 已在使用 AI 编码工具
• 延伸用户：设计师想直接改代码、PM 想调整文案、用氛围编码 (vibe-coding) 工具（Lovable/Bolt）生成代码后继续迭代的人
• 使用场景：UI 微调（间距/颜色/文字）、设计稿到代码的最后一公里、团队协作中非技术成员参与前端修改

功能拆解

竞品差异

可借鉴的点

1. PanelBench 基准测试：用 89 个测试用例量化“可视化编辑准确性”，这种产品验证方法值得学习
2. Agent 无关策略：不造 AI 轮子，做连接层 —— 用户用什么 Agent 就连什么 Agent
3. 从 vibe-coding 接力：定位成 Lovable/Bolt 生成代码后的“后续迭代工具”

给科技博主

创始人故事

• Michael Klikushin（CTO）：佐治亚理工 CS 退学生，前 Oracle + CMU HCII 研究员
• Quentin Romero Lauro（创始人）：匹兹堡大学 CS 在读生（'26），前 Character.AI 工程师 + CMU HCII + 伯克利 EECS 研究实习生。曾获 CRA 杰出本科生研究员奖。
• 为什么做这个：两人做 Web 游戏时，每天花 12 小时在 Figma → Cursor → DevTools 的循环里。用 AI 编码的体验明明很强，但给 AI 传递视觉上下文的过程太蠢了 —— 截图、粘贴、描述、等回复。他们想让 AI 直接“看到”浏览器。

争议点/讨论角度

• 定价透明度：官网不写价格在 2026 年是个大忌，PH 用户直接表示怀疑
• 硬刚 Cursor：Inspector 公开 benchmark 说 Cursor 可视化编辑“失败了 43/89 测试” —— 这种挑战巨头的姿态很有话题性
• Agent 无关 vs 全家桶：做连接层还是做全家桶？这是 2026 年 AI 工具的路线之争
• 开源 vs 闭源：同赛道的 Onlook 选了开源（8500 stars），Inspector 选了闭源 —— 哪条路更好？

热度数据

• PH 表现：50 票，表现一般
• YC F25：获得 Y Combinator 2025 秋季批次支持
• Twitter：@tryinspector, 167 关注者，YC 官方账号推荐过
• 社区讨论：Reddit/HN 上暂无讨论，产品太新

内容建议

• 适合写的角度： “AI 编码工具的下一步不是更强的模型，而是更好的上下文” —— Inspector 代表了给 AI 装“眼睛”的趋势
• 蹭热点机会：Claude Code + Cursor 是热门话题，Inspector 作为它们的“视觉增强层”很容易蹭到热度

给早期采用者

定价分析

这是目前最大的问题。一个 YC 支持的产品居然不公开定价，可能有几种原因：还在调整商业模式、想先做用户增长再收费、或者定价太贵怕吓跑人。

上手指南

• 上手时间：预计 10-15 分钟
• 学习曲线：低（如果你用过 Chrome DevTools 的话）
• 步骤：
  1. 从官网下载 Inspector（仅限 Mac）
  2. 选择本地代码库目录，或从模板开始
  3. 连接你的 Claude Code / Cursor / Codex 账号
  4. 在浏览器视图中选择元素，开始可视化编辑
  5. 改完后通过 GitHub 集成创建 PR

坑和吐槽

1. 定价未知：这是 PH 用户最大的槽点。“这看起来很棒，但官网上没有定价信息，这让我立刻产生了怀疑。”
2. 仅限 Mac：Windows 用户暂时用不了，需要加入等待列表
3. React 限定：只支持 React、Next.js、Vite，Vue/Angular/Svelte 用户暂时无缘
4. 产品太新：社区讨论几乎为零，出了问题可能找不到解决方案

安全和隐私

• 数据存储：全部本地化，不上传代码
• 隐私政策：官方承诺不训练用户代码，聊天记录存在本地设备
• 安全审计：无公开审计报告（产品太新）

替代方案

给投资人

市场分析

• AI 开发者工具市场：2025 年 45 亿美元 → 2030 年 100 亿美元，CAGR 17.32%
• 软件开发工具市场：2025 年 64.1 亿美元 → 2030 年 137 亿美元，CAGR 16.4%
• AI 前端开发市场：设计辅助工具细分增长最快
• 标杆数据：GitHub Copilot 2025 年收入 4 亿美元，同比增 248%
• 驱动因素：81% 开发者使用 AI 后生产力提升 + AI 编码工具从新奇变成标配

竞争格局

Timing 分析

• 为什么是现在：2025-2026 年 AI 编码工具从“补全”进化到“自主 Agent”，但 Agent 缺少视觉上下文。Inspector 填的就是这个空白 —— 给 Agent 装上“眼睛”
• 技术成熟度：Claude Code/Cursor/Codex 的成熟让 Inspector 有了可以“寄生”的基础设施
• 市场准备度：前端开发者已经大量采用 AI 工具，但可视化编辑的准确性仍然是痛点

团队背景

• Michael Klikushin（CTO）：佐治亚理工 CS，前 Oracle + CMU HCII
• Quentin Romero Lauro（创始人）：匹兹堡大学 CS，前 Character.AI + CMU HCII + Berkeley EECS，CRA 杰出本科生研究奖
• 核心团队：2 人，位于旧金山
• 过往成绩：2 周搭建编辑器 + PanelBench 基准测试，展现了极强的执行力

融资情况

• 已融资：Y Combinator (F25 批次) + Vento
• 融资额：未公开
• 估值：未公开

风险点

1. Cursor 等巨头持续改进内置可视化编辑，Inspector 的独立价值可能被吞噬
2. 闭源策略面临 Onlook（开源 + 8500 stars）的强力竞争
3. 目前仅限 React，限制了市场空间
4. 2 人团队在快速变化的赛道中能否持续跑赢

结论

Inspector 抓住了一个真实的痛点 —— AI 编码 Agent 缺少视觉上下文，但产品还处于非常早期的阶段。定价不透明、平台限制多、社区基础薄弱，都是需要验证的风险。YC 背书和创始人的 HCI 背景是加分项，但同赛道的开源竞品 Onlook 更成熟。

资源链接

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