mockit-mcp

Was es tut

Fragen Sie Claude Code (oder einen beliebigen MCP-Client):

Entwirf das Home-Dashboard für einen Fitness-Tracker. Drei konzentrische Aktivitätsringe, wöchentliches Balkendiagramm, Liste der letzten Workouts, Premium-Dark-Mode mit Neon-Akzenten.

mockit-mcp liefert ein echtes PNG-Mockup (Größe 390×844 bei 2x Skalierung, ein Viewport der iPhone-Klasse) und den zugrunde liegenden HTML/Tailwind-Quellcode – damit Sie visuell iterieren und auf SwiftUI portieren können, wenn Sie bereit für die Entwicklung sind.

Es ist keine statische Template-Engine und kein generischer KI-Müll. Der System-Prompt ist handoptimiert für erstklassige iOS-Ästhetik: echte Inhalte, SVG-Icons (keine Emojis), geschmackvolle Verläufe anstelle von Stockfotos, iOS HIG-Typografie-Skalierung und tonale Schichtung anstelle von schweren Schatten.

Highlights

• Zwei Backends, dieselben Tools. Nutzen Sie das lokale claude CLI (Abonnement, keine Extrakosten) oder die Anthropic-API (Key + nutzungsbasierte Abrechnung). Wechseln Sie mit einer Umgebungsvariablen.

• Echte PNG-Ausgabe. Headless Chromium via Playwright. Standard-Viewport ist 390×844 @2x (iPhone-Klasse); jede benutzerdefinierte Größe ist nur eine Umgebungsvariable entfernt.

• Iterative Verfeinerung. iterate_screen nimmt eine Screen-ID + Feedback ("mach die Hero-Card kleiner") und erstellt eine neue Version, wobei Eltern-/Kind-Beziehungen nachverfolgt werden.

• Festplattenbasierte Bibliothek. Jede Generierung speichert HTML + PNG + JSON-Metadaten. Durchsuchen, filtern, erneut exportieren.

• MCP-Standard. Funktioniert mit Claude Code, Claude Desktop, Cursor, Windsurf oder jedem MCP-Client.

• Stdio + HTTP-Transporte. Lokal für die Entwicklung ausführen oder als Netzwerkdienst für geteilte/containerisierte Nutzung.

Tools

Installation

Voraussetzungen

• Node.js 20+

• Entweder das angemeldete claude CLI (cli-Backend, Standard) oder einen Anthropic-API-Key (api-Backend)

• Playwrights Chromium-Download (~170 MB, einmalig)

Schnellstart (CLI-Backend, empfohlen für lokale Entwicklung)

git clone https://github.com/karyaboyraz/mockit-mcp.git
cd mockit-mcp
npm install
npx playwright install chromium
npm run build

Zu Claude Code hinzufügen:

claude mcp add mockit -- node "$(pwd)/dist/server.js"

Fertig. Kein API-Key erforderlich – es nutzt Ihre bestehende claude CLI-Sitzung.

API-Backend (kein claude CLI auf dem 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"

Docker (HTTP-Transport, für geteilte Bereitstellung)

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

Standardmäßig bindet docker-compose.yml den HTTP-Port nur an 127.0.0.1 und der Server erfordert MCP_HTTP_TOKEN für jede Anfrage, die nicht vom Loopback kommt. Setzen Sie diesen Server keinem öffentlichen Netzwerk aus, ohne ein starkes MCP_HTTP_TOKEN zu konfigurieren – jede Generierung belastet Ihren Anthropic-API-Key.

Verweisen Sie dann jeden Client auf die Loopback-URL:

claude mcp add --transport http mockit http://127.0.0.1:7821/mcp \
  -H "Authorization: Bearer <MCP_HTTP_TOKEN>"

Für Fernzugriff ändern Sie das Port-Binding in der docker-compose.yml auf 0.0.0.0:7821:7821 und stellen Sie sicher, dass MCP_HTTP_TOKEN gesetzt ist – andernfalls verweigert der Server den Start.

Verwendung

Fragen Sie in einem beliebigen MCP-Client einfach:

Entwirf ein Fitness-Tracker-Dashboard. Zeige den heutigen Ring-Fortschritt, ein wöchentliches Diagramm und eine Liste der letzten Workouts. Dark Mode, neon-grüner Akzent.

Das PNG erscheint inline. Das HTML wird unter designs/{project}/{name}-{id}.html gespeichert.

Für Nachbesserungen:

iterate_screen auf diesem Fitness-Dashboard — ersetze das Diagramm durch die Herzfrequenz über die Zeit und füge einen "Workout teilen"-Button darunter hinzu.

Siehe examples/ für Prompt-Muster und vollständige Ausgaben.

Konfiguration

Alles optional. Siehe .env.example für die vollständige Liste.

Kosten

Pro Generierung: ~3K Input-Token (System-Prompt) + ~6–12K Output-Token, abhängig von der Screen-Komplexität. Die Ausgabe dominiert die Kosten bei Opus.

System-Prompt-Caching ist standardmäßig aktiviert (5 Minuten TTL). Es spart ein paar Cent pro Aufruf, ist aber kein Rabatt in der Größenordnung von Zehnerpotenzen – Output-Token werden weiterhin zum vollen Preis berechnet. Für echte Kostenreduzierung wechseln Sie zu einem kleineren Modell (claude-sonnet-4-6 oder claude-haiku-4-5).

Architektur

┌─────────────────┐
│   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 │    │
│  └────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────┘

Speicherlayout

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, cost

Anpassung der Design-Stimme

Der handoptimierte System-Prompt befindet sich in src/system-prompt.ts. Hier sind die Durchsetzung der iOS HIG, die Regel gegen Stockfotos, die SF Pro-Fallback-Kette und die redaktionellen Typografie-Präferenzen kodiert. Wollen Sie stattdessen Material You oder eine Desktop-Dashboard-Stimme? Bearbeiten Sie ihn.

Entwicklung

npm run dev    # tsx watch mode, stdio transport
npm run http   # tsx watch mode, http transport on :7821
npm run build  # compile to dist/

Roadmap

• [ ] Watch / iPad / Android Viewport-Presets

• [ ] Multi-Screen-Flow-Generierung (Onboarding-Sequenzen)

• [ ] HTML → SwiftUI / Jetpack Compose Port-Tool

• [ ] Design-System-Import (Tailwind-Konfiguration, Design-Tokens)

• [ ] Bildreferenzen (nutzen Sie --image für visuelle Inspiration)

• [ ] Varianten-Generierung (3-5 Alternativen pro Prompt)

Mitwirken

Issues und PRs sind willkommen – siehe CONTRIBUTING.md.

Lizenz

MIT

Danksagungen

Aufgebaut auf:

• Anthropic Claude — das Modell, das die schwere Arbeit leistet

• Model Context Protocol — der Integrationsstandard

• Playwright — der Renderer

• Tailwind CSS — via CDN, in jedem generierten Screen

Marken

iPhone, iPad, Apple Watch und iOS sind Marken von Apple Inc. Claude ist eine Marke von Anthropic, PBC. mockit-mcp ist ein unabhängiges Open-Source-Projekt und ist nicht mit Apple Inc. oder Anthropic, PBC verbunden, wird von diesen nicht unterstützt oder gesponsert. Alle anderen Produktnamen, Logos und Marken sind Eigentum ihrer jeweiligen Inhaber.