Frontend Design Loop MCP

Name: Frontend Design Loop MCP
Author: alexalexalex222

ローカル

github.com/alexalexalex222開発ツール132 週間前に更新

リポジトリ

Frontend Design Loop MCP について

Frontend Design Loop MCPは、スクリーンショットに基づくデザイン反復によって、動作するWebサイトを改善するコーディングエージェント向けツールです。パッチ、スクリーンショット、実行成果物を返し、既存パッチを検査する独立したフローも備えています。

主な機能

01表示結果を見ながらデザインを反復
02採用パッチと検証成果物を返却
03既存パッチを分離環境で評価
04プレビュー起動とスクリーンショット取得
05検出したクライアント向け設定の導入

活用シーン

01動作するが見た目が粗いページの改善
02具体的な目標に沿った改修の確認
03既存パッチへの決定論的チェック
04コーディングエージェントへの画像根拠の提供

MCP 対応

MCPクライアント向けに、デザイン、評価、ツールキットのワークフローを提供します。ローカルプレビューの起動、スクリーンショット取得、パッチの反復や検査を行い、成果物を返します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "alexalexalex222-frontend-design-loop": {
      "command": "uvx",
      "args": [
        "frontend-design-loop-mcp"
      ]
    }
  }
}

起動コマンドuvx frontend-design-loop-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

pypifrontend-design-loop-mcp1.0.0stdio

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Frontend Design Loop MCP

コーディングエージェントはページを動作する状態にできます。Frontend Design Loop は、スクリーンショットに基づく反復と証明用アーティファクトによって、ページの品質を大幅に向上させます。

ベースモデルでページは動作するようになったものの、仕上がりがまだありきたりで、平坦、粗雑、または明らかにデザインが不足している場合にお使いください。メインのデザインワークフローでは、デフォルトで主要なプロバイダーとモデルのレーンを一貫して使用します。そのため、複数モデルへのルーティングはデフォルトではなく、オプションです。

クイックスタート

現在の公開ビルドを PyPI からインストールします。

pipx install frontend-design-loop-mcp

検出された、サポート対象のクライアントをすべて設定します。

frontend-design-loop-setup --install-all-detected-clients

実際の MCP 呼び出し例：

frontend_design_loop_design(
  repo_path="/absolute/path/to/site",
  goal="make the homepage look materially more premium without changing the information architecture",
  provider="gemini_cli",
  model="gemini-3.1-pro-preview",
  preview_command="python3 -m http.server {port}",
  preview_url="http://127.0.0.1:{port}/index.html"
)

エージェント所有のツールキット版

このリポジトリには、エージェント所有のフロントエンドループ向けの追加 MCP エントリーポイントも含まれています。

コンソールスクリプト：frontend-design-toolkit-mcp
モジュールのフォールバック：PYTHONPATH=src .venv/bin/python -m design_toolkit.server

このバージョンの機能は意図的に限定されています。

get_playbook
build_context
run_gates
preview_start
capture_screenshots
preview_stop

MCP を通じて、ビジョンのスコアリング、創造性の評価、パッチの生成を隠れて実行することはありません。ホストエージェントが、計画、編集、スクリーンショットの確認、スコアリング、反復、最終候補の選定を直接担当します。

エンドツーエンドの Codex 演習用プロンプトについては、test-prompt-codex.md をご覧ください。

MCP の機能

frontend_design_loop_design はメインのワークフローです。

ホストエージェントが MCP に実際のリポジトリと具体的なデザイン目標を指定します
MCP がローカルプレビューを起動し、スクリーンショットを取得して、レンダリング結果に基づいて反復します
明示的に上書きしない限り、計画、生成、ビジョンの各段階で、同じ主要プロバイダーとモデルのレーンがデフォルトで使用されます
MCP は最終候補のパッチに加え、スクリーンショットと実行アーティファクトを返します

frontend_design_loop_eval は証明用ワークフローです。

ホストエージェントがすでにパッチを用意している場合に使用します
MCP は分離されたワークツリーにパッチを適用し、決定論的なチェックを実行してスクリーンショットを取得し、証明用アーティファクトを返します

この MCP の独自の強みは次のとおりです。

コーディングエージェントはすでにページを動作する状態にできます
この MCP は、ページの品質を大幅に向上させるのに役立ちます
スクリーンショットに基づく反復と証明用アーティファクトが差別化要因です

公式 MCP Registry のメタデータは server.json で管理されています。

証明ギャラリー

公開されている証明セットには、所有・生成された GA SMB のプレビューと、ACA の全ページ表示による変更前後の比較が含まれています。

選定したヒーロー／上部クロップ

_{11 Budget Movers Augusta}	_{13 Peachtree Flooring Atlanta}	_{19 TNT Cabinets Columbus}
_{21 Henry Plumbing Savannah}	_{22 Silverback Electric Savannah}	_{25 Robins Body & Paint Warner Robins}
_{34 Proof Roofing Services Gainesville}	_{45 Metro Storage Columbus}	_{47 Miller Light Construction Commerce}

ACA ページ全体の変更前／変更後

変更前：初期の ACA ホームページ全体。

ACA full-page before

変更後：ヒーローを強化し、構成を整理して、ページ全体の仕上がりを大幅に向上させた ACA ホームページ。

ACA full-page after

詳しくは、事例インデックスの検証メモをご覧ください。

実際のワークフロー

MCP を実際のリポジトリに指定し、具体的なデザイン目標を与えます。
分離されたワークツリーを作成し、プレビューを起動して、レンダリング済みのスクリーンショットを取得します。
生のコードだけを見るのではなく、実際にレンダリングされたページを基に反復します。
採用案のパッチ、スクリーンショットによる証拠、実行成果物を返すため、ホストエージェントが結果を評価できます。

