Framesmith 1.7 – AIエージェントにUI完成を通知する品質ゲート

Framesmith 1.7 は、オープンソースの MCP（Model Context Protocol）サーバーであり、AI プログラミングエージェントにビジュアルな UI キャンバスを提供します。開発者は、フレームワークコードを書く前に UI をスケッチし、ブラウザでプレビューし、AI エージェントとデザインの合意を形成できます。このツールは、UI デザインプロセスを AI 支援開発ワークフローに統合したいチームに特に適しています。

Framesmith のコアコンポーネントには、キャンバスビューアー、品質評価パネル、デザインシステムパネルが含まれます。ビューアーでは、複数のブレークポイントモードでキャンバスをプレビューでき、並べて比較、基盤となる JSON 構造の検査、キャンバスのアーカイブや削除が可能です。品質評価パネルは 0 から 100 のスコアを表示し、カテゴリ別に問題をリストアップし、自動修正可能な問題にはタグを付けます。問題をクリックすると、ライブプレビュー内の該当ノードがハイライトされます。デザインシステムパネルは、キャンバスの有効なデザイントークン（色、タイポグラフィ、スペーシング、ラディウス）を表示し、各トークンの継承元（ワークスペース、プロジェクト、キャンバス）を明示します。

Framesmith のインストールは非常に簡単です。リポジトリのクローンやビルドは不要で、npx コマンドを使用して MCP クライアントに登録するだけです。Claude Code、Codex、Cursor、Windsurf、VS Code（MCP 拡張機能付き）など、MCP 互換のクライアントをサポートしています。すべての操作は標準の stdio MCP インターフェースを介して行われます。ソースからビルドして開発する場合は、GitHub リポジトリをクローンし、npm install と npm run build を実行します。

Framesmith は、キャンバス、ワークスペース、プロジェクトを管理するための一連のツールを提供します。init ツールは現在のリポジトリをバインドし、キャンバスが .framesmith/ ディレクトリに JSON として保存されるようにします。canvas_create ツールは新しいキャンバスを作成し、レイアウトの重複を避けるための多様化シグナルを返します。canvas_list、canvas_move、canvas_archive などのツールはキャンバスのライフサイクルを管理します。viewer_url ツールはビューアーの URL と各キャンバスの個別リンクを返し、共有を容易にします。さらに、workspace_create、project_create、canvas_bind などのツールは高度なコンテナ管理を提供します。

Framesmith のワークフローは「設計を先に、コードは後」を強調します。AI エージェントは MCP ツール呼び出しを通じてキャンバスを作成し、ユーザーはビューアーでデザインをレビューし、エージェントはフィードバックに基づいてキャンバスを修正し、設計が満足されるまで繰り返します。これにより、無駄な作業を減らし、UI 開発の効率を大幅に向上させることができます。

全体として、Framesmith 1.7 は、ビジュアル UI デザインを AI 支援プログラミングに導入する強力なツールであり、品質ゲートとデザインシステム統合を通じて、チームが高品質なインターフェースをより迅速に提供できるよう支援します。