mockit-mcp is an MCP server that turns text prompts into premium iOS mobile UI mockups (PNG screenshots + HTML/Tailwind source) using Claude AI and a Playwright headless renderer.
Generate screens (generate_screen): Create a screenshot-grade iOS mockup as a PNG from a natural language description, with optional project grouping and custom design system (colors, fonts, voice).
Iterate on screens (iterate_screen): Refine an existing screen by ID using natural-language feedback (e.g., "use orange accent instead of blue"), producing new versions with parent/child tracking.
List screens (list_screens): Browse all previously generated screens stored on disk, optionally filtered by project.
Get screen details (get_screen): Fetch metadata (prompt, model, tokens, cost, parent ID, etc.) for a specific screen by UUID, optionally including the full HTML source.
Key technical traits: renders via headless Chromium (Playwright) with configurable viewport/device scale; automatically saves HTML, PNG, and JSON metadata to disk; supports both claude CLI and direct Anthropic API backends; and can run locally via stdio or as an HTTP service for shared/containerized deployments.
Ask Claude Code (or any MCP client):
Design the home dashboard for a fitness tracker. Three concentric activity rings, weekly bar chart, recent workouts list, premium dark mode with neon accents.
mockit-mcp returns a real PNG mockup (sized 390×844 at 2x device scale, an iPhone-class viewport) and the underlying HTML/Tailwind source — so you can iterate visually and port to SwiftUI when you're ready to build.
It's not a static template engine and it's not generic AI slop. The system prompt is hand-tuned for premium iOS aesthetics: real content, SVG icons (no emoji), tasteful gradients in place of stock photos, iOS HIG type scale, and tonal layering instead of heavy shadows.
Related MCP server: Snip
Two backends, same tools. Use the local claude CLI (subscription, $0 extra) or the Anthropic API (key + per-call pricing). Switch with one env var.
Real PNG output. Headless Chromium via Playwright. Default viewport is 390×844 @2x (iPhone-class); any custom size is one env var away.
Iterative refinement. iterate_screen takes a screen ID + feedback ("make the hero card smaller") and produces a new version, tracking parent/child.
Disk-backed library. Every generation saves HTML + PNG + JSON metadata. Browse, filter, re-export.
MCP standard. Works with Claude Code, Claude Desktop, Cursor, Windsurf, or any MCP client.
Stdio + HTTP transports. Run locally for dev, or as a network service for shared / containerized use.
Tool | Description |
| Text brief → PNG + HTML. Optional |
| Take a previous |
| List screens, optionally filtered by project. |
| Fetch metadata (or full HTML) for a specific screen. |
Node.js 20+
Either the claude CLI logged in (cli backend, default) or an Anthropic API key (api backend)
Playwright's Chromium download (~170 MB, one-time)
git clone https://github.com/karyaboyraz/mockit-mcp.git
cd mockit-mcp
npm install
npx playwright install chromium
npm run buildAdd to Claude Code:
claude mcp add mockit -- node "$(pwd)/dist/server.js"Done. No API key needed — it uses your existing claude CLI session.
claude CLI on host)echo "CLAUDE_BACKEND=api" > .env
echo "ANTHROPIC_API_KEY=sk-ant-..." >> .env
npm run build
claude mcp add mockit -- node "$(pwd)/dist/server.js"cat > .env <<'ENV'
CLAUDE_BACKEND=api
ANTHROPIC_API_KEY=sk-ant-...
# Required if you change the port binding from 127.0.0.1 to 0.0.0.0:
MCP_HTTP_TOKEN=$(openssl rand -hex 32)
ENV
docker compose up -d --buildBy default docker-compose.yml binds the HTTP port to 127.0.0.1 only and the server requires MCP_HTTP_TOKEN for any non-loopback request. Don't expose this server to a public network without setting a strong MCP_HTTP_TOKEN — every generation hits your Anthropic API key.
Then point any client at the loopback URL:
claude mcp add --transport http mockit http://127.0.0.1:7821/mcp \
-H "Authorization: Bearer <MCP_HTTP_TOKEN>"For remote access, change docker-compose.yml's port binding to 0.0.0.0:7821:7821 and ensure MCP_HTTP_TOKEN is set — the server refuses to start otherwise.
In any MCP client, just ask:
Design a fitness tracker dashboard. Show today's ring progress, a weekly chart, and a list of recent workouts. Dark mode, neon green accent.
The PNG appears inline. The HTML is saved to designs/{project}/{name}-{id}.html.
For follow-ups:
iterate_screen on that fitness dashboard — replace the chart with heart-rate over time, and add a "share workout" button below.
See examples/ for prompt patterns and full outputs.
All optional. See .env.example for the full list.
Env | Default | Notes |
|
|
|
| — | Required only for |
|
| API backend only. If your account doesn't have Opus access, set to |
|
| Path to the |
|
| Subprocess timeout |
|
|
|
|
| HTTP transport port |
|
| Bind interface; non-loopback requires |
| — | Bearer token for HTTP auth. Required if |
|
| Where outputs are persisted |
|
| Render width in CSS pixels |
|
| Render height in CSS pixels |
|
| Retina factor (final PNG is |
|
|
|
Per generation: ~3K input tokens (system prompt) + ~6–12K output tokens depending on screen complexity. Output dominates the cost on Opus.
Backend | First call | Cached follow-up |
| counts against your Claude Code subscription quota | same — cache only discounts the system prompt |
| ~$0.50–0.95 (Opus 4.7) | ~$0.45–0.90 (cache discounts the system-prompt input only; output cost is unchanged) |
System-prompt caching is on by default (5-minute TTL). It saves a few cents per call but is not an order-of-magnitude discount — output tokens still bill at full rate. For real cost reduction, switch to a smaller model (claude-sonnet-4-6 or claude-haiku-4-5).
┌─────────────────┐
│ MCP Client │ (Claude Code, Cursor, Windsurf, …)
└────────┬────────┘
│ tool call: generate_screen({ prompt, ... })
▼
┌─────────────────────────────────────────────────────┐
│ mockit-mcp │
│ │
│ ┌──────────────┐ ┌────────────────────────┐ │
│ │ Backend │ │ Renderer │ │
│ │ │ │ │ │
│ │ ► cli ─────┼──► │ Playwright (headless │ │
│ │ ► api ─────┘ │ Chromium @ iPhone │ │
│ │ → HTML+Tailwind │ viewport) │ │
│ └──────────────┘ │ → PNG screenshot │ │
│ └────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ Storage (disk): HTML + PNG + JSON metadata │ │
│ └────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘designs/
└── {project-slug}/
├── {name-slug}-{id8}.html # id8 = first 8 chars of the screen UUID
├── {name-slug}-{id8}.png
└── {name-slug}-{id8}.json # full UUID, prompt, parent ID, tokens, model, costReference and guides live in docs/:
Topic | Page |
Install, first generation, verify | |
Every env var, defaults, what they do | |
The four MCP tools — schemas, examples | |
Pipeline end-to-end | |
Local, Docker, networked deployments | |
Sandbox, network allowlist, HTTP auth | |
How the design voice is encoded | |
Common errors and how to fix them |
The hand-tuned system prompt lives in src/system-prompt.ts. It's where the iOS HIG enforcement, the no-stock-photo rule, the SF Pro fallback chain, and the editorial typography preferences are encoded. Want Material You instead, or a desktop dashboard voice? Edit it.
npm run dev # tsx watch mode, stdio transport
npm run http # tsx watch mode, http transport on :7821
npm run build # compile to dist/Watch / iPad / Android viewport presets
Multi-screen flow generation (onboarding sequences)
HTML → SwiftUI / Jetpack Compose port tool
Design system import (Tailwind config, design tokens)
Image references (use --image for visual inspiration)
Variant generation (3-5 alternatives per prompt)
Issues and PRs welcome — see CONTRIBUTING.md.
Built on top of:
Anthropic Claude — the model that does the heavy lifting
Model Context Protocol — the integration standard
Playwright — the renderer
Tailwind CSS — via CDN, in every generated screen
iPhone, iPad, Apple Watch, and iOS are trademarks of Apple Inc. Claude is a trademark of Anthropic, PBC. mockit-mcp is an independent open-source project and is not affiliated with, endorsed by, or sponsored by Apple Inc. or Anthropic, PBC. All other product names, logos, and brands are property of their respective owners.
Generate a premium iOS mobile UI mockup from a text brief. Outputs both the screenshot (PNG) and the underlying HTML. Use this when the user asks to design, mock up, or visualize a mobile app screen.
Inputs: prompt (required), name (required), project, design_system.
Get details and metadata for a specific screen. Set include_html=true to also return the HTML source.
Inputs: screen_id (required), include_html.
Refine an existing generated screen based on feedback. Use this for follow-up edits like 'change color', 'add a section', 'make it more spacious'.
Inputs: screen_id (required), feedback (required), name.
List all generated screens, optionally filtered by project name.
Inputs: project.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 4 tools
Each tool serves a distinct purpose: generate creates, get retrieves, iterate refines, list enumerates. No functional overlap.
All tools follow a consistent verb_noun pattern in snake_case (generate_screen, get_screen, iterate_screen, list_screens).
4 tools is well-scoped for a mockup generation service, covering creation, retrieval, iteration, and listing without excess.
Covers core CRUD except delete, which may be intentional. Users can create, read, update, and list screens, with no obvious dead ends.
Create 3D device mockups, App Store screenshot sets and launch videos from your AI. Showoff.dev puts your screenshots on real iPhones, Pixels, iPads and MacBooks, sets camera and background, and exports App Store and Google Play sizes. Works with Claude, ChatGPT, Cursor, Codex and any MCP client.
Create 3D device mockups, App Store screenshot sets and launch videos from your AI. Showoff.dev puts your screenshots on real iPhones, Pixels, iPads and MacBooks, sets camera and background, and exports App Store and Google Play sizes. Works with Claude, ChatGPT, Cursor, Codex and any MCP client.
Build and edit app screen mockups and clickable prototypes from your AI assistant.
Drive real devices from your AI Coding tool. Embed a client SDK (Unity, Godot, Flutter, iOS/macOS, Android, React Native, Web) in your app, then capture screenshots, traverse the UI tree, inject taps and key events, and run automated test tasks on the physical device over a secure relay.
