询问 Claude Code（或任何 MCP 客户端）：
设计一个健身追踪器的首页仪表盘。包含三个同心圆活动环、每周柱状图、最近锻炼列表，采用带有霓虹灯装饰的高级深色模式。
mockit-mcp 会返回一个真实的 PNG 原型（尺寸为 390×844，2 倍设备缩放，即 iPhone 级视口）以及底层的 HTML/Tailwind 源码——这样你就可以进行视觉迭代，并在准备好构建时将其移植到 SwiftUI。
它不是静态模板引擎，也不是平庸的 AI 垃圾内容。系统提示词经过精心调优，以符合优质的 iOS 美学：真实的内容、SVG 图标（无 emoji）、用渐变代替库存照片、iOS HIG 字体比例，以及使用色调分层而非沉重的阴影。
Related MCP server: Playwright MCP for macOS
两种后端，相同工具。 使用本地 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 传输。 可在本地运行以进行开发，或作为网络服务用于共享/容器化环境。
工具 | 描述 |
| 文本简报 → PNG + HTML。可选 |
| 接收之前的 |
| 列出屏幕，可按项目筛选。 |
| 获取特定屏幕的元数据（或完整 HTML）。 |
Node.js 20+
要么已登录的 claude CLI（cli 后端，默认）要么一个 Anthropic API Key（api 后端）
Playwright 的 Chromium 下载（约 170 MB，一次性）
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 会话。
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 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 获取完整列表。
环境变量 | 默认值 | 说明 |
|
|
|
| — | 仅 |
|
| 仅 API 后端。如果你的账户没有 Opus 访问权限，请设置为 |
|
|
|
|
| 子进程超时时间 |
|
|
|
|
| HTTP 传输端口 |
|
| 绑定接口；非回环地址需要 |
| — | HTTP 认证的 Bearer token。如果 |
|
| 输出持久化目录 |
|
| CSS 像素渲染宽度 |
|
| CSS 像素渲染高度 |
|
| Retina 因子（最终 PNG 宽度为 |
|
|
|
每次生成：约 3K 输入 token（系统提示词）+ 6–12K 输出 token，具体取决于屏幕复杂度。在 Opus 上，输出成本占主导地位。
后端 | 首次调用 | 缓存后的后续调用 |
| 计入你的 Claude Code 订阅配额 | 同上 —— 缓存仅对系统提示词有折扣 |
| ~$0.50–0.95 (Opus 4.7) | ~$0.45–0.90 (缓存仅对系统提示词输入有折扣；输出成本不变) |
系统提示词缓存默认开启（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。
构建于以下项目之上：
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.
