frontman-ai/frontman

解決する課題

Frontmanは、間隔、色、コピーの調整といった小さなUI変更のために、開発者がIDEを開き、正しいファイルを見つけ、デプロイサイクルを管理しなければならないというフロントエンド開発における摩擦を解消します。技術者ではないチームメンバーや開発者が、ブラウザ上で直接これらの視覚的な修正を行うことを可能にします。

仕組み

Frontmanは開発サーバー（Next.js、Astro、またはVite）に統合され、ブラウザのオーバーレイで実行されるAIエージェントとして機能します。Model Context Protocol (MCP) を使用して、ライブアプリケーションとソースコードの間のギャップを埋めます。画面上の要素をクリックすると、エージェントはライブDOM、計算されたCSS、コンポーネントツリーを分析し、対応するソースファイルを特定します。希望する変更を平易な英語で記述すると、エージェントがコード編集を生成・適用し、即座にホットリロードをトリガーします。

対象ユーザー

開発者の空き時間を待たずにUIを洗練させたいプロダクトマネージャーやデザイナー、そして単なるソースコードではなくアプリケーションのレンダリング状態を理解するAIツールを求めるフロントエンド開発者向けに設計されています。

ハイライト

• ライブコンテキスト認識： 計算されたCSS、コンポーネントツリー、サーバーログを確認し、静的コード解析では見逃される可能性のある正確な編集を可能にします。
• フレームワーク統合： Next.js、Astro、Viteをサポートし、React、Vue、Svelteを自動検出します。
• BYOK (Bring Your Own Key)： OpenAI、Anthropic、OpenRouterを含む様々なLLMプロバイダーと互換性があります。
• 開発者に優しい： 実際のコードベースを編集し、既存のレビューワークフローに統合されるため、本番ビルドに影響を与えません。