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）連接瀏覽器與原始碼。