Pixl
Pixl is an MCP server that turns AI coding hosts into a guided mobile UI design tool, enforcing a locked design-system token contract and providing a local browser preview with a phone-frame screen gallery and draggable user-journey flow map.
Initialize the workspace: Set up the
.pixl/folder, boot the local browser preview atlocalhost:4321, and optionally open it automatically in your browser.Check workspace status: Get a snapshot of the current state — initialization status, active design system, screen count, flow node count, and preview URL.
Browse and set a design system: List curated design-system presets, then select one (with optional overrides) or provide fully custom tokens (colors, typography, spacing, radius, shadows, breakpoints). This locks a token contract that all screens must follow.
Plan screens and user journey: Define an ordered list of screens (IDs, names, descriptions) and directed transitions between them, seeding both the screen plan and the flow map.
Generate and save screens: Submit full self-contained HTML for a screen; it is linted against the token contract — valid screens are saved and live-rendered in the gallery, invalid ones return specific violation feedback.
Lint screens without saving: Validate a screen's HTML against the token contract as a dry run, to catch violations before committing.
Update the flow canvas: Define or update the user-journey graph (nodes and directed edges with transition labels) rendered on the draggable flow canvas, preserving manually set node positions.
Click on "Install 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., "@Pixlstart a new mobile UI design project"
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.
Pixl
Open-source MCP server for designing mobile UIs. Pixl plugs into whatever AI coding host you already use (Claude Code, Cursor, …) and turns it into a guided mobile-UI design tool. Your host's model does the generating — Pixl supplies the taste it lacks: a locked design-system token contract, a linter that rejects off-standard output, and a local browser preview with a phone-frame gallery and a draggable user-journey flow map. Everything runs locally.
Status: v0.1, feature-complete — MCP server, workspace, live preview, design-system presets + token contract, screen generation with the taste linter, and the draggable user-journey flow canvas.
How it fits together
host (Claude Code / Cursor) ──MCP stdio──▶ pixl-mcp (Node/TS)
│ owns .pixl/ workspace, runs linter
▼
localhost:4321 Vite + React preview
├── Screen gallery (phone frames, live-reload)
└── Flow canvas (dotted bg, draggable)State lives in a .pixl/ folder in your project: tokens.json, design/*.md, screens/*.html, flow.json.
Related MCP server: Primitiv
Install
Pixl auto-starts when your host connects: it creates the .pixl/ workspace, boots the preview, and opens localhost:4321 in your browser. No pixl_init call needed — just point your host at it and start asking for screens.
npx (recommended):
Cursor — ~/.cursor/mcp.json:
{ "mcpServers": { "pixl": { "command": "npx", "args": ["-y", "pixl-mcp"] } } }Claude Code:
claude mcp add pixl -- npx -y pixl-mcpDocker (no Node needed; fully isolated). -p 4321:4321 forwards the preview; the sh -c wrapper reaps any prior container so relaunches don't clash on the port:
{
"mcpServers": {
"pixl": {
"command": "sh",
"args": [
"-c",
"docker rm -f pixl-mcp >/dev/null 2>&1; exec docker run --rm -i --name pixl-mcp -p 4321:4321 -v \"$PWD\":/work -w /work pixl-mcp"
]
}
}
}Build the image first with docker build -t pixl-mcp . (or pull it once published).
Develop
npm install --include=dev # this machine has npm omit=dev set globally
npm run build # compile the server to dist/
npm run typecheck
npx vitest run # linter unit tests (pass/fail fixtures)
node scripts/smoke.mjs # workspace + preview API end-to-end
node scripts/mcp-smoke.mjs # drives the server as a real MCP client
node scripts/phase2-smoke.mjs # design system + screen plan
node scripts/phase3-smoke.mjs # write/lint screen: reject bad, accept fixed
node scripts/phase4-smoke.mjs # flow graph + drag-persist round-tripRegister a local build (from source)
Claude Code:
npm install --include=dev && npm run build
claude mcp add pixl -- node /absolute/path/to/pixl-mcp/dist/index.jsThe preview auto-starts and opens localhost:4321 — then ask your assistant to set a design system and generate screens.
Tools
Tool | Purpose |
| Re-open the preview / fetch its URL (auto-runs on startup — you don't call it) |
| Report workspace state |
| Design system + screen plan |
| Generate + lint screens |
| User-journey flow graph |
MIT.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ishk9/pixl'
If you have feedback or need assistance with the MCP directory API, please join our Discord server