pixasso

pixasso-mcp

Pixasso 的模型上下文协议（MCP）服务：面向 AI Agent 和开发者的完整端到端前端工程与设计编排器。

Pixasso 将前瞻性的艺术指导与稳健的前端架构相结合，涵盖 16 个基础工程领域。它让大模型、编码助手和自主 Agent 能够动态发现用户意图、验证设计令牌、编译 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 同时提供两种传输架构：

1. 本地 Stdio（npm）：通过 stdio 在本机运行，网络延迟为零。
2. 托管远程服务（Cloudflare Workers）：无服务器 Streamable HTTP 端点，通过 GitHub OAuth 保护，无需本地运行时依赖。

---

1. 托管远程端点（Streamable HTTP）

将任何兼容远程服务的 MCP 客户端直接连接到：

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

连接后会打开 GitHub OAuth 提示词（read:user、user:email），用于授权你的会话。每个通过身份验证的 GitHub 账户每天可调用工具 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. Agent 安装提示词（通过 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 规范，并声明全部四项目录提示（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	生成多视口 QA 计划（390px、768px、1024px、1440px）。	projectName、testUrl、testedViewports	readOnly、idempotent
pixasso_explore_taste	探索涵盖 12 种设计运动和社区种子方向的动态 Design Taste Graph，避免泛化的 AI 套路。	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 包含品牌门槛、领域决策，以及去中心化 taste swarm 的同意选项，供通过 ask_question 展示。
• 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 标记为假，以免 Agent 编造视觉描述。
• 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：使用自定义属性、容器查询和 subgrid 布局。
4. TypeScript 和 JS 逻辑：采用严格类型、不可变架构和运行时契约。
5. 框架架构：涵盖 React、Next.js、Svelte、Vue 和 Astro 范式。
6. 状态管理：运用 Zustand、Redux Toolkit、signals 和 context 边界。
7. API 和 WebSockets：处理流式端点、SSE 遥测和实时状态。
8. 客户端身份验证体验：管理乐观会话、令牌生命周期和安全存储。
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，并对资源进行 tree-shaking。
14. 测试架构：使用 Vitest、Playwright 和自动溢出检查。
15. 工具链和开发者体验：采用 ESLint、Prettier、Vite 和自动化 CI 管道。
16. 边缘部署：在 GitHub Pages、Vercel 和 Cloudflare 上发布不可变版本。

---

持续演进的品味大脑与集群记忆（每日边缘同步）

Pixasso MCP 具备自主探索层和去中心化的“品味集群”，其灵感来自 BitTorrent 做种。Pixasso 不会重复提问或默认采用泛泛的 AI 套路，而是持续探索设计潮流，综合打造专属美学世界，并从经过同意的对等节点学习高水准的设计令牌组合，且无需任何费用。

集群记忆状态

• 存储：Cloudflare D1 无服务器 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 采用分层回退架构，旨在让开发者和 Agent 开箱即可完全免费使用：

层级	提供方 / 引擎	API 密钥要求	用途与回退行为
第 1 层	NVIDIA NIM（nvidia/nemotron-3-ultra-550b）	可选（服务端密钥）	提供高级艺术指导和别具一格的配色方案生成。NVIDIA 在 build.nvidia.com 提供 1,000 个免费试用额度。若未设置，则立即切换到第 2 层。
第 2 层	OpenRouter 免费层（llama-3.3-70b-instruct:free、gemini-2.0-flash-exp:free）	可选（服务端密钥）	提供免费的多模型推理。只需拥有余额为 $0 的免费 OpenRouter 账户。若未设置，则立即切换到第 3 层。
第 3 层	Cloudflare Workers AI（@cf/meta/llama-3.3-70b-instruct）	无（内置）	通过 Worker 的 AI 绑定，直接在 Cloudflare 边缘运行。Cloudflare 每天提供 10,000 个免费神经元，无需任何外部密钥。
第 4 层	基础设计图谱（12 种精选设计潮流）	无（100% 离线）	在 12 种高品味设计潮流之间进行确定性设计搭配。完全离线运行，无网络调用、无延迟，也不消耗令牌。

本地 Stdio 用户（npx -y pixasso-mcp）

无需提供任何 API 密钥或配置文件。本地 stdio 服务将运行离线基础图谱和本地规则，完全不依赖云端。

部署自有远程 Worker 的自托管用户

如果你部署了自己的 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

如果省略这些密钥，你的 Worker 将无缝使用 Cloudflare Workers AI 和离线基础图谱，不会出现任何错误。

---

资源与提示词

资源（pixasso://）

• pixasso://references/{catalogName}：直接读取全部 29 个参考目录，包括排版系统、动态编排、声音设计和着色器参数。
• pixasso://templates/{templateName}：访问全部 11 个生产蓝图，包括 design-genome.yaml、interface-test-plan.md 和 component-implementation-spec.md。

提示词（mcp://prompts/）

• intent-discovery：用于启动自适应用户访谈，避免表单疲劳。
• frontend-architecture：搭建完整的 16 大支柱架构蓝图。
• design-critique：执行严格的设计审查，识别并消除 AI 视觉套路。
• typography-direction：构思和谐的展示字体、衬线字体和等宽字体搭配。
• interface-qa：执行多设备视口测试和感官验证。

---

许可证与隐私

• 许可证：MIT (c) Erebuzzz。详见 LICENSE。
• 隐私政策：零遥测、零提示词记录、仅在内存中进行临时处理。详见 PRIVACY.md。