ワークフローの概要

`frontend_design_loop_design`

次の場合に使用します：

ページは機能しているものの、仕上がりが弱い
セクション構成はできているものの、デザインが不十分
MCP に結果を評価させるだけでなく、ページを改善させたい

主なデフォルト設定：

デフォルトでは、メインの provider と model のレーンをそれぞれ 1 つ使用
planning_mode="single"
vision_mode="on"
section_creativity_mode="on"
プランナーやビジョンのレーンを分けるのは、明示的に指定した場合のみ

`frontend_design_loop_eval`

次の場合に使用します：

ホストエージェントがすでにパッチを用意している
決定的なチェック、スクリーンショット、成果物の取得を行いたい
返されたスクリーンショットを基に、ホストエージェントに結果を評価させたい

返される検証フィールド：

deterministic_passed
vision_pending
vision_scored
final_pass
run_dir
candidate_dir
screenshot_files
patch

`frontend_design_loop_solve`

frontend_design_loop_solve は、高度な無人ワークフロー向けに引き続き利用できますが、公開向けの主要機能ではありません。

インストールとセットアップ

現在の公開インストール方法

pipx install frontend-design-loop-mcp
frontend-design-loop-setup --install-all-detected-clients

GitHub からのインストールも引き続き代替手段として利用できます：

pipx install git+https://github.com/alexalexalex222/frontend-design-loop-mcp.git
frontend-design-loop-setup --install-all-detected-clients

ローカルクローンのパス

git clone https://github.com/alexalexalex222/frontend-design-loop-mcp.git
cd frontend-design-loop-mcp
./scripts/setup.sh

ローカルでのセットアップでは、次の処理を行います。

.venv を作成します
パッケージをインストールします
Playwright Chromium をインストールします
対応クライアントが存在する場合、検出されたクライアントエントリーをインストールします
組み込みの doctor を実行します
stdio スモークテストを実行します

クライアントエントリーを自動インストールせずに、リポジトリ内の環境を使う場合：

FDL_SKIP_CLIENT_INSTALL=1 ./scripts/setup.sh

セットアップヘルパー

一括インストーラー：

frontend-design-loop-setup --install-all-detected-clients

対象を指定するインストーラー：

frontend-design-loop-setup --install-claude --scope user
frontend-design-loop-setup --install-codex
frontend-design-loop-setup --install-gemini
frontend-design-loop-setup --install-droid
frontend-design-loop-setup --install-opencode

設定の表示：

frontend-design-loop-setup --print-claude-config
frontend-design-loop-setup --print-codex-config
frontend-design-loop-setup --print-gemini-config
frontend-design-loop-setup --print-droid-config
frontend-design-loop-setup --print-opencode-config

安全性のデフォルト設定

カスタムコマンドは、デフォルトでシェルを介さない argv として解析されます
シェル構文、置換、bash -c、python -c、node -e などによるインラインのインタープリター実行には、unsafe_shell_commands=true が必要です
デフォルトでは、preview_url は起動したローカルプレビューのオリジンとポートに一致する必要があります
外部プレビューの取得には、unsafe_external_preview=true が必要です
プレビューの準備状況チェックではオリジンをまたぐリダイレクトを拒否し、ブラウザーのスクリーンショットではデフォルトでオリジンをまたぐサブリソースをブロックします
自動コンテキストでは、.env*、.git/、.aws/、.ssh/、.config/gcloud/、.docker/、.kube/、名前に token を含むファイル、サービスアカウント形式の JSON など、一般的なシークレットを含むパスを除外します
ネイティブ CLI プロバイダーには、ホストのシェル環境全体ではなく、最小限の許可リスト環境が引き継がれます
共有ワークツリーの再利用ディレクトリは、デフォルトで無効です

クライアント側のビジョン機能は frontend_design_loop_eval のデフォルトの検証方法です。そのため、ホストエージェントはプロバイダーの認証情報なしでスクリーンショットを評価できます。

プロキシ専用の MiniMax ビジョンレーンは、構造のみを対象とするレビューとして明示的に扱われます。

vision_review_mode="proxy_structural"
完全な自動ビジュアルスコアリングとしては扱われません

検証

オフラインの事前チェック：

PYTHONPATH=src .venv/bin/python scripts/preflight_check.py

stdio スモークテスト：

PYTHONPATH=src .venv/bin/python scripts/smoke_mcp_stdio.py

組み込みの doctor：

frontend-design-loop-setup --doctor
frontend-design-loop-setup --doctor --smoke

ドキュメント

配布状況

現在の公開インストール方法：

pipx install frontend-design-loop-mcp

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。

Frontend Design Loop MCP

Frontend Design Loop MCP について

主な機能

活用シーン

MCP 対応

設定

ツール

詳細

Frontend Design Loop MCP

クイックスタート

エージェント所有のツールキット版

MCP の機能

証明ギャラリー

選定したヒーロー／上部クロップ

ACA ページ全体の変更前／変更後

実際のワークフロー

ワークフローの概要

frontend_design_loop_design

frontend_design_loop_eval

frontend_design_loop_solve

インストールとセットアップ

現在の公開インストール方法

ローカルクローンのパス

セットアップヘルパー

安全性のデフォルト設定

検証

ドキュメント

配布状況

コメント

MCP は初めてですか？

MCP（Model Context Protocol）とは？

MCP サーバーとクライアントの違いは？

ローカルとリモート、どちらを選ぶべき？

Claude や Cursor にサーバーを導入するには？

掲載プロジェクトは審査されていますか？「認証済み」とは？

自分のプロジェクトが掲載されています。どう申請できますか？

`frontend_design_loop_design`

`frontend_design_loop_eval`

`frontend_design_loop_solve`