Skip to main content
Glama
ishk9

Pixl

by ishk9
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

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-mcp

Docker (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-trip

Register 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.js

The preview auto-starts and opens localhost:4321 — then ask your assistant to set a design system and generate screens.

Tools

Tool

Purpose

pixl_init

Re-open the preview / fetch its URL (auto-runs on startup — you don't call it)

pixl_status

Report workspace state

pixl_list_presets / pixl_set_design_system / pixl_plan_screens

Design system + screen plan

pixl_write_screen / pixl_lint_screen

Generate + lint screens

pixl_set_flow

User-journey flow graph

MIT.

Install Server
A
license - permissive license
A
quality
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

Related MCP Servers

  • Figma MCP Server

    aashraf09
    F
    license
    -
    quality
    D
    maintenance
    Enables AI assistants to read Figma design files and automatically map responsive relationships between mobile and desktop screens to generate accurate frontend code. Eliminates manual copy-pasting by providing direct access to design tokens, dimensions, and screen layouts within AI-powered IDEs.
    Last updated

  • Primitiv

    AI-by-design
    A
    license
    A
    quality
    A
    maintenance
    Design contract layer for AI agents. Scans Figma, code, Storybook, and token files, reconciles conflicts, and serves a single machine-readable source of truth so every agent gets the same authoritative design rules before it builds. Local-first.
    Last updated
    6
    96
    17
    Apache 2.0

  • UI Canvas MCP

    Alemusica
    A
    license
    -
    quality
    B
    maintenance
    Enables AI agents to read and manipulate visual UI designs drawn on a canvas, translating them into precise JSON specs for production code generation.
    Last updated
    11,972
    4
    ISC

View all related MCP servers

Related MCP Connectors

  • Visily UI Design

    UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.

  • Designesy

    Design-system contract verification, scoring, and review tools for AI agents.

  • TypeUI

    Design systems, UI prompts, and layout variations for AI coding tools.

View all MCP Connectors

Appeared in Searches

Latest Blog Posts

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