frontman-ai/frontman

解决的问题

Frontman 是一个 AI 编码代理，允许非技术团队成员（如产品经理和设计师）无需打开 IDE，即可在浏览器中直接进行前端修复。通过让用户点击元素并用自然语言描述更改，Frontman 能够直接更新实际源代码，消除了设计 QA 和交接流程中的摩擦。

如何工作

Frontman 与您的本地开发服务器（支持 Next.js、Astro 和 Vite）集成，并将其转换为 MCP 服务器。这使得 AI 代理能够访问实时浏览器上下文（包括 DOM 树、计算后的 CSS、组件树和源码映射）以及服务器端上下文（如路由和日志）。当用户描述更改时，Frontman 会识别正确的源文件，生成编辑内容，并触发热重载以立即显示结果。

适用人群

• 希望无需等待开发人员即可修复文案、间距、颜色和布局问题的 产品经理和设计师。
• 希望获得比传统 IDE 工具更丰富视觉上下文（渲染输出）的 前端开发人员。
• 希望降低前端交接成本和打磨成本的 团队。

主要亮点

• 视觉化编辑：点击正在运行的应用中的任意元素以定位编辑目标。
• 框架支持：支持 Next.js（App 和 Pages Router）、Astro 和 Vite（React、Vue、Svelte）。
• 广泛 LLM 支持：支持 OpenAI、Anthropic、OpenRouter、Fireworks AI、NVIDIA、Google 和 xAI 的自定义密钥（BYOK）。
• 开源：采用双许可证（Apache 2.0 和 AGPL-3.0）发布。
• MCP 集成：使用 Model Context Protocol（MCP）连接浏览器与源代码。