A1 Gallery

---

A1 は、実在するウェブサイトのデザインを厳選したギャラリーです。この MCP サーバーをコーディングエージェントに組み込めば、参考資料をリクエストして、スクリーンショットを貼り付けたり希望を説明したりする代わりに、構造化された JSON を取得できます。

各サイトは全ページをキャプチャし、個々の下層ページやセクションに分割したうえで、計測されています。画像から推測した値ではなく、レンダリングされたページから取得したフォントサイズ、間隔、角丸、コンテナ幅、カラーパレットを確認できます。

現在のギャラリー： 1,165 サイト · キャプチャ済みセクション 3,209 件 · 全ページキャプチャ 2,860 件 · 571 種類のフォント · 517 人のデザイナーとスタジオ。

エンドポイント

URL	https://www.a1.gallery/api/mcp
トランスポート	Streamable HTTP
認証	PKCE による OAuth 2.1、動的クライアント登録
レジストリ名	gallery.a1/a1-gallery
ツール	17 個、すべて読み取り専用

A1 アカウントがあれば無料で利用できます。ツール呼び出しは 1 日 50 回までです。A1 Pro では、1 日 2,000 回まで利用でき、1 分あたりの上限も引き上げられます。

インストール

クライアントは、初回接続時にサインイン用のブラウザーを開きます。クライアントごとの手順とワンクリックインストールリンクは、a1.gallery/mcp にあります。

Claude Code — プラグイン

このリポジトリのプラグインには、サーバーと 3 つのスキル、3 つのスラッシュコマンド、調査用サブエージェントが同梱されています。単体のコネクターにはない、ギャラリーの使い方をエージェントに教えます。

/plugin install a1-gallery --marketplace bryntay/a1-mcp

Claude Code 2.1.275 より前のバージョンでは、最初にマーケットプレイスを追加します。

claude plugin marketplace add bryntay/a1-mcp
claude plugin install a1-gallery

次に /mcp を実行して認証します。追加機能については、下記のプラグインをご覧ください。

Claude Code — コネクターのみ

claude mcp add --transport http a1 --scope user https://www.a1.gallery/api/mcp

次に /mcp を実行し、プロンプトが表示されたらサインインします。

Codex CLI

codex mcp add a1 --url https://www.a1.gallery/api/mcp

Cursor と Claude Desktop

