Claude Code（または任意のMCPクライアント）にこう尋ねてください：
フィットネストラッカーのホームダッシュボードをデザインして。3つの同心円状のアクティビティリング、週次の棒グラフ、最近のワークアウトリスト、ネオンアクセントのプレミアムなダークモードで。
mockit-mcpは、実際のPNGモックアップ（iPhoneクラスのビューポートである390×844、2倍スケール）と、その基盤となるHTML/Tailwindソースを返します。これにより、視覚的に反復作業を行い、構築の準備ができたらSwiftUIに移植することができます。
これは静的なテンプレートエンジンではなく、低品質なAI生成物でもありません。システムプロンプトは、プレミアムなiOSの美学に合わせて手作業で調整されています。実際のコンテンツ、SVGアイコン（絵文字は不使用）、ストックフォトの代わりに洗練されたグラデーション、iOS HIGのタイポグラフィスケール、そして重い影の代わりに階層的なレイヤー構造を採用しています。
Related MCP server: Playwright MCP for macOS
2つのバックエンド、同じツール。 ローカルの claude CLI（サブスクリプション利用、追加費用なし）またはAnthropic API（キーと呼び出しごとの料金）を使用できます。環境変数1つで切り替え可能です。
実際のPNG出力。 Playwright経由のヘッドレスChromiumを使用。デフォルトのビューポートは 390×844 @2x（iPhoneクラス）ですが、環境変数で任意のサイズに変更可能です。
反復的な改善。 iterate_screenは、画面IDとフィードバック（「ヒーローカードを小さくして」など）を受け取り、親子関係を追跡しながら新しいバージョンを作成します。
ディスクベースのライブラリ。 すべての生成物はHTML + PNG + JSONメタデータとして保存されます。閲覧、フィルタリング、再エクスポートが可能です。
MCP標準。 Claude Code、Claude Desktop、Cursor、Windsurf、または任意のMCPクライアントで動作します。
Stdio + HTTPトランスポート。 開発用にローカルで実行することも、共有/コンテナ環境用にネットワークサービスとして実行することも可能です。
ツール | 説明 |
| テキストの概要 → PNG + HTML。オプションで |
| 前の |
| 画面を一覧表示（プロジェクトによるフィルタリングも可能）。 |
| 特定の画面のメタデータ（または完全なHTML）を取得。 |
Node.js 20+
claude CLIにログイン済み (cliバックエンド、デフォルト) または Anthropic APIキー (apiバックエンド)
PlaywrightのChromiumダウンロード（約170MB、初回のみ）
git clone https://github.com/karyaboyraz/mockit-mcp.git
cd mockit-mcp
npm install
npx playwright install chromium
npm run buildClaude Codeに追加：
claude mcp add mockit -- node "$(pwd)/dist/server.js"完了です。APIキーは不要で、既存の claude CLIセッションを使用します。
claude CLIがない場合）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 --buildデフォルトでは、docker-compose.ymlはHTTPポートを 127.0.0.1 のみにバインドし、サーバーはループバック以外のリクエストに対して MCP_HTTP_TOKEN を要求します。強力な MCP_HTTP_TOKEN を設定せずにこのサーバーをパブリックネットワークに公開しないでください。生成のたびにAnthropic APIキーが消費されます。
その後、任意のクライアントをループバックURLに向けます：
claude mcp add --transport http mockit http://127.0.0.1:7821/mcp \
-H "Authorization: Bearer <MCP_HTTP_TOKEN>"リモートアクセスの場合は、docker-compose.ymlのポートバインディングを 0.0.0.0:7821:7821 に変更し、MCP_HTTP_TOKEN が設定されていることを確認してください。設定されていない場合、サーバーは起動を拒否します。
MCPクライアントで、次のように尋ねるだけです：
フィットネストラッカーのダッシュボードをデザインして。今日のリングの進捗、週次チャート、最近のワークアウトリストを表示して。ダークモード、ネオングリーンのアクセントで。
PNGがインラインで表示されます。HTMLは designs/{project}/{name}-{id}.html に保存されます。
フォローアップの場合：
そのフィットネスダッシュボードを反復して — チャートを心拍数の推移に置き換えて、下に「ワークアウトを共有」ボタンを追加して。
プロンプトのパターンと完全な出力については、examples/ を参照してください。
すべてオプションです。完全なリストについては .env.example を参照してください。
環境変数 | デフォルト | 備考 |
|
|
|
| — |
|
|
| APIバックエンドのみ。Opusにアクセスできない場合は |
|
|
|
|
| サブプロセスのタイムアウト |
|
|
|
|
| HTTPトランスポートポート |
|
| バインドインターフェース。ループバック以外は |
| — | HTTP認証用のベアラートークン。 |
|
| 出力先ディレクトリ |
|
| CSSピクセル単位のレンダリング幅 |
|
| CSSピクセル単位のレンダリング高さ |
|
| Retina係数（最終的なPNGは |
|
|
|
生成ごと：約3K入力トークン（システムプロンプト）+ 画面の複雑さに応じて約6〜12K出力トークン。Opusでは出力がコストの大半を占めます。
バックエンド | 初回呼び出し | キャッシュされたフォローアップ |
| Claude Codeサブスクリプションのクォータを消費 | 同上 — キャッシュはシステムプロンプトのみ割引 |
| 約$0.50–0.95 (Opus 4.7) | 約$0.45–0.90 (キャッシュはシステムプロンプト入力のみ割引。出力コストは不変) |
システムプロンプトのキャッシュはデフォルトで有効（TTL 5分）です。呼び出しごとに数セント節約できますが、桁違いの割引ではありません。出力トークンはフルレートで課金されます。コストを大幅に削減するには、より小さなモデル（claude-sonnet-4-6 または 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, cost手作業で調整されたシステムプロンプトは src/system-prompt.ts にあります。ここでiOS HIGの強制、ストックフォト禁止ルール、SF Proフォールバックチェーン、編集タイポグラフィの好みがエンコードされています。Material Youやデスクトップダッシュボードのトーンにしたい場合は、ここを編集してください。
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ビューポートプリセット
[ ] マルチスクリーンフロー生成（オンボーディングシーケンス）
[ ] HTML → SwiftUI / Jetpack Compose 移植ツール
[ ] デザインシステムインポート（Tailwind設定、デザイントークン）
[ ] 画像参照（視覚的なインスピレーションに --image を使用）
[ ] バリアント生成（プロンプトごとに3〜5つの代替案）
IssueやPRを歓迎します。CONTRIBUTING.md を参照してください。
以下を基盤として構築されています：
Anthropic Claude — 中核となるモデル
Model Context Protocol — 統合標準
Playwright — レンダラー
Tailwind CSS — CDN経由で各生成画面に使用
iPhone、iPad、Apple Watch、およびiOSはApple Inc.の商標です。ClaudeはAnthropic, PBCの商標です。mockit-mcpは独立したオープンソースプロジェクトであり、Apple Inc.やAnthropic, PBCとは提携、承認、または後援されていません。その他のすべての製品名、ロゴ、ブランドは、それぞれの所有者の財産です。
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.
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | Yes | Detailed brief for the screen: what app, what screen, what content, what UI elements. | |
| project | No | Project name (used to group related screens). | default |
| name | Yes | Short name for this screen, e.g. 'Main', 'Settings', 'Onboarding'. | |
| design_system | No | Optional design system spec: colors, fonts, voice. If omitted, the system invents one consistent with the prompt. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool outputs both a screenshot (PNG) and HTML, which is a key behavioral trait. However, it does not cover other aspects like potential costs, authentication needs, rate limits, or side effects. This is moderate transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long, front-loaded with the core functionality in the first sentence and usage guidance in the second. Every word earns its place; no fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 4 parameters, no output schema, and no annotations, the description provides sufficient context for basic usage: what it generates and when to use it. It could be improved by mentioning the response format or error handling, but for a generation tool with clear output, it is fairly complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage for its 4 parameters. The description adds minimal extra meaning beyond the schema, except for the context of 'premium iOS mobile UI mockup' which gives design direction. Baseline 3 is appropriate as schema does heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool generates a premium iOS mobile UI mockup from a text brief, with both screenshot and HTML output. It distinguishes itself from siblings (get_screen, iterate_screen, list_screens) by focusing on creation rather than retrieval or iteration.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says 'Use this when the user asks to design, mock up, or visualize a mobile app screen.' This provides clear context for when to use, though it does not explicitly list when not to use or mention alternatives. However, the context of sibling tools implies those alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get details and metadata for a specific screen. Set include_html=true to also return the HTML source.
| Name | Required | Description | Default |
|---|---|---|---|
| screen_id | Yes | Screen UUID returned by generate_screen or iterate_screen. | |
| include_html | No | Include full HTML in response (large). |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden. It mentions the optional HTML return but does not disclose potential size impacts, pagination, or any side effects. Minimal but not misleading.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences that directly state the tool's purpose and key parameter option. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema, so 'details and metadata' is vague. While the tool is simple, an agent might benefit from knowing what fields are returned. Adequate but not fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, and the description adds minimal extra meaning beyond what the schema already states. For screen_id, it repeats the schema; for include_html, it rephrases slightly.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it 'get details and metadata for a specific screen,' which distinguishes it from siblings like generate_screen (create) and list_screens (list all).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this versus alternatives, though sibling names imply the correct use case. The description does provide context for an optional parameter (include_html).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Refine an existing generated screen based on feedback. Use this for follow-up edits like 'change color', 'add a section', 'make it more spacious'.
| Name | Required | Description | Default |
|---|---|---|---|
| screen_id | Yes | ID of the screen to iterate on (from generate_screen output). | |
| feedback | Yes | What to change: 'make the hero card larger', 'use orange accent instead of blue', etc. | |
| name | No | Optional new name for the iteration. Defaults to original name + ' (v2)'. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden for behavioral disclosure. It implies mutation ("refine") but does not specify whether changes are reversible, what permissions are needed, or how the tool handles multiple iterations. The examples are non-destructive, but explicit security or side-effect info is missing.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the primary action, and includes practical examples without extraneous text. Every sentence adds value and the structure is efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema and no annotations, the description adequately explains the tool's purpose and gives usage examples. However, it does not describe the return value (e.g., updated screen object) or confirm that screen_id must come from generate_screen, which is noted only in the schema. A bit more context on how to use the result would improve completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema has 100% coverage, so baseline is 3. The description adds minimal extra meaning beyond the schema's parameter descriptions (e.g., "feedback" examples). The optional "name" parameter is described in both, but the description reinforces but does not significantly augment the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool refines an existing generated screen based on feedback, distinguishing it from siblings like generate_screen (creation) and get_screen (retrieval). The examples of feedback ("change color", "add a section") further clarify its purpose.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description specifies that this tool is for follow-up edits after generation, providing clear usage context. However, it does not explicitly state when not to use it (e.g., for new screens or non-generated screens) or mention prerequisites like valid screen_id from generate_screen.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all generated screens, optionally filtered by project name.
| Name | Required | Description | Default |
|---|---|---|---|
| project | No | Filter by project. Omit to list all. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description implies a read-only operation without side effects, which is transparent for a list tool. No annotations exist, but the description is clear.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that efficiently conveys the tool's purpose and optional parameter without extraneous information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple list tool with one optional parameter and no output schema, the description is adequate. It could be more complete by mentioning the return format, but it still provides sufficient context for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with a clear description of the 'project' parameter. The tool description adds 'optionally filtered by project name' but does not add significant new meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('list') and resource ('generated screens') with an optional filter. It distinguishes from siblings like generate_screen and get_screen.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use (listing all screens) and mentions optional filtering, but does not explicitly state when not to use or compare to alternatives like iterate_screen.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v0.1.1generate_screenget_screeniterate_screenlist_screensScored 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.
