karyaboyraz/mockit-mcp

Turn text prompts into premium iOS mobile UI mockups.
An MCP server that pairs Claude (Opus 4.7 by default) with a Playwright renderer to generate screenshot-grade mobile app designs from natural language.
---
What it does
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.
Fitness dashboard
Volume calculator (Turkish)
Generated from a single prompt each. See examples/ .
Highlights
- **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.
Tools
| Tool | Description |
|------|-------------|
| generate_screen | Text brief → PNG + HTML. Optional design_system and project fields. |
| iterate_screen | Take a previous screen_id + feedback string, produce a new version. |
| list_screens | List screens, optionally filtered by project. |
| get_screen | Fetch metadata (or full HTML) for a specific screen. |
Install
Prerequisites
- **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)
Quick start (CLI backend, recommended for local dev)
Add to Claude Code:
Done. No API key needed — it uses your existing claude CLI session.
API backend (no claude CLI on host)
Docker (HTTP transport, for shared deployment)
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.
Usage
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.
Configuration
All optional. See .env.example for the full list.
| Env | Default | Notes |
|-----|---------|-------|
| CLAUDE_BACKEND | cli | cli uses the claude CLI; api uses Anthropic SDK directly |