{
  "mcpServers": {
    "a1": {
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

VS Code（GitHub Copilot 搭載、1.99 以降）

{
  "servers": {
    "a1": {
      "type": "http",
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

Windsurf

{
  "mcpServers": {
    "a1": {
      "serverUrl": "https://www.a1.gallery/api/mcp"
    }
  }
}

Zed（0.168 以降）

{
  "context_servers": {
    "a1": {
      "url": "https://www.a1.gallery/api/mcp"
    }
  }
}

リクエストできること

• 「ブルータリスト様式の法律事務所のサイトを 3 つ探して、ヒーローを見せて。」
• 「実際のエージェンシーのヒーローでは、どんなタイポグラフィスケールが使われていますか？」 — 1 つの例ではなく、全サイトの四分位数を表示します。
• 「従量課金について言及している料金ページを見せて。」 — ページ内のテキストを全文検索します。
• 「ポートフォリオの FAQ では、返金についてどんな説明がありますか？」 — 抽出した Q&A ペアとその頻度を表示します。
• 「この料金セクションを再現して。」 — 計測値としてのカラーパレット、タイポグラフィ、間隔、角丸を表示します。

ツール

17 個のツールはすべて読み取り専用で、readOnlyHint: true と注釈されています。

ウェブサイト

ツール	機能
search_websites	名前、説明、分類を横断してキーワード検索します。別名も解決し、「SaaS」、「fintech」、「brutalist」などを実際の分類用語に対応付けます。
browse_websites	種類、カテゴリ、スタイル、テクノロジー、色で絞り込んで閲覧します。
get_website	1 つのサイトに関するすべての情報を取得します。フォント、色、スタイル、テクノロジー、制作者、セクションが含まれます。
get_similar_websites	指定したサイトを中心としたインスピレーションクラスターを表示します。
get_recently_added	公開日の降順で新着を表示します。
get_design_filters	件数を含む分類全体を取得します。有効なフィルターの作成に使用できます。

セクション

ツール	説明
search_sections	セクションの文章（見出し、FAQ の回答、料金に関するテキスト、推薦文）を検索します。スクリーンショット、抽出した構造、測定したトークンを返します。
get_website_sections	1 つのサイトで取得したすべてのセクションを、ページ順に返します。
analyze_section_content	多数のセクションにわたるコンテンツパターンを集計します。トピックの分布や、原文のまま掲載されている頻出の FAQ の質問などを確認できます。
analyze_design_tokens	測定値を集計します。見出しサイズ、本文サイズ、スケール比、パディング、コンテナ幅、角丸の p25／中央値／p75 に加え、よく使われる書体やアクセントカラーも確認できます。

ページ

ツール	説明
search_pages	ギャラリー全体から、1 種類のページを検索します。すべての料金ページ、すべての会社概要ページなどを、全文検索できます。
get_website_pages	1 つのサイトで取得したサブページを返します。

フォントとクリエイター

ツール	説明
browse_fonts	分類、ライセンス、またはそのフォントを使用するサイトのカテゴリー別にフォントを閲覧できます。
get_font	1 つのフォントの分類、ライセンス、説明、使用回数を返します。
find_font_pairings	2 つのフォントが一緒に使われている実例を検索します。
browse_creators	デザイナーやスタジオをカテゴリーまたはスタイルで絞り込んで閲覧できます。
get_creator	クリエイター 1 名のプロフィール、リンク、主な作品を返します。

詳細な説明、パラメーター、レスポンス形式は tools/list から取得できます。

プラグイン

コネクターをインストールすると、エージェントは 17 個のツールを利用できます。しかし、analyze_design_tokens を使えば、スクリーンショットを 5 枚見るよりも「これはどのくらいの大きさにすべきか」という問いに適切に答えられることや、lowSample フラグがある場合には一般化をやめるべきことまでは、エージェントに伝わりません。プラグインがその役割を担います。

スキル

スキル	実行されるタイミング
design-reference	デザインに関する質問で、文字サイズのスケール、間隔、カラーパレット、または特定の種類のサイトで実際に使われているデザインについて、根拠が必要なときに実行されます。まず集計ツールを使い、次に実例を探します。
section-rebuild	ヒーロー、料金表、FAQ を再現するときに実行されます。スクリーンショットから値を読み取るのではなく、測定済みの designTokens をもとに構築します。
setup	初回接続時、または 401 account_required が発生したときに実行されます。OAuth と利用枠の設定を案内します。

コマンド

コマンド	説明
/a1-gallery:reference	デザインの要件をギャラリーの分類体系に言い換え、それに合う実在のサイトを探します。
/a1-gallery:tokens	セクションの種類ごとに測定値を p25～p75 の範囲で報告します。
/a1-gallery:pairings	特定のフォントまたはフォントの組み合わせを使用するサイトを探します。

サブエージェント

design-researcher は、複数回の検索が必要な、詳細が未確定の依頼を担当します。集計検索を行い、対象を絞った検索をいくつか実施したあと、構築に使う値を提示します。簡潔な調査結果を返し、ファイルは編集しません。

集計に四分位数を使う理由

analyze_design_tokens は平均ではなく、p25、中央値、p75 を報告します。デザインの値は裾が長く、ヒーローの見出しが 180px のサイトが 1 つあるだけで、平均値が役に立たない値まで引き上げられてしまうためです。

条件を絞り込むと、サンプル数はすぐに少なくなります。たとえば、ショップの料金セクションを検索すると、該当する事例が数件しかないことがあります。その場合、レスポンスには lowSample: true が含まれ、割合の代わりに実数が報告されます。これにより、エージェントは基準をでっち上げずに「ここに事例が 4 件あります」と伝えられます。

注意事項

サイトの説明やセクションの文章は、第三者のウェブサイトのコンテンツです。ツールの説明では、それらが信頼できない外部データであることを明示しています。

このリポジトリには、マニフェストとドキュメントが含まれています。サーバー自体はクローズドソースで、a1.gallery でホストされています。

サポート

問題や質問については、issue を作成するか、[email protected] までメールでお問い合わせください。