Pixasso MCP Server
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Pixasso MCP ServerCreate a Paper Light theme marketing site and run multi-viewport QA."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Pixasso
The Complete End-to-End Frontend Engineering & Design Orchestrator for AI Agents and Humans.
Live Documentation and Showcase: pixasso.erebuzzz.tech
Overview
Pixasso is a senior design-research, intent-discovery, and full-spectrum frontend engineering orchestrator inspired by Picasso's exploratory breadth. It rejects cookie-cutter AI interfaces, purple gradients, Lucide icon flooding, and superficial templates. Instead, Pixasso guides autonomous coding agents (and human engineers) through a rigorous pipeline:
Intent Discovery -> Design Genome -> Decision Graph -> Capability Graph -> Task DAG -> Specialist Agents -> Automated QAPixasso unifies Art Direction, UX Architecture, Typography Direction, Motion Systems, Full-Stack Frontend Implementation, and Automated Multi-Viewport Testing into a single cohesive skill and Model Context Protocol (MCP) server.
Related MCP server: kiro-frontend-engineer-mcp
Visual Showcase & Themes
Pixasso supports multi-mode aesthetic execution tailored to your product identity:
Theme | Aesthetic Mode | Key Visual Traits |
Paper Light | Architectural Editorial | Warm ivory ( |
CRT Terminal | Retro Phosphor Computing | Phosphor emerald ( |
Pitch Black AMOLED | Deep Space Operations | True |
Interface Previews
Figure 1: Architectural Paper Light Theme with wide display headlines and generative wave synthesizer.
Figure 2: Retro Cathode Ray Terminal Theme with phosphor glow, scanline shader, and telemetry HUD.
Figure 3: Pitch Black AMOLED Theme optimized for high-contrast, edge-density operational dashboards.
Figure 4: Mobile Viewport (390px) verified with zero horizontal DOM overflow and accessible touch targets.
Figure 5: 3D Kinetic Sculpture with procedural faceted cage, PBR metallic core, and orbital gimbal rings.
Figure 6: 15,000 GPU particle galaxy in CRT phosphor mode with mouse gravitational attraction vectors.
Figure 7: 5-Layer precision hardware assembly with interactive exploded-view disassembly slider and callouts.
The 16 Pillars of Frontend Architecture
Pixasso treats frontend engineering not as shallow visual styling, but as a complete 16-pillar software engineering discipline:
Pillar | Discipline | Key Technical Responsibilities |
1. UI & Visual Design | Design Systems & Tokens | Semantic color scales, modular typography scales, surface depth, spacing systems |
2. Semantic HTML & JSX | Document Structure | Accessible landmarks ( |
3. Modern CSS Systems | Styling Architecture | CSS custom properties, container queries, Cascade Layers ( |
4. TypeScript Excellence | Type Safety | Strict mode, discriminated unions for UI state, zero |
5. Framework Architecture | Component Lifecycle | React 19, Next.js App Router, Svelte 5 runes, Vue 3 Composition, Islands Architecture |
6. State Management | Data Flow & Cache | Server state (TanStack Query), client state (Zustand), URL search params as source of truth |
7. API & Realtime Data | Network Transport | Type-safe REST, GraphQL, WebSockets, Server-Sent Events, optimistic UI mutations |
8. Client Authentication UX | Session Security | Route protection guards, PKCE OAuth flows, token refresh queues, zero credential flicker |
9. Forms & Input Validation | Data Integrity | React Hook Form, Zod schema validation, inline error hints, accessible fieldsets |
10. Motion & Animation | Kinetic Direction | Motion (motion.dev), GSAP timelines, WebGL canvas shaders, |
11. Responsive Design | Viewport Versatility | Fluid typography ( |
12. Accessibility (WCAG) | Inclusive Design | WCAG 2.2 AA/AAA compliance, screen reader tree, keyboard traps, focus rings, ARIA live |
13. Core Web Vitals | Performance Budget | LCP under 1.2s, INP under 100ms, CLS at 0, streaming SSR, image srcset optimization |
14. Frontend Testing | Verification Suite | Vitest component unit tests, Playwright end-to-end tests, visual regression checks |
15. Tooling & Bundling | Developer Experience | Vite, Turbopack, Biome/ESLint linting, automated dependency updates, Docker images |
16. Deployment & CDN | Production Release | Edge runtime, CDN cache headers ( |
System Architecture
flowchart TB
subgraph ClientLayer ["Client & IDE Integration"]
Cursor["Cursor IDE"]
Claude["Claude Desktop & Claude Code"]
Antigravity["Google Antigravity & Gemini"]
Codex["VS Code / Codex / Custom Agents"]
end
subgraph Protocol ["Transport Layer"]
JSONRPC["Model Context Protocol (JSON-RPC 2.0 over Stdio)"]
SkillsShim["Native Skills Runtime (SKILL.md)"]
end
subgraph PixassoCore ["Pixasso Engine"]
Discovery["Adaptive Intent Discovery Matrix"]
Genome["Design Genome Engine (YAML + Brain)"]
TaskDAG["Dependency-Aware Task DAG"]
Orchestrator["Specialist Agent Dispatcher"]
end
subgraph KnowledgeHub ["Curated Knowledge Catalogs"]
Pillars["16 Frontend Architecture Pillars"]
TypeSpec["Typography Systems & Variable Fonts"]
MotionSpec["Motion Choreography & Spring Physics"]
SensorySpec["Web Audio API UISFX Engine"]
QASpec["Multi-Viewport & DOM Overflow Verification"]
end
subgraph Specialists ["Specialist Agent Roles"]
ArtDir["Art Director"]
UXArch["UX Architect"]
TypeDir["Typography Director"]
FrontArch["Frontend Architect"]
QAEng["Interface QA Engineer"]
end
subgraph Delivery ["Shipped Artifacts"]
Site["pixasso.erebuzzz.tech"]
CodeProd["Production Component Code"]
DesignBrain["Graphify Design Brain (.md)"]
TestPlan["Operational Test Plan (.md)"]
end
ClientLayer --> Protocol
Protocol --> PixassoCore
PixassoCore <--> KnowledgeHub
PixassoCore --> Specialists
Specialists --> DeliveryOperating Principle: Intent to Validation
Pixasso enforces a structured workflow that turns user intent into verified production code:
flowchart LR
A["Intent Discovery<br/>(ask_question)"] --> B["Design Genome<br/>(Tokens & Modes)"]
B --> C["Design Brain<br/>(Mermaid Graph)"]
C --> D["Reference Analysis<br/>(Benchmarks)"]
D --> E["Task DAG<br/>(Dependencies)"]
E --> F["Specialist Agents<br/>(Code & Motion)"]
F --> G["Interface Testing<br/>(Multi-Viewport QA)"]
G --> H["Final Verification<br/>(Shipped UI)"]sequenceDiagram
autonumber
actor User as Developer / Designer
participant Pixasso as Pixasso Orchestrator
participant MCP as Pixasso MCP Server
participant Genome as Design Genome
participant Agents as Specialist Agents
participant QA as Automated Interface QA
User->>Pixasso: Request interface or application
Pixasso->>User: Compulsory Popup Questions (ask_question)
User-->>Pixasso: Theme, typography, dimensionality, conversion goals
Pixasso->>MCP: pixasso_generate_genome
MCP-->>Genome: Structured Design Genome (YAML)
Pixasso->>MCP: pixasso_generate_brain
MCP-->>Pixasso: Mermaid Decision Tree and Task DAG
Pixasso->>Agents: Dispatch concurrent implementation tasks
Agents-->>Pixasso: Production HTML5, Tailwind, TypeScript, Motion code
Pixasso->>QA: Multi-viewport audit (390px, 768px, 1024px, 1440px)
QA-->>Pixasso: Zero DOM overflow and accessibility sign-off
Pixasso->>User: Verified components, live preview, and test reportCompulsory Popup Discovery Gate
Pixasso strictly forbids assuming generic defaults or hiding questions inside plans. Before generating code or planning architectures, agents must call ask_question across key dimensions:
flowchart TD
Prompt["User Prompts New Project"] --> Popup["Compulsory Interactive Popup Modal (ask_question)"]
subgraph Matrix ["Adaptive Discovery Matrix"]
D1["Narrative & Theme<br/>(Paper, CRT-mono, Pitch Black, Brutalist, Editorial)"]
D2["Typography Hierarchy<br/>(Display sans, warm editorial serif, technical mono)"]
D3["Dimensionality Mode<br/>(2D Planar, 2.5D Parallax, 3D WebGL / Spline)"]
D4["Sensory Feedback<br/>(Web Audio UISFX synthesized clicks and snaps)"]
D5["Pillar Focus<br/>(State management, Zod forms, Auth UX, Realtime feeds)"]
end
Popup --> Matrix
Matrix --> Answers["User Answers & Custom Requirements"]
Answers --> Synthesize["Synthesize Design Genome & Task DAG"]Installation & Setup
Pixasso works across all major AI development environments.
1. Unified Automatic Installer (Recommended)
Run the automated installer script from the root of the repository. It detects your installed platforms and configures them automatically:
# Clone the repository
git clone https://github.com/Erebuzzz/pixasso.git
cd pixasso
# Install dependencies and build MCP server
npm install
npm run build
# Run automated multi-platform installer
node scripts/install.jsThe installer automatically configures:
Google Antigravity: Plugin package (
plugins/pixasso) and active MCP configuration.Cursor IDE: Global configuration (
~/.cursor/mcp.json) and local project configuration (.cursor/mcp.json).Claude Desktop: Native MCP server configuration (
claude_desktop_config.json).Claude Code: CLI tool configuration (
claude mcp add).
2. Connection Transports
Pixasso provides dual transport architectures: a hosted remote edge endpoint (zero local setup) and a local stdio runner via npm.
flowchart TD
subgraph Clients ["Supported MCP Clients"]
C1["Cursor IDE"]
C2["VS Code (Copilot / Cline / Roo)"]
C3["Claude Desktop"]
C4["Claude Code CLI"]
C5["Google Antigravity / Gemini"]
end
subgraph RemoteTransport ["Option A: Hosted Remote (Zero Local Runtime)"]
R_URL["Endpoint: https://mcp.pixasso.erebuzzz.tech/mcp"]
R_AUTH["GitHub OAuth 2.0 (read:user, user:email)"]
R_KV["Edge KV Rate Limiter (200 calls/day per user)"]
R_WORKER["Cloudflare Worker + Durable Objects"]
R_URL --> R_AUTH --> R_KV --> R_WORKER
end
subgraph LocalTransport ["Option B: Local Stdio (Full Offline Execution)"]
L_NPX["npx -y pixasso-mcp"]
L_LOCAL["Node.js stdio JSON-RPC process"]
L_NPX --> L_LOCAL
end
subgraph Engine ["Pixasso Design Engine (7 Tools)"]
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"]
end
C1 & C2 & C3 & C4 & C5 -->|Remote HTTP SSE| R_URL
C1 & C2 & C3 & C4 & C5 -->|Local Subprocess| L_NPX
R_WORKER --> Engine
L_LOCAL --> EngineOption A: Hosted Remote Endpoint (Zero Local Runtime)
Connect any remote-compatible MCP client directly to:
https://mcp.pixasso.erebuzzz.tech/mcpZero dependencies: No Node.js runtime, no local dependencies, and zero background CPU usage.
Authentication: Secured with GitHub OAuth (
read:user,user:email). On initial tool invocation, your client or browser will present an authorization link to authenticate your GitHub account.Usage quota: 200 free tool calls per day per authenticated user, reset every 24 hours. Rate limits and sessions are managed ephemerally via Cloudflare KV.
Transport: Standard HTTP Streamable SSE (Server-Sent Events) adhering to the MCP specifications.
Cursor IDE (Remote)
Add to ~/.cursor/mcp.json or .cursor/mcp.json:
{
"mcpServers": {
"pixasso-remote": {
"url": "https://mcp.pixasso.erebuzzz.tech/mcp"
}
}
}VS Code (Remote)
Add to .vscode/mcp.json (for native VS Code MCP and GitHub Copilot) or your extension settings (Cline, Roo Code, Continue):
{
"mcpServers": {
"pixasso-remote": {
"url": "https://mcp.pixasso.erebuzzz.tech/mcp"
}
}
}Claude Desktop (Remote)
Add to %APPDATA%\Claude\claude_desktop_config.json (Windows) or ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):
{
"mcpServers": {
"pixasso-remote": {
"url": "https://mcp.pixasso.erebuzzz.tech/mcp"
}
}
}Claude Code CLI (Remote)
Run directly from your terminal:
claude mcp add pixasso-remote --transport http https://mcp.pixasso.erebuzzz.tech/mcpGoogle Antigravity & Gemini CLI (Remote)
Add to ~/.gemini/antigravity/mcp_config.json or ~/.gemini/config/mcp_config.json:
{
"mcpServers": {
"pixasso-remote": {
"url": "https://mcp.pixasso.erebuzzz.tech/mcp"
}
}
}Option B: Published npm Package (Local Stdio)
You can run Pixasso locally on any machine with Node.js installed using npx -y pixasso-mcp.
Cursor IDE
Add to ~/.cursor/mcp.json or .cursor/mcp.json:
{
"mcpServers": {
"pixasso": {
"command": "npx",
"args": ["-y", "pixasso-mcp"]
}
}
}Or install via skills.sh:
npx skills add Erebuzzz/pixassoVS Code (Local Stdio)
Add to .vscode/mcp.json (for native VS Code MCP and GitHub Copilot) or your extension settings (Cline, Roo Code, Continue):
{
"mcpServers": {
"pixasso": {
"command": "npx",
"args": ["-y", "pixasso-mcp"]
}
}
}Claude Desktop
Add to %APPDATA%\Claude\claude_desktop_config.json (Windows) or ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):
{
"mcpServers": {
"pixasso": {
"command": "npx",
"args": ["-y", "pixasso-mcp"]
}
}
}Claude Code CLI
claude mcp add pixasso npx -y pixasso-mcpOr register the marketplace plugin:
/plugin marketplace add Erebuzzz/pixassoGoogle Antigravity & Gemini CLI
Add to ~/.gemini/antigravity/mcp_config.json or ~/.gemini/config/mcp_config.json:
{
"mcpServers": {
"pixasso": {
"command": "npx",
"args": ["-y", "pixasso-mcp"]
}
}
}Or install the skill bundle:
npx skills add Erebuzzz/pixassoLocal Repository Clone (Developers)
If running against your local clone instead of npm, replace "command": "npx" and "args": ["-y", "pixasso-mcp"] with:
{
"mcpServers": {
"pixasso": {
"command": "node",
"args": ["/path/to/pixasso/mcp-server/build/index.js"]
}
}
}Tip: running node scripts/install.js configures your local clone path automatically across all installed editors.
3. Agent Installation Prompt (Install in Any IDE via AI Assistant)
You can prompt any AI coding assistant in your IDE (Cursor, VS Code, Windsurf, Claude, Copilot, Cline, Roo Code, Antigravity) to configure Pixasso automatically. Simply copy and paste the prompt below into your assistant chat:
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 the 7 Pixasso design tools are active.ChatGPT / OpenAI Custom GPTs / Web UIs
For web-based LLMs, import the standalone system prompts located in:
skills/pixasso/prompts/pixasso-system-prompt.mdskills/pixasso/prompts/discovery-interview-prompt.mdskills/pixasso/prompts/design-critique-prompt.md
MCP Server Capabilities
The Pixasso MCP Server (mcp-server/) exposes the full design intelligence engine via standard JSON-RPC 2.0:
Tools
Every tool conforms to the official Model Context Protocol specification and declares all four directory hints (readOnlyHint, destructiveHint, idempotentHint, openWorldHint):
Tool Name | Purpose | Parameters | Annotations / Hints |
| Generates adaptive discovery questions across 16 pillars and brand identity |
| readOnly, idempotent |
| Searches 31 curated catalogs (20 references, 11 templates) |
| readOnly, idempotent |
| Fetches live HTML, extracts title/headings/readable text, and flags client SPAs |
| readOnly, openWorld |
| Compiles tokens into validated |
| readOnly, idempotent |
| Generates Graphify-style Mermaid decision map and Task DAG |
| readOnly, idempotent |
| Audits code against generic AI clichés, accessibility guidelines, and 16 pillars |
| readOnly, idempotent |
| Produces automated multi-viewport testing matrix (390px, 768px, 1024px, 1440px) |
| readOnly, idempotent |
Resources
Access 31 curated knowledge resources directly through pixasso:// URIs (20 references and 11 templates):
pixasso://references/frontend-architecture-pillarspixasso://references/typography-systempixasso://references/sound-and-sensory-designpixasso://references/interface-testing-and-qapixasso://references/anti-patterns-and-critiquepixasso://templates/design-genomepixasso://templates/task-graphpixasso://templates/interface-test-plan
Prompts
intent-discovery: Guides the user through adaptive requirement extraction.frontend-architecture: Formulates component architecture across the 16 pillars.design-critique: Provides objective design reviews rejecting AI clichés.typography-direction: Generates hierarchical typography specifications.interface-qa: Generates multi-device QA scripts and DOM assertions.
Showcase Examples
Explore standalone, fully-functional examples in examples/:
Edge Operations Dashboard: Live reactive metrics dashboard with Zod form validation, theme switcher, telemetry feed, and WCAG AA accessibility.
Paper Editorial Layout: Archival publication layout featuring wide grotesque headlines, Newsreader serif body, hairlines, and figure plates.
CRT Phosphor Terminal: Retro computing interface with scanlines, cathode vignette, bracket hotkeys, and simulated serial telemetry.
Harmonic Wave Synthesizer: Interactive mathematical wave canvas running in
requestAnimationFramewith live audio oscillators.3D Spatial Visualization Suite: Interactive Three.js studio inspired by
viettranx/3dviz-pro-max, featuring kinetic geometric sculptures, 15k GPU particle galaxy, and 5-layer exploded hardware assembly with camera presets and real-time shader controls.
3D Spatial Computing & WebGL Architecture (viettranx/3dviz-pro-max Inspiration)
Pixasso integrates proven 3D recipes inspired by viettranx/3dviz-pro-max directly into Pillar 10 (Motion & WebGL 3D):
flowchart TD
subgraph Suite ["Three.js Spatial Studio (examples/3d-suite/)"]
Renderer["WebGLRenderer with Antialiasing & Soft Shadows"]
Orbit["OrbitControls with Damping & Preset Interpolation"]
subgraph Recipes ["Proven Spatial Recipes"]
R1["Kinetic Polyhedron Sculpture<br/>(Faceted cage, PBR metallic core, gyro gimbal rings)"]
R2["Gravitational Particle Galaxy<br/>(15k GPU points, mouse gravity lens, velocity color)"]
R3["Spatial Hardware Exploded View<br/>(5 mechanical layers, disassembly slider, 3D callouts)"]
end
subgraph Adapters ["Adaptive 3-Theme Sync"]
T1["Paper Ivory Mode (#fbfaf7, ink wireframe, clay shading)"]
T2["CRT Phosphor Mode (#0a0f0d, emerald wireframe, scanlines)"]
T3["Pitch Black AMOLED Mode (#000000, chrome, cobalt rim light)"]
end
Renderer --> Recipes
Orbit --> Recipes
Adapters --> Recipes
endDeployment Architecture
Pixasso's showcase site (pixasso.erebuzzz.tech).
Primary: GitHub Pages via GitHub Actions
Pipeline: Automated build and push via
.github/workflows/deploy-site.yml.Domain: Root
CNAMEfile mapped topixasso.erebuzzz.tech.Hosting & Edge: Fastly and GitHub global edge CDN with automatic Let's Encrypt SSL certificates.
Alternative: 1-Click Vercel Deployment
The repository includes a production-grade vercel.json configuration. You can optionally import Erebuzzz/pixasso into Vercel with zero build configuration:
Instant worldwide edge caching.
Clean routing for root site, examples, and screenshot assets.
Automatic preview deployments for pull requests.
flowchart LR
Commit["git push origin main"] --> Actions["GitHub Actions Runner"]
Actions --> Pages["GitHub Pages Edge CDN"]
Pages --> Domain["pixasso.erebuzzz.tech<br/>(Automatic SSL)"]
Commit -.-> Vercel["Optional: Vercel (vercel.json)"]
Vercel -.-> DomainRepository Structure
pixasso/
├── CNAME # Custom domain: pixasso.erebuzzz.tech
├── package.json # Root scripts and workspace config
├── README.md # Full-spectrum documentation and architecture
├── AGENTS.md / CLAUDE.md / GEMINI.md # Multi-agent rules and behavioral guardrails
├── .cursorrules # Cursor IDE rules
├── .cursor/ # Cursor project configs, rules, and skills
├── .github/workflows/deploy-site.yml # Automated GitHub Pages CI/CD pipeline
├── assets/screenshots/ # Multi-viewport screenshots and visual proofs
├── examples/ # Standalone craft demonstrations
│ ├── production-app/ # Edge Operations reactive dashboard
│ ├── paper-editorial/ # Archival editorial publication
│ ├── crt-terminal/ # Phosphor CRT retro terminal
│ └── generative-wave/ # Mathematical wave synthesizer canvas
├── mcp-server/ # Standalone TypeScript MCP Server
│ ├── package.json
│ ├── tsconfig.json
│ └── src/index.ts # JSON-RPC 2.0 tools, resources, and prompts
├── plugins/pixasso/ # Antigravity plugin distribution
├── scripts/ # Tooling, installer, and test suites
│ ├── install.js # Unified multi-platform installer
│ ├── test-mcp.js # Automated MCP JSON-RPC protocol test suite
│ └── serve.js # Local HTTP preview server
├── site/ # Showcase site (pixasso.erebuzzz.tech)
│ ├── index.html # Live website with theme engine and audio
│ └── assets/ # Web assets and mirrored screenshots
├── skills/pixasso/ # CANONICAL installable agent skill
│ ├── SKILL.md # Main skill definition
│ ├── references/ # 20 curated design-research catalogs
│ ├── templates/ # Operational templates (Genome, DAG, QA)
│ └── prompts/ # Modular agent prompts
└── references/ # Editable root reference catalogsAutomated Interface Testing & QA
Pixasso treats testing as a core design deliverable:
flowchart TD
Code["Generated Component Markup"] --> DevServer["Local Dev Server / generative_ui"]
DevServer --> Resizer["Multi-Viewport Sweep (chrome-devtools-mcp)"]
subgraph Matrix ["Viewport Matrix"]
V1["390px Mobile Viewport"]
V2["768px Tablet Viewport"]
V3["1024px Laptop Viewport"]
V4["1440px Desktop Viewport"]
end
Resizer --> Matrix
Matrix --> DOMCheck["DOM Overflow & Layout Audit<br/>(scrollWidth vs innerWidth)"]
subgraph Gates ["Automated Quality Gates"]
G1["Zero Horizontal Overflow"]
G2["Touch Targets >= 44px"]
G3["Visible Focus Rings & ARIA Roles"]
G4["Web Audio Latency < 10ms"]
end
DOMCheck --> Gates
Gates --> SignOff["Sign Off in interface-test-plan.md"]Anti-Pattern Stance
Pixasso actively guards against generic AI aesthetics:
No Purple Gradients: Replaced with intentional monochrome palettes, warm paper tones, or phosphor glow.
No Lucide Flooding: Every icon must serve a precise informational function.
No Blanket Glassmorphism: High-contrast borders, solid surface tokens, and crisp architectural lines replace muddy blurred cards.
No Decorative-Only Motion: Animations must be communicative, respect
prefers-reduced-motion, and run under 300ms.
License & Privacy
License: MIT. See LICENSE.
Privacy Policy: Zero telemetry, zero prompt recording, ephemeral in-memory processing. See PRIVACY.md.
Contributing: See CONTRIBUTING.md.
Security: See SECURITY.md.
Available Tools
7 toolspixasso_audit_designBRead-onlyIdempotent
Audit HTML, JSX, or CSS against generic AI clichés, accessibility guidelines, and the 16-pillar rubric.
| Name | Required | Description | Default |
|---|---|---|---|
| componentMarkup | Yes | HTML, JSX, or CSS to evaluate. | |
| contextDescription | No | Contextual design intent. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false, and openWorldHint=false, so the safety profile is covered. The description adds useful scope detail by naming the three evaluation dimensions. However, it does not disclose what the audit produces (findings, pass/fail, scores) or any limits on input size, which matters since there is no output schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence naming the action and the criteria, with no filler. It is efficient, though the terse '16-pillar rubric' reference is left unexplained.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is a moderately complex analyzer with no output schema, so the description should indicate the shape of the result (issues found, severity, scores). It also never explains what the 16-pillar rubric is or how contextDescription influences the audit, leaving an agent under-informed about outcomes.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so both parameters are documented in the schema, and the description merely restates that markup is HTML/JSX/CSS. It adds no meaning for contextDescription or on how markup and context are combined in the evaluation, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific verb (Audit) and resource (HTML, JSX, or CSS) plus the criteria checked (AI clichés, accessibility, 16-pillar rubric), which clearly separates it from the generate_* and search/fetch_reference siblings. It stops short of explicitly naming a sibling it contrasts with, but an agent can identify the operation without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no guidance on when to call this versus the sibling tools (e.g., after generating a genome or test plan, or before generating markup). No preconditions, no when-not-to-use, and no mention of typical workflow position are given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_discover_intentBRead-onlyIdempotent
Initiate adaptive intent discovery for a frontend project across the 16 pillars and generate tailored popup questions.
| Name | Required | Description | Default |
|---|---|---|---|
| description | Yes | Initial brief or description of the project. | |
| referenceUrls | No | Optional list of reference URLs capturing the desired feel. If omitted or empty, an optional question is included in discovery. | |
| targetAudience | No | Target audience or user persona if known. | |
| hasBrandIdentity | No | Whether an existing brand identity exists or needs to be synthesized from scratch. | |
| projectArchetype | Yes | The primary archetype of the frontend project. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive behavior, so the safety profile is covered. The description adds that it generates popup questions, a useful behavioral detail, but does not describe the interactive process, output format, or any side effects beyond that.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, front-loaded sentence that states the tool's core action and output. No wasted words, though the jargon '16 pillars' could be opaque without context.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description is minimal for a tool that likely initiates a complex, interactive discovery process. It does not explain what the '16 pillars' are, how the popup questions are returned, or what the agent should expect as a result. With no output schema, this leaves a gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so parameters are fully documented in the schema. The description adds no additional meaning about parameter usage, making the baseline score of 3 appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('Initiate') and resource ('intent discovery') for a frontend project, and describes the output ('tailored popup questions'). However, it does not differentiate from sibling tools like generate_genome or audit_design, leaving the agent to infer the distinct role.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool versus alternatives. The word 'Initiate' hints it is a starting step, but no conditions, prerequisites, or exclusions are provided. An agent must infer its place in the workflow.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_fetch_referenceARead-only
Fetch and deconstruct a live reference website server-side. Extracts page title, meta description, heading structure (h1-h4), visible links, and readable text content. Detects client-rendered SPAs (Framer, Webflow, React shells) and flags unrendered content rather than hallucinating. NOTE: Does not extract computed CSS (colors, rendered fonts); use headless browser tools or user screenshots for visual styling.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Target HTTP or HTTPS URL to fetch and analyze. | |
| focus | No | Analytical focus area. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the annotations (readOnly=true, destructive=false, openWorld=true), the description adds real behavioral value: it detects client-rendered SPAs and explicitly 'flags unrendered content rather than hallucinating,' which tells the agent how to interpret sparse results. It stops short of covering rate limits, auth, redirect behavior, or non-idempotency implications despite idempotentHint=false.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences, front-loaded with the core action and output set, then the SPA behavior, then the limitation. Every sentence carries distinct information and none restates the name or annotations.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description does the work of describing return contents and the SPA/CSS limitations, which is sufficient to call it safely. The remaining gap is the unexplained 'focus' parameter, whose behavioral impact is never addressed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds nothing about the 'focus' enum (full/layout/typography/color/motion) and how each value changes what is returned or which extractions are skipped, and the schema's own label ('Analytical focus area.') is too terse to compensate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Fetch and deconstruct a live reference website server-side') and then enumerates exactly what is extracted (title, meta description, h1-h4, links, readable text). The 'server-side' framing and SPA detection distinguish it from the search/discovery siblings like pixasso_search_references.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides a clear when-not with an alternative ('Does not extract computed CSS... use headless browser tools or user screenshots for visual styling'), which steers the agent away from a likely misuse. However, it never states when to prefer this over sibling tools such as pixasso_search_references or pixasso_discover_intent, so sibling routing is left to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_generate_brainBRead-onlyIdempotent
Build a Graphify-style Mermaid visualization mapping design decisions and Task DAG execution state.
| Name | Required | Description | Default |
|---|---|---|---|
| tasks | No | Task DAG nodes. | |
| decisions | Yes | List of key design decisions. | |
| projectName | Yes | Name of the project. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, destructiveHint=false, and openWorldHint=false, so the safety profile is well covered. The description adds that the output is a Graphify-style Mermaid visualization, but it does not explain what that format entails, whether any state is persisted, or how the result should be consumed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that states the core action and output without any filler. Every word contributes to identifying the tool's purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema, and the description does not explain what the generated visualization contains or how it is returned. While the annotations cover the safety profile and the schema documents inputs, the description leaves gaps around output structure and ideal invocation context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents projectName, decisions, and tasks. The description only indirectly references decisions and task DAG state; it adds no parameter syntax, formatting, or requirement details beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb (Build) and resource (Graphify-style Mermaid visualization) with a clear scope: mapping design decisions and Task DAG execution state. It distinguishes this tool's output from the other pixasso siblings implicitly, but it does not explicitly name or contrast with any sibling tool.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no when-to-use guidance, prerequisites, or alternatives. It does not say when this visualization should be generated relative to other pixasso tools (e.g., audit_design, generate_test_plan), leaving selection largely to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_generate_genomeBRead-onlyIdempotent
Validate design decisions and compile a machine-readable design-genome.yaml specification.
| Name | Required | Description | Default |
|---|---|---|---|
| themeMode | Yes | Visual theme mode. | |
| groundTone | Yes | Hex ground tone (e.g. #fbfaf7, #0a0f0d, #000000). | |
| motionFeel | No | Motion pacing and easing description. | |
| references | No | Audited reference sites analyzed via pixasso_fetch_reference. | |
| typography | Yes | ||
| colorTokens | Yes | ||
| projectName | Yes | Name of the project or app. | |
| dimensionality | No | Visual dimensionality. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, destructiveHint=false and openWorldHint=false, so the safety profile is fully covered without the description. The description adds that the output is a compiled design-genome.yaml artifact, but says nothing about validation failure behavior, what happens with incomplete decisions, or how results are returned. Useful context, but thin beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single tight sentence with no filler, and the action chain ('validate' then 'compile') is front-loaded. It is efficient, though arguably under-sized for a tool of this complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For an 8-parameter tool with nested objects, five required fields, and no output schema, one sentence is insufficient. It omits the workflow context (which sibling produces the reference data this tool consumes), the five required inputs, and any description of the resulting YAML so the agent can verify a successful call.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 8 parameters, nested objects, and 75% schema description coverage, the schema largely documents itself. The description contributes no parameter-level meaning at all — it never mentions required fields (projectName, themeMode, groundTone), the enum choices, or how nested structures like references and colorTokens should be shaped.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states two specific verbs ('validate', 'compile') against a named resource ('design-genome.yaml specification'), so the agent knows it produces a concrete artifact from design decisions. It does not, however, differentiate itself from siblings like pixasso_generate_brain or pixasso_generate_test_plan, and the dual validate/compile framing leaves slight ambiguity about which is the primary action.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no when-to-use guidance, no statement of prerequisites (e.g. that pixasso_fetch_reference must run first to populate the references array), and no routing to alternatives among the six sibling tools. The agent is left to infer the position of this tool in the pipeline.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_generate_test_planBRead-onlyIdempotent
Generate an automated multi-viewport testing matrix (390px, 768px, 1024px, 1440px) and overflow detection script.
| Name | Required | Description | Default |
|---|---|---|---|
| testUrl | No | Target URL to test. | |
| projectName | Yes | Application or website name. | |
| testedViewports | No | Viewport widths to test (defaults to 390, 768, 1024, 1440). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, destructiveHint=false and openWorldHint=false, so the safety profile is covered. The description usefully adds what artifact is produced (a matrix across four viewports plus an overflow script), but says nothing about output format or any return structure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single dense sentence that front-loads the verb and resource with zero filler. Every clause (multi-viewport, the specific widths, overflow detection) earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a low-complexity read-only generation tool with full schema coverage and no output schema, the description is adequate but thin. It omits prerequisites and the ordering relationship to sibling generation tools, which matters in a suite where generate_genome or discover_intent may need to run first.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents testUrl, projectName, and testedViewports. The description only restates the viewport defaults already given in the schema, adding no new semantic detail beyond the baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (Generate) and concrete resource (multi-viewport testing matrix plus overflow detection script), including the exact viewport widths. Clear what it does, but it offers no differentiation from siblings like pixasso_audit_design or pixasso_generate_genome.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no when-to-use guidance, no preconditions, and no mention of alternatives among the six sibling pixasso tools. An agent cannot tell from the description whether a genome or intent must exist first, or when to choose this over audit_design.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pixasso_search_referencesBRead-onlyIdempotent
Search across all 20 Pixasso design reference catalogs, 11 templates, and the 16 frontend pillars.
| Name | Required | Description | Default |
|---|---|---|---|
| tag | No | Filter by tag (e.g. typography, motion, a11y, 3d, components). | |
| query | Yes | Keywords to search across design references and templates. | |
| category | No | Filter category. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint=false, so the safety profile is covered. The description adds genuine scope detail (20 catalogs, 11 templates, 16 pillars), which is useful, but it is silent on result ranking, limits, or pagination for what is inherently a large result set.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence that quantifies the search surface and wastes no words. Nothing extraneous.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple, read-only, idempotent search with full schema coverage and no output schema, the description covers the search domain adequately. It could say something about the shape or volume of returned results, but nothing essential for correct invocation is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% with all three parameters (query, tag, category) documented in the schema itself, including the enum values. The description adds no parameter-level detail beyond that, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clear verb (search) plus an explicit resource scope: catalogs, templates, and frontend pillars. An agent knows this is a broad keyword search, but the description never contrasts itself with the sibling pixasso_fetch_reference, so the boundary between searching and fetching a single item is left to inference.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No when-to-use statement and no alternatives are named. The description implies broad retrieval, but it never says to use fetch_reference when a specific item is already known, nor excludes any cases. Guidance is absent rather than misleading.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
7 tool updates
v1.1.1- First observed
pixasso_audit_design - First observed
pixasso_discover_intent - First observed
pixasso_fetch_reference - First observed
pixasso_generate_brain - First observed
pixasso_generate_genome - First observed
pixasso_generate_test_plan - First observed
pixasso_search_references
TDQS
Scored across 7 tools
Each tool has a clearly distinct action and target: discovering intent, searching vs. fetching references, generating genome vs. brain vs. test plan, and auditing design. The descriptions make boundaries explicit, so an agent can reliably select the right tool.
All tools use a consistent pixasso_verb_noun pattern with snake_case. A minor deviation exists in the noun form for reference tools (search_references plural vs. fetch_reference singular), but overall the convention is predictable.
Seven tools form a well-scoped set for a frontend design assistant, covering discovery, research, generation, auditing, and testing without redundant or trivial entries.
The surface covers the core design workflow from intent discovery through reference research, specification, visualization, auditing, and test planning. However, there is no tool to directly generate or scaffold frontend code/design assets, and visual styling extraction is explicitly delegated to external tools—minor gaps the agent can work around.
Maintenance
Related MCP Connectors
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
The AI orchestration agent for modern software teams.
AI work orchestration for plans, tasks, teams, and coding-agent dispatch.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Related MCP Servers
- AlicenseAqualityNot gradedmaintenanceEnables AI tools to interact with browsers for enhanced frontend development, providing context to LLMs through tools like API call analysis, screenshots, element selection, and documentation ingestion.99 npm10-
- FlicenseAqualityDmaintenanceAn MCP server implementing a 7-stage agentic frontend workflow—from design audit to PR review—including AI-driven component generation, browser validation, E2E testing, and CI self-healing.410 npm-
- FlicenseNot gradedqualityCmaintenanceEnables AI coding agents to plan, build, and review websites and product interfaces with a persistent, user-led process, including design direction, component contracts, and implementation review.-
- AlicenseAqualityCmaintenanceProvides deterministic UI/UX intelligence and systems performance auditing tools for AI coding agents, enabling generation of accessible, well-designed React/Tailwind interfaces and elimination of backend anti-patterns like N+1 queries and sequential waterfalls.7MIT