Claude Code(또는 모든 MCP 클라이언트)에 요청하세요:
피트니스 트래커용 홈 대시보드를 디자인해줘. 3개의 동심원 활동 링, 주간 막대 차트, 최근 운동 목록, 네온 액센트가 있는 프리미엄 다크 모드.
mockit-mcp는 실제 PNG 목업(iPhone급 뷰포트인 390×844, 2x 배율) 및 기반이 되는 HTML/Tailwind 소스를 반환합니다. 이를 통해 시각적으로 반복 수정하고 빌드 준비가 되면 SwiftUI로 포팅할 수 있습니다.
이것은 정적 템플릿 엔진도 아니고 저품질 AI 생성물도 아닙니다. 시스템 프롬프트는 프리미엄 iOS 미학을 위해 수작업으로 조정되었습니다: 실제 콘텐츠, SVG 아이콘(이모지 사용 안 함), 스톡 사진 대신 세련된 그라데이션, iOS HIG 타이포그래피 스케일, 무거운 그림자 대신 톤 레이어링을 사용합니다.
Related MCP server: Playwright MCP for macOS
두 가지 백엔드, 동일한 도구. 로컬 claude CLI(구독형, 추가 비용 없음) 또는 Anthropic API(키 + 호출당 요금)를 사용하세요. 환경 변수 하나로 전환할 수 있습니다.
실제 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 다운로드(~170 MB, 1회)
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 인증용 Bearer 토큰. |
|
| 출력물이 저장되는 위치 |
|
| CSS 픽셀 단위 렌더링 너비 |
|
| CSS 픽셀 단위 렌더링 높이 |
|
| 레티나 팩터 (최종 PNG는 |
|
|
|
생성당: 약 3K 입력 토큰(시스템 프롬프트) + 화면 복잡도에 따라 약 6–12K 출력 토큰. Opus에서는 출력 비용이 지배적입니다.
백엔드 | 첫 호출 | 캐시된 후속 호출 |
| Claude Code 구독 할당량 차감 | 동일 — 캐시는 시스템 프롬프트만 할인 |
| ~$0.50–0.95 (Opus 4.7) | ~$0.45–0.90 (캐시는 시스템 프롬프트 입력만 할인; 출력 비용은 동일) |
시스템 프롬프트 캐싱은 기본적으로 켜져 있습니다(5분 TTL). 호출당 몇 센트를 절약하지만 획기적인 할인은 아닙니다. 출력 토큰은 여전히 전체 요금이 청구됩니다. 실질적인 비용 절감을 위해서는 더 작은 모델(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개 대안)
이슈 및 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.
