pixasso

pixasso-mcp

Pixasso 用の Model Context Protocol（MCP）サーバーです。AI エージェントと開発者向けに、フロントエンドエンジニアリングとデザインをエンドツーエンドで統括します。

Pixasso は、16 の基盤となるエンジニアリングの柱を通じて、独創的なアートディレクションと堅牢なフロントエンドアーキテクチャを結び付けます。LLM、コーディングアシスタント、自律型エージェントが、ユーザーの意図を動的に把握し、デザイントークンを検証し、Graphify スタイルのアーキテクチャ決定グラフを生成し、AI によくある表現パターンに照らしてレイアウトを批評し、40 のリファレンスカタログを検索し、複数のビューポートに対応した自動テストマトリクスを生成できるようにします。

ライブデモと仕様：https://pixasso.erebuzzz.tech または https://pixasso-two.vercel.app

---

システムアーキテクチャ

flowchart TD
    User["Developer / AI Agent Prompt"] --> Client["MCP Client (Claude / Cursor / VS Code / Antigravity)"]
    Client --> Server["pixasso-mcp Server (Stdio / Remote HTTP)"]

    subgraph Tools ["Exposed Tools (JSON-RPC)"]
        T1["pixasso_discover_intent"]
        T2["pixasso_search_references"]
        T3["pixasso_fetch_reference"]
        T4["pixasso_generate_genome"]
        T5["pixasso_generate_brain"]
        T6["pixasso_audit_design"]
        T7["pixasso_generate_test_plan"]
        T8["pixasso_explore_taste"]
        T9["pixasso_seed_taste"]
    end

    Server --> Tools

    subgraph TasteBrain ["Taste Exploration Engine & Decentralized Swarm"]
        Router["TasteInferenceRouter<br/>(NVIDIA Nemotron 3 Ultra / Workers AI)"]
        D1["Cloudflare D1 SQL<br/>(pixasso-taste-db)"]
        KV["Cloudflare KV Edge Cache<br/>(taste:swarm:bundle)"]
    end

    T1 --> Router
    T2 --> P2["40 Deep Reference Catalogs<br/>(Typography, Shaders, Layouts)"]
    T3 --> P3["Live DOM & Content Extraction<br/>(Linkedom, Readability, SPA Detection)"]
    T4 --> P4["Design Genome Specification<br/>(YAML Tokens, Verified References)"]
    T5 --> P5["Design Brain DAG<br/>(Mermaid Decision Graph)"]
    T6 --> P6["Objective Critique Engine<br/>(5-Pillar Scorecard)"]
    T7 --> P7["Automated Interface QA<br/>(390px, 768px, 1024px, 1440px)"]
    T8 --> D1
    T8 --> KV
    T9 --> D1

---

デプロイと接続トランスポート

Pixasso MCP は、2 種類のトランスポートアーキテクチャを併せて提供します。

1. ローカル Stdio（npm）：stdio を介してマシン上でローカルに実行され、ネットワーク遅延はありません。
2. ホスト型リモート（Cloudflare Workers）：GitHub OAuth で保護されたサーバーレス Streamable HTTP エンドポイントです。ローカルのランタイム依存関係は不要です。

---

1. ホスト型リモートエンドポイント（Streamable HTTP）

リモート接続に対応した任意の MCP クライアントから、次のエンドポイントに直接接続できます。

https://mcp.pixasso.erebuzzz.tech/mcp

接続すると GitHub OAuth の認証プロンプト（read:user、user:email）が開き、セッションの認証を求められます。認証済みの GitHub アカウントには、それぞれ 1 日あたり 200 回のツール呼び出しが割り当てられます。

---

2. ローカル Stdio クイックスタート

ローカルにインストールせず、すぐに実行できます。

npx -y pixasso-mcp

または、グローバルにインストールします。

npm install -g pixasso-mcp

---

クライアント連携

1. Claude Desktop

claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "pixasso-local": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    },
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

2. Cursor

