Frontman
让产品和设计人员在浏览器里直接修改前端界面，无需打开 IDE，AI 代理即可编辑真实源码并热重载。
- Star 数
- ★ 719
- 最近更新
- 今天
- License
- NOASSERTION
- 主语言
- ReScript
- FA 评分
- 63/100 · 存在缺口
30 秒速览
- 运行形态
- 可在哪里用
- 通用 · 跨平台OpenAI API · Claude API
- 费用
- 软件免费，模型调用费用自付
- 上手难度
- 中 · 需要几步配置
- 开始前需要
- 典型场景
- 产品经理发现内部工具子页面按钮样式有误，导航到对应路由点击元素并描述问题，无需工程师介入即可修复。
- 不适合
- 生产环境用户：集成只在开发模式运行，部署包会被剥离
- 使用 Remix、Nuxt、SolidStart、Qwik 或 Phoenix LiveView 的团队
- 源码审查
- 63/100 · 存在缺口
这个 Agent 能做什么，适合哪些场景？
Frontman 是一个开源的 AI 编码代理（仓库 frontman-ai/frontman），它运行在浏览器中而非 IDE 里。用户在运行中的应用里点击任意元素并用自然语言描述改动，Frontman 会直接编辑实际源文件并即时热重载。它通过框架中间件把本地开发服务器变成 MCP 服务器，为 AI 代理提供实时 DOM、计算后 CSS、组件树、路由、source map 和服务器日志等上下文。仓库包含 Next.js、Astro 和 Vite 集成包，以及一个 Elixir/Phoenix 编写的编排服务器。框架集成只在开发模式运行，生产构建会将其剥离，部署产物不受影响。项目采用双重许可：客户端库为 Apache 2.0，服务器为 AGPL-3.0，支持 BYOK 接入 OpenAI、Anthropic、OpenRouter 等 LLM 提供商。
开发者通过一条命令把 Frontman 加入项目（如 npx @frontman-ai/nextjs install、npx astro add @frontman-ai/astro、npx @frontman-ai/vite install）。团队成员在浏览器打开 localhost/<port>/frontman，得到聊天界面加应用实时预览。点击任意元素并用英文描述改动后，Frontman 查询框架中间件暴露的 MCP 工具获取 DOM 树、计算样式、截图、路由、服务器日志和编译模块等上下文，定位并修改正确的源文件，然后触发热重载。生成的改动以 diff 形式供审查，可走团队正常的代码评审流程。AI 编排由 Elixir/Phoenix 服务器完成，模型调用采用 BYOK，直接连接用户自己的 LLM 密钥。
- 产品经理发现内部工具子页面按钮样式有误，导航到对应路由点击元素并描述问题，无需工程师介入即可修复。
- 设计师发现移动端卡片间距与桌面端不一致，让 Frontman 读取计算后 CSS 和布局上下文完成对齐。
- 营销人员需要统一全站空状态的文案，描述一次改动并审查生成的 diff。
- 前端开发者想要比终端 AI 工具更丰富的上下文，让代理基于渲染页面而非静态源码做精确修复。
- 团队希望通过浏览器内修改加正常 diff 评审流程，缩短设计 QA 和产品评审积压问题的交付周期。
如何安装或部署这个 Agent？
按框架选择其一：
Next.js：npx @frontman-ai/nextjs install（若项目使用 src/ 目录，执行 mv proxy.ts src/proxy.ts），支持 App Router、Pages Router 和 Turbopack。
Astro：npx astro add @frontman-ai/astro，要求 Astro 5/6/7 和 Node.js 22.19+。
Vite（React/Vue/Svelte，含 SvelteKit）：npx @frontman-ai/vite install，会从 vite.config 自动检测框架。
运行时需配置 BYOK 的 LLM 密钥（OpenAI、Anthropic、OpenRouter、Fireworks AI、NVIDIA、Google、xAI 等任一）。服务器为 Elixir/Phoenix，可从源码自托管。
如何使用这个 Agent？
- 在项目里安装对应框架集成并启动开发服务器（npm run dev）。2. 浏览器打开 http://localhost:3000/frontman（Next.js）、:4321/frontman（Astro）或 :5171/frontman（Vite，源文档写 :5173）。3. 在聊天界面旁的实时预览中点击要修改的元素，用自然语言描述改动。4. Frontman 编辑源文件并热重载，检查生成的 diff 后走正常代码评审。也可安装 OpenClaw 技能：openclaw skill install frontman-dev，为通用 AI 代理增加前端编辑能力。
这个 Agent 有哪些优点和局限？
- 独有地从浏览器侧入手：代理能读取实时 DOM、计算后 CSS、组件树和服务器日志，这是 Cursor/Copilot 等基于源文件的工具不具备的上下文。
- 非技术成员（PM、设计师）可在浏览器内完成精确的前端修改，编辑结果落在真实代码库中而非沙箱生成的代码。
- 框架集成仅运行在开发模式，生产构建会剥离 Frontman，部署包不受影响。
- BYOK 模式支持 OpenAI、Anthropic、OpenRouter 等多家 LLM 提供商，不被单一模型厂商锁定；服务器可自托管。
- 仅支持开发模式编辑，无法用于生产环境；支持的框架限于 Next.js、Astro、Vite（React/Vue/Svelte），Remix、Nuxt、SolidStart、Qwik、Phoenix LiveView 尚未支持。
- 采用双重许可，服务器部分为 AGPL-3.0，基于其构建托管服务需保持开源，商业评估需注意。
- 使用需要 LLM API 密钥，费用由用户直接支付给模型提供商；托管服务计划正转向付费订阅。
- 需要本地开发服务器运行及少量开发者初始接入（安装集成、可能的 proxy.ts 移动），并非零开发参与的方案。
这个 Agent 与同类方案有什么区别？
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| Frontman 当前 | 63 · 存在缺口 | 命令行工具免费 + 模型费 | ★ 719 | 今天 | ReScript | OpenAI API · Claude API |
| Skybridge MCP Apps 框架 | 64 · 存在缺口 | 命令行工具免费版 + 付费版 | ★ 2.2k | 2 天前 | TypeScript | ChatGPT · Claude.ai |
| Code Assistant | 70 · 存在缺口 | 桌面应用免费 + 模型费 | ★ 183 | 1 天前 | Rust | Claude.ai · OpenAI API · Claude API |
| OrkasVideoStudio | 56 · 缺口较多 | 命令行工具免费 + 模型费 | ★ 327 | 12 天前 | TypeScript | Codex · Claude Code |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
代理直接写入源码文件并触发热重载，README 仅提到'审查生成的 diff'，未见文件写入范围、权限白名单或回滚机制的说明（最小权限、回滚扣分）。BYOK 密钥的处理与存储方式完全未说明（敏感数据处理扣分）；架构图清楚展示浏览器 MCP→中间件→Elixir 服务器的数据流，但发送到远程服务器的内容边界（DOM、日志、截图）缺少隐私说明（数据流透明扣分）。正面证据：yarn resolutions 显式覆盖 qs/glob/yaml/esbuild/postcss 等已知易受攻击的传递依赖，CI 使用按提交哈希固定的 actions；外部效果限定在开发模式（生产构建剥离），README 明示；许可证归属清晰（Apache-2.0 + AGPL-3.0 分包）。用户确认仅靠 diff 审查流程，得中等分。
CI 工作流显示系统性的兼容性测试（Astro 5/6/7 × Node 22.19/24 矩阵、每日计划任务、打包后消费者测试），yarn install --immutable 保证依赖可复现安装，自洽性中等；仓库内存在 test/e2e fixtures 与单测（rescript-webapi 运行时测试），但评测证据仅见骨架文件；失败信息仅在测试运行器中可见，面向最终用户的错误提示与构建错误处理在所给文件中缺乏直接证据（扣分）。
受众与场景描述充分：明确列出 PM/设计师/前端开发者三类用户及典型用例（满分）。能力边界有支持栈表（已支持/即将支持）与'仅开发模式'声明（充分）；触发方式（点击元素+自然语言描述）定义清楚，但误触发、歧义请求的处理未说明（略扣）；环境适配给出 Node 22.19+、框架版本兼容矩阵与多框架自动检测（充分）。
信息架构优秀：README 分层清晰（受众、对比表、架构图、快速入门、许可证），规范项给高分。许可证为双重拆分模式且各包 LICENSE 路径明确，但注册表元数据为 NOASSERTION 与实际不符（扣分）。版本管理突出：changesets 强制检查 CI 会阻止缺少变更条目的 PR（满分）。安装说明覆盖三个框架并注明 src/ 目录调整，但自托管打包'仍在演进'（略扣）；命名（@frontman-ai/* workspace 命名）一致；已知限制（开发模式限定、即将支持框架）有披露；维护责任有 SECURITY.md（48 小时确认/90 天修复目标）与贡献指南，但响应时间表是承诺而非可验证记录（略扣）。
输出可用性：diff 审查+热重载+源码定位是可检验的输出形态（充分）；边际价值：与 IDE 工具的差异化（浏览器渲染上下文、非技术成员可用）论证清楚（充分）；成本收益：BYOK 模式费用归属明确、自托管免费，但托管服务'转向付费订阅'的具体定价未给出（略扣）。
事实与推断基本可分：支持栈、兼容矩阵可与 CI 配置相互印证（充分）；但大量核心声明（前端修复质量、模型支持列表、对比表中的竞品能力）指向外部站点文档，仓库内证据不足以追溯（扣分）；CI 配置与 README 声明（Astro 5/6/7、Node 22.19+）交叉一致（中等）；对比表中的竞品判断属营销性推断，未见仓库内依据（略扣）。
- 代理可直接修改源码文件，但仓库未说明写入范围、确认粒度与回滚手段，请在版本控制保护下使用并自行审计每次 diff。
- BYOK 密钥的传输与存储机制在所提供文件中无任何说明，接入前请核实密钥是否经过 Frontman 服务器。
- 工具会采集 DOM、计算样式、截图与服务器日志并送往编排服务，请勿在含敏感数据的开发环境直接启用。
- 注册表许可证元数据为 NOASSERTION，与仓库的 Apache-2.0/AGPL-3.0 拆分许可不一致；服务器部分受 AGPL 传染性约束，商用前请自行评估。
- 托管服务定价模式'正在转向付费'，依赖托管路径的成本评估可能随时变化。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
发布说明摘录
@frontman-ai/client Minor Changes - [#1807](https://github.com/frontman-ai/frontman/pull/1807) [86327f3](https://github.com/frontman-ai/frontman/commit/86327f316ece79a293277172bbc6a88729c8a590) Thanks [@BlueHotDog](https://github.com/BlueHotDog)! - Allow five AI runs before a Frontman trial is required. Users must connect their own AI provider; provider access is validated before a turn is claimed for both subscribers and allowance users. The allowance is shared across projects and does not reset when conversations are deleted. Claimed turns can retry and recover without another …在 GitHub 查看 ↗ -
发布说明摘录
Work on your site - Ask Frontman to fill, replace, or clear text in website forms, including long forms and rich-text fields. You still need to save or submit the form. - Choose from updated AI models, including GPT-6 Sol/Luna and Claude Opus/Sonnet 5.5. Unavailable models now show guidance to help you continue. - Frontman now captures page screenshots without shifting content or missing fixed headers after you scroll. Manage your WordPress site - Organize posts with existing categories and tags as Frontman creates or updates them. …在 GitHub 查看 ↗ -
发布说明摘录
@frontman-ai/client Minor Changes - [#1677](https://github.com/frontman-ai/frontman/pull/1677) [20c6c34](https://github.com/frontman-ai/frontman/commit/20c6c342bb4199d5cc88cc865e072449da5f861f) Thanks [@BlueHotDog](https://github.com/BlueHotDog)! - Include Astro client-routing status in automatic page context. Detect enabled, disabled, and unavailable states from the preview document, and preserve the status in server storage and conversation history. Add conditional lifecycle guidance to agent prompts. …在 GitHub 查看 ↗