mockit-mcp

機能

Claude Code（または任意のMCPクライアント）にこう尋ねてください：

フィットネストラッカーのホームダッシュボードをデザインして。3つの同心円状のアクティビティリング、週次の棒グラフ、最近のワークアウトリスト、ネオンアクセントのプレミアムなダークモードで。

mockit-mcpは、実際のPNGモックアップ（iPhoneクラスのビューポートである390×844、2倍スケール）と、その基盤となるHTML/Tailwindソースを返します。これにより、視覚的に反復作業を行い、構築の準備ができたらSwiftUIに移植することができます。

これは静的なテンプレートエンジンではなく、低品質なAI生成物でもありません。システムプロンプトは、プレミアムなiOSの美学に合わせて手作業で調整されています。実際のコンテンツ、SVGアイコン（絵文字は不使用）、ストックフォトの代わりに洗練されたグラデーション、iOS HIGのタイポグラフィスケール、そして重い影の代わりに階層的なレイヤー構造を採用しています。

ハイライト

• 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トランスポート。 開発用にローカルで実行することも、共有/コンテナ環境用にネットワークサービスとして実行することも可能です。

ツール

インストール

前提条件

• Node.js 20+

• claude CLIにログイン済み (cliバックエンド、デフォルト) または Anthropic APIキー (apiバックエンド)

• PlaywrightのChromiumダウンロード（約170MB、初回のみ）

クイックスタート（CLIバックエンド、ローカル開発に推奨）

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

Claude Codeに追加：

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

完了です。APIキーは不要で、既存の claude CLIセッションを使用します。

APIバックエンド（ホストに 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"

Docker（HTTPトランスポート、共有デプロイ用）

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 を参照してください。

コスト

生成ごと：約3K入力トークン（システムプロンプト）+ 画面の複雑さに応じて約6〜12K出力トークン。Opusでは出力がコストの大半を占めます。

システムプロンプトのキャッシュはデフォルトで有効（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 を参照してください。

ライセンス

MIT

謝辞

以下を基盤として構築されています：

• 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とは提携、承認、または後援されていません。その他のすべての製品名、ロゴ、ブランドは、それぞれの所有者の財産です。