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: Figma Context MCP

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?

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

  • 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.
    6
    823
    19
    Apache 2.0

  • Figma Context MCP

    cola-sk
    A
    license
    A
    quality
    C
    maintenance
    Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.
    1
    22
    MIT
  • UIZZE by uizze

    UIZZEofficial

    uizze
    A
    license
    -
    quality
    A
    maintenance
    STOP UI SLOP. Gives coding agents searchable evidence from 800,000+ real web and iOS screens, design contracts, and a hard UI finish gate.
    1
    MIT

  • Plumb (plumb-mcp)

    tathagat22
    A
    license
    A
    quality
    A
    maintenance
    AI-native design engineering platform that converts Figma or live websites into a semantic design graph for code generation, and generates Figma designs from prompts with a self-improving director loop.
    28
    130
    72
    MIT

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.

  • 2ools

    Build, version, review, and export websites, web apps, and games from a conversation.

  • mcp

    Turns any agent into a full agentic application — branded, interactive screens generated at runtime.

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