Cursor の MCP 設定（~/.cursor/mcp.json）に追加します。

{
  "mcpServers": {
    "pixasso-local": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    },
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

3. VS Code

.vscode/mcp.json（ネイティブの VS Code MCP と GitHub Copilot 用）または拡張機能の設定（Cline、Roo Code、Continue）に追加します。

{
  "mcpServers": {
    "pixasso-local": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    },
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

4. Claude Code CLI

ローカルまたはリモートで登録します。

# Local stdio
claude mcp add pixasso npx -y pixasso-mcp

# Remote HTTP
claude mcp add pixasso-remote --transport http https://mcp.pixasso.erebuzzz.tech/mcp

5. Google Antigravity と Gemini CLI

~/.gemini/antigravity/mcp_config.json に追加します。

{
  "mcpServers": {
    "pixasso": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    },
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

6. エージェントのインストールプロンプト（AI アシスタントを使って任意の IDE にインストール）

IDE 内の任意の AI コーディングアシスタント（Cursor、VS Code、Windsurf、Claude、Copilot、Cline、Roo Code、Antigravity）にプロンプトを入力すると、Pixasso を自動的に設定できます。以下のプロンプトをコピーして、アシスタントのチャットに貼り付けてください。

Please configure the Pixasso MCP server for my project and editor.

Choose one of the two options:
1. Option A (Hosted Remote, zero local runtime):
   Configure MCP server "pixasso-remote" with URL:
   https://mcp.pixasso.erebuzzz.tech/mcp

2. Option B (Local Stdio):
   Configure MCP server "pixasso" with command "npx" and args ["-y", "pixasso-mcp"]

Add the configuration to the appropriate MCP settings file for this editor (such as .vscode/mcp.json, ~/.cursor/mcp.json, claude_desktop_config.json, or cline_mcp_settings.json) and verify that all 9 Pixasso design and architecture tools are active.

---

公開される MCP ツール

すべてのツールは公式の Model Context Protocol 仕様に準拠し、4 つすべてのディレクトリヒント（readOnlyHint、destructiveHint、idempotentHint、openWorldHint）を宣言しています。

ツール	目的	主な入力	ヒント
pixasso_discover_intent	Taste Inference Engine を活用し、16 の柱とブランドの創成にわたる適応型の問い合わせを合成します。必須のポップアップ質問を含む、独自の美的世界を 3 つ合成します。	projectArchetype、description、targetAudience、hasBrandIdentity、referenceUrls	readOnly、idempotent
pixasso_search_references	厳選されたデザインおよび建築カタログ 40 件を横断して検索します。	query、category、tag	readOnly、idempotent
pixasso_fetch_reference	ライブ HTML を取得し、タイトル、見出し、読み取り可能なテキストを抽出し、クライアント側 SPA を検出して、検証済みの取得結果をキャッシュします。	url、focus	readOnly、openWorld
pixasso_generate_genome	トークン、カラースケール、タイポグラフィ、ライブラリを design-genome.yaml にまとめます。検証済みのリファレンスに対するプログラム上のハードゲートを適用します。	projectName、themeMode、groundTone、typography、colorTokens、references	readOnly、idempotent
pixasso_generate_brain	視覚的な Graphify Mermaid の意思決定グラフとタスク DAG を合成します。	projectName、decisions、tasks	readOnly、idempotent
pixasso_audit_design	マークアップとスタイリングを、AI デザインのアンチパターンに照らして評価します。	componentMarkup、contextDescription	readOnly、idempotent
pixasso_generate_test_plan	複数のビューポート（390px、768px、1024px、1440px）に対応した QA 計画を作成します。	projectName、testUrl、testedViewports	readOnly、idempotent
pixasso_explore_taste	汎用的な AI の定型表現を使わずに、12 のムーブメントとコミュニティがシードした方向性にまたがる、進化し続ける Design Taste Graph を探索します。	query、movement、archetype、includeSwarm、limit	readOnly、idempotent
pixasso_seed_taste	厳格なオプトイン同意のもと、匿名化・サニタイズされた高品質なデザイントークンを分散型 Taste Swarm にシードします。	archetype、movement、typographyTokens、paletteTokens、layoutTokens、motionTokens、uisfxTokens、consentGiven	openWorld、idempotent

ツールの範囲とデザインの完全性に関するハードゲート

• pixasso_discover_intent（Taste Inference と適応型質問の選択）：無料のマルチプロバイダー LLM ルーティング（NVIDIA Nemotron 3 Ultra、OpenRouter の無料モデル、Workers AI、または 12 の基礎的なムーブメント）を使用し、プロジェクトの概要に直接合わせた独自の美的世界を 3 つ作成します。返される compulsoryPopupQuestions には、ask_question を介して提示するブランドに関するゲート、ドメインの決定事項、分散型 Taste Swarm への同意の選択肢が含まれます。
• pixasso_explore_taste（進化し続ける Taste Graph）：厳選されたムーブメントとコミュニティのシードを照会します。タイポグラフィの組み合わせ、WCAG に照らして評価されたパレット、レイアウトの幾何学的構成、マイクロインタラクションの音声キューを返します。
• pixasso_seed_taste（同意を条件とする Swarm へのシード）：クライアントノードが、サニタイズされたデザイントークンを匿名で Cloudflare D1 にシードできるようにします。コードや非公開のテキストが送信されることは一切ありません。
• pixasso_fetch_reference（実コンテンツの分析）：自律型モデルは、ドメイン名だけから視覚的特徴を幻覚することがよくあります。pixasso_fetch_reference はライブページを調査し、Mozilla Readability を使用して DOM の見出し、メタデータ、表示されるリンク、読み取り可能なテキストを抽出します。ページが空のクライアント側 SPA シェル（テキストが 200 文字未満）の場合は、エージェントが視覚的な説明を捏造しないよう、renderedContentDetected: false を設定します。
• pixasso_generate_genome のリファレンスゲート：pixasso_generate_genome に渡すすべてのリファレンス URL は、アクティブなセッションで事前に pixasso_fetch_reference を使って検証する必要があります。未取得の URL を渡すと、ツールは説明付きのエラーを返して呼び出しを拒否します。さらに、未レンダリングの SPA シェルは、スクリーンショットによる検証なしに epistemicStatus: 'known' を申告できません。

---

アーキテクチャのライフサイクル

sequenceDiagram
    autonumber
    participant Agent as Autonomous Agent
    participant MCP as pixasso-mcp
    participant Engine as Design Engine

    Agent->>MCP: pixasso_discover_intent(projectType)
    MCP-->>Agent: 16-Pillar Clarification Matrix & Brand Gate
    Agent->>Agent: Interactive User Alignment (ask_question)
    Agent->>MCP: pixasso_generate_genome(alignedSpecs)
    MCP-->>Agent: Validated design-genome.yaml
    Agent->>MCP: pixasso_generate_brain(decisions)
    MCP-->>Agent: Mermaid Decision Map & Component DAG
    Agent->>Engine: Component Fabrication (Semantic HTML5 / CSS / React)
    Agent->>MCP: pixasso_audit_design(componentMarkup)
    MCP-->>Agent: 5-Pillar Scorecard & Anti-Pattern Check
    Agent->>MCP: pixasso_generate_test_plan(viewports)
    MCP-->>Agent: Multi-Viewport Overflow Matrix (390px to 1440px)

---

16のアーキテクチャの柱

Pixassoは、16の異なるエンジニアリング分野を統合します。

1. UIとビジュアルデザイン：トーン、コントラスト、幾何学、素材感を定めます。
2. セマンティックHTML5とJSX：意味のあるDOM階層とARIAロールを構築します。
3. モダンCSSとTailwind：カスタムプロパティ、コンテナークエリ、サブグリッドレイアウトを活用します。
4. TypeScriptとJSロジック：厳密な型付け、不変のスキーマ、実行時のコントラクトを扱います。
5. フレームワークアーキテクチャ：React、Next.js、Svelte、Vue、Astroのパラダイムに対応します。
6. 状態管理：Zustand、Redux Toolkit、シグナル、コンテキストの境界を扱います。
7. APIとWebSockets：ストリーミングエンドポイント、SSEテレメトリー、リアルタイム状態を扱います。
8. クライアント認証UX：楽観的なセッション、トークンのライフサイクル、安全なストレージを扱います。
9. フォームとZodによるバリデーション：型安全なスキーマ検証とリアルタイムのフィードバックを実現します。
10. モーションと3D WebGL：Three.jsシェーダー、CSSハードウェアトランスフォーム、WebGPUを活用します。
11. レスポンシブなマルチデバイスデザイン：390px、768px、1024px、1440pxのビューポートで確認します。
12. WCAG AA/AAAアクセシビリティ：キーボードナビゲーション、フォーカスリング、スクリーンリーダーのテストを扱います。
13. Core Web Vitals：INP、LCP、CLSの最適化とアセットのツリーシェイキングを行います。
14. テストアーキテクチャ：Vitest、Playwright、自動化されたオーバーフローチェックを活用します。
15. ツールとDX：ESLint、Prettier、Vite、自動化されたCIパイプラインを活用します。
16. エッジデプロイ：GitHub Pages、Vercel、Cloudflareで不変のリリースを実現します。

---

生きたテイストブレインとスウォームメモリー（毎日のエッジ同期）

Pixasso MCPには、BitTorrentのシーディングに着想を得た、自律的な探索レイヤーと分散型の「Taste Swarm」が備わっています。繰り返し質問したり、ありきたりなAIの定型表現に頼ったりするのではなく、Pixassoはデザインの潮流を継続的に探索し、独自の美的世界を創り出し、同意を得たピアノードから、洗練されたトークンの組み合わせを費用ゼロで学習します。

生きたスウォームメモリーのステータス

• ストレージ：Cloudflare D1 Serverless SQL（pixasso-taste-db）
• エッジキャッシュ：グローバルCloudflare KV（taste:swarm:bundle）
• 毎日のメモリー統合：Cloudflare Workers CronとGitHub Actionsにより、00:00 UTCに実行
• ライブメモリーエンドポイント：https://mcp.pixasso.erebuzzz.tech/taste/brain

graph TD
    subgraph SwarmMemoryCore ["Living Taste Brain & Swarm Core"]
        Core["Swarm Memory Nexus<br/>- D1 Relational Engine<br/>- Daily Memory Sync"]
    end

    subgraph ActiveClusters ["Top Learned Aesthetic Clusters"]
        C1["Swiss International & Grotesk<br/>- Geometry: Rigid 12-col grid<br/>- Contrast: 18.2:1<br/>- Weight: 14%"]
        C2["Warm Editorial Poise<br/>- Geometry: Split-screen column<br/>- Serif: Newsreader + Mono<br/>- Weight: 12%"]
        C3["Retro-Futurist Monospace HUD<br/>- Ground: CRT Dark (#080b09)<br/>- Display: JetBrains Mono<br/>- Weight: 11%"]
        C4["Neo-Brutalism & High Contrast<br/>- Geometry: Asymmetric Bento<br/>- Borders: 2px Solid Ink<br/>- Weight: 10%"]
        C5["Bio-Digital Solarpunk<br/>- Ground: Earth Stone (#f4f3ef)<br/>- Motion: Organic Spring<br/>- Weight: 9%"]
    end

    subgraph LearningPipeline ["Daily Swarm Convergence"]
        T1["Decentralized Peer Seeds<br/>- Anonymized Design Tokens"] --> AntiTrope["Quality Gate Heuristic<br/>- Anti-Trope & Contrast Filter"]
        AntiTrope --> Core
        Core --> C1
        Core --> C2
        Core --> C3
        Core --> C4
        Core --> C5
        Core --> EdgeKV["Edge KV Distribution Cache<br/>- Sub-millisecond Latency"]
    end

---

ゼロコスト推論ルーター：APIキーは必要ですか？

いいえ。Pixasso MCPの利用にAPIキーは一切必要ありません。

Pixasso MCPは、開発者とエージェントがすぐに完全無料で利用できるよう、階層型のフォールバックアーキテクチャで構築されています。

Tier	Provider / Engine	API Key Requirement	Purpose & Fallback Behavior
Tier 1	NVIDIA NIM（nvidia/nemotron-3-ultra-550b）	任意（サーバーシークレット）	高度なアートディレクションと、型破りなパレットの生成に使用します。NVIDIAはbuild.nvidia.comで1,000クレジット分の無料トライアルを提供しています。設定されていない場合は、直ちにTier 2へ進みます。
Tier 2	OpenRouter Free Tier（llama-3.3-70b-instruct:free、gemini-2.0-flash-exp:free）	任意（サーバーシークレット）	無料のマルチモデル推論を提供します。必要なのは、残高が$0の無料OpenRouterアカウントのみです。設定されていない場合は、直ちにTier 3へ進みます。
Tier 3	Cloudflare Workers AI（@cf/meta/llama-3.3-70b-instruct）	不要（組み込み）	WorkerのAIバインディングを介して、Cloudflareエッジ上で直接実行します。Cloudflareでは外部キーなしで、1日あたり10,000の無料ニューロンを利用できます。
Tier 4	Foundational Design Graph（厳選された12の潮流）	不要（完全オフライン）	12の洗練された潮流を組み合わせた、決定論的なデザインペアリングを行います。ネットワーク呼び出し、遅延、トークンコストは一切発生しません。

ローカルStdioユーザー向け（npx -y pixasso-mcp）

APIキーや設定ファイルを用意する必要はありません。ローカルのstdioサーバーは、クラウドに依存せず、オフラインの基盤グラフとローカルルールで動作します。

独自のリモートワーカーをデプロイするセルフホスター向け

Cloudflare Worker の独自インスタンスをデプロイし、NVIDIA NIM または OpenRouter への接続を希望する場合は、必要に応じて Wrangler を使ってシークレットを保存できます。

# Optional: Set NVIDIA NIM API key
npx wrangler secret put NVIDIA_API_KEY

# Optional: Set OpenRouter API key
npx wrangler secret put OPENROUTER_API_KEY

これらのシークレットを省略しても、ワーカーはエラーなしで Cloudflare Workers AI とオフラインの基盤グラフをシームレスに使用します。

---

リソースとプロンプト

リソース（pixasso://）

• pixasso://references/{catalogName}：タイポグラフィシステム、モーションの振り付け、サウンドデザイン、シェーダーパラメーターなど、29 のリファレンスカタログすべてに直接アクセスできます。
• pixasso://templates/{templateName}：design-genome.yaml、interface-test-plan.md、component-implementation-spec.md など、11 の本番用ブループリントすべてにアクセスできます。

プロンプト（mcp://prompts/）

• intent-discovery：フォーム疲れを起こさずに、適応型ユーザーインタビューを開始するためのプロンプトです。
• frontend-architecture：16 の柱から成る完全なアーキテクチャブループリントを作成します。
• design-critique：厳密なデザイン監査を実行して、AI にありがちな視覚表現を特定し、排除します。
• typography-direction：調和の取れたディスプレイ書体、セリフ体、等幅書体の組み合わせを考案します。
• interface-qa：複数のデバイスでビューポートテストと感覚的な検証を実施します。

---

ライセンスとプライバシー

• ライセンス：MIT (c) Erebuzzz。詳細は LICENSE をご覧ください。
• プライバシーポリシー：テレメトリーなし、プロンプトの記録なし、一時的なメモリ内処理。詳細は PRIVACY.md をご覧ください。