mockit-mcp

功能简介

询问 Claude Code（或任何 MCP 客户端）：

设计一个健身追踪器的首页仪表盘。包含三个同心圆活动环、每周柱状图、最近锻炼列表，采用带有霓虹灯装饰的高级深色模式。

mockit-mcp 会返回一个真实的 PNG 原型（尺寸为 390×844，2 倍设备缩放，即 iPhone 级视口）以及底层的 HTML/Tailwind 源码——这样你就可以进行视觉迭代，并在准备好构建时将其移植到 SwiftUI。

它不是静态模板引擎，也不是平庸的 AI 垃圾内容。系统提示词经过精心调优，以符合优质的 iOS 美学：真实的内容、SVG 图标（无 emoji）、用渐变代替库存照片、iOS HIG 字体比例，以及使用色调分层而非沉重的阴影。

亮点

• 两种后端，相同工具。 使用本地 claude CLI（订阅制，无需额外费用）或 Anthropic API（API Key + 按调用付费）。通过一个环境变量即可切换。

• 真实的 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 Key（api 后端）

• Playwright 的 Chromium 下载（约 170 MB，一次性）

快速开始（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 Key —— 它使用你现有的 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 Key。

然后将任何客户端指向回环 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。

后续迭代：

iterate_screen 对那个健身仪表盘进行迭代 —— 将图表替换为心率随时间的变化，并在下方添加一个“分享锻炼”按钮。

请参阅 examples/ 获取提示词模式和完整输出。

配置

均为可选。请参阅 .env.example 获取完整列表。

成本

每次生成：约 3K 输入 token（系统提示词）+ 6–12K 输出 token，具体取决于屏幕复杂度。在 Opus 上，输出成本占主导地位。

系统提示词缓存默认开启（5 分钟 TTL）。它每次调用可节省几美分，但不是数量级的折扣 —— 输出 token 仍按全价计费。如需真正降低成本，请切换到较小的模型（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，也不受其认可或赞助。所有其他产品名称、徽标和品牌均为其各自所有者的财产。