运行在浏览器中的 AI 代理，能直接访问运行时 DOM 并编辑前端源代码。支持 Next.js、Astro、Vite 框架，无需 IDE 即可用自然语言交付前端变更。
Frontman 是一个创新的前端开发工具，将 AI 代理直接嵌入浏览器环境。与 Cursor、Claude Code、GitHub Copilot 等运行在终端或 IDE 的工具不同，Frontman 的代理同时连接开发服务器和浏览器，能够实时访问 DOM、样式和组件树。
核心特性#
- Visual Component Selection：在浏览器中直接点击选择任意元素，无需查找文件或行号
- Plain English Editing：用自然语言描述想要的变更，AI 直接修改源代码
- Real-time Streaming：代码编辑实时流式写入编辑器，浏览器中即时预览
- Rule Files Auto-loading：自动读取项目的
agents.md、claude.md或自定义规则文件，将技术栈、约定和编码规范注入每个提示 - Git Integration：完成编辑后可直接提交并推送到 Git，无需离开浏览器
支持的框架#
- Next.js：App Router、Pages Router、Turbopack
- Astro：SSR、SSG、Islands
- Vite：React、Vue、Svelte
架构特点#
- 使用 MCP (Model Context Protocol) 进行客户端-服务器通信
- Open Protocol 设计，客户端、服务器和框架适配器解耦且可扩展
- 基于 ReScript (55.2%) 和 Elixir/Phoenix (23.0%) 构建
- Monorepo 结构，包含 chrome-extension、frontman_server、frontman-core 等模块
适用场景#
- 设计师直接调整 UI，无需等待开发者
- 产品经理快速验证 UI 变更
- 开发者处理琐碎 UI 工单，减少 "move this 2px" 类需求
快速开始#
Next.js 项目
npx @frontman-ai/nextjs install
安装后访问 http://localhost:3000/frontman
Astro 项目
astro add @frontman-ai/astro
Vite 项目
npx @frontman-ai/vite install
AI 模型连接#
支持连接 Claude、ChatGPT、OpenRouter 等 AI 订阅服务。
当前状态#
项目处于 Free Beta 阶段，活跃开发中，最新版本 v0.8.0。客户端库和框架集成采用 Apache 2.0 许可，服务端采用 AGPL-3.0 许可。