Protoshot UI 组件秒级预览

让 AI 编码代理写完 UI 后立即看到渲染效果

痛点

在使用 AI 编码代理构建 UI 时，开发者需要频繁看到组件渲染效果，但启动 puppeteer 或 agent-browser 实例来截图既笨重又慢。有开发者为此做了 Protoshot，扫描 CSS 文件和组件，让用户只写少量 JSX 就能预览，说明这个工作流缝隙真实存在。

方案

一个轻量本地工具，扫描项目中的 CSS 文件和组件，生成一个即时预览界面，用户只需编写少量 JSX 就能看到 UI 渲染结果，无需编排浏览器代理。可与 AI 编码代理配合，在代理生成 UI 后自动刷新预览。

用户

使用 AI 编码代理（如 Cursor、Claude Code）的前端开发者和设计师

MVP

扫描项目 CSS 和组件文件；提供本地预览页面，支持编写 JSX 即时渲染；自动刷新与热更新；与常见 AI 编码代理的输出目录集成；可选截图导出

变现

免费基础版，付费解锁团队协作和截图历史；一次性买断或月订阅；作为 AI 编码工具生态的插件分发

为何现在

AI 编码代理正在成为主流工作流，但 UI 预览环节仍然断裂；独立开发者可以快速做出轻量工具并集成到现有代理生态中