Screenrove
Real product UI captures (onboarding, pricing, in-app screens) with design guides for coding agents.
使うべきか
品質と安全性
ツール定義とプロトコルへの準拠に関する自動分析に基づいています。
コンテキストコスト
これは、サーバーのツールがモデルのコンテキストに読み込まれるたびに消費されるおおよそのトークン数です。数が多いほど、ほかのタスクに使える注意が減ります。
インストール
ワンクリックインストール
これを `claude_desktop_config.json` ファイルに追加してください:
{
"mcpServers": {
"screenrove": {
"url": "https://screenrove.com/mcp"
}
}
}リモートエンドポイント
https://screenrove.com/mcpstreamable-httpできること
ツール一覧
ツール(10)
🟢build_handoff(referenceId, goal, stack, screens, includeDesign)
Build the same ready-to-follow prompt as the "Use in agent" button: ordered screens with notes, observed transitions, image URLs, the design guide and an implementation checklist. Use a product's onboarding flow (`{product}-onboarding`), its whole collection (`{product}-collection`) or any single screen id.
入力スキーマ
{
"type": "object",
"properties": {
"referenceId": {
"type": "string",
"description": "e.g. linear-onboarding, stripe-collection or vercel-marketing-pricing."
},
"goal": {
"type": "string",
"description": "What you want to build. Goes at the top of the prompt."
},
"stack": {
"type": "string",
"description": "Preferred stack, e.g. Next.js and Tailwind."
},
"screens": {
"type": "string",
"description": "Comma-separated screen ids to keep. Omit to include every screen in the reference."
},
"includeDesign": {
"type": "boolean",
"description": "Include the observed design guide. Set false to use your project's own design system.",
"default": true
}
},
"required": [
"referenceId"
],
"additionalProperties": false
}🟢check_my_ui(description, screenType, sections, flowSteps, flowType, ...)
Find the real product screens closest to the user's own screen or flow and compare them: step counts, plan counts, page sections. First look at the user's screenshot or running app yourself, then describe its structure in these fields. Do not send the image, and leave out real names, emails, prices or customer data: structure only. Returns a short report with the closest references (the best match's screenshot attached). To let the user choose one to build from, pass their ids to pickReference.
入力スキーマ
{
"type": "object",
"properties": {
"description": {
"type": "string",
"description": "One or two sentences on what the screen is for and how it is laid out, e.g. \"Pricing page with three plan cards, a monthly/yearly toggle and a feature table\"."
},
"screenType": {
"type": "string",
"description": "What kind of screen it is.",
"enum": [
"landing",
"pricing",
"feature-page",
"sign-up",
"sign-in",
"verification",
"onboarding-step",
"plan-picker",
"empty-state",
"dashboard",
"list",
"detail",
"create-form",
"search",
"picker",
"booking",
"checkout",
"marketplace",
"settings",
"docs",
"menu",
"lesson"
]
},
"sections": {
"type": "array",
"items": {
"type": "string"
},
"description": "Page sections top to bottom, e.g. [\"Hero\", \"Plan cards\", \"FAQ\"]."
},
"flowSteps": {
"type": "array",
"items": {
"type": "string"
},
"description": "For a multi-screen flow, each step's title in order, e.g. [\"Sign up\", \"Verify email\", \"Create workspace\"]."
},
"flowType": {
"type": "string",
"description": "What the flow does, so step counts are only compared with flows of the same kind. Inferred from screenType when omitted.",
"enum": [
"signup-onboarding",
"search",
"checkout",
"booking",
"marketplace"
]
},
"primaryAction": {
"type": "string",
"description": "The main button or action, e.g. \"Start free trial\"."
},
"planCount": {
"type": "number",
"description": "For pricing screens, how many plans are shown."
},
"kind": {
"type": "string",
"description": "Only compare with this kind of capture.",
"enum": [
"flow",
"marketing",
"product"
]
},
"product": {
"type": "string",
"description": "Only compare with this product id."
},
"limit": {
"type": "number",
"description": "How many references to return, 1 to 5.",
"default": 4
}
},
"required": [
"description"
],
"additionalProperties": false
}🟢get_design(productId, context)
Get the measured design guide for a product: font, palette, type scale, layout and component notes. Marketing site and product UI are measured separately.
入力スキーマ
{
"type": "object",
"properties": {
"productId": {
"type": "string",
"description": "Product id from listProducts, e.g. linear, stripe or airbnb."
},
"context": {
"type": "string",
"description": "Which surface to return. Omit for both.",
"enum": [
"marketing",
"product"
]
}
},
"required": [
"productId"
],
"additionalProperties": false
}🟢get_product(productId)
Get a product's coverage notes, design summary and every screen it contains, grouped into the onboarding flow, marketing pages and in-product screens.
入力スキーマ
{
"type": "object",
"properties": {
"productId": {
"type": "string",
"description": "Product id from listProducts, e.g. linear, stripe or airbnb."
}
},
"required": [
"productId"
],
"additionalProperties": false
}🟢get_screen(screenId)
Get everything recorded about one screen: notes, source URL, image URLs and dimensions, observed actions and where they lead, and page sections for long pages.
入力スキーマ
{
"type": "object",
"properties": {
"screenId": {
"type": "string",
"description": "Screen id from searchScreens or getProduct, e.g. linear-signup."
}
},
"required": [
"screenId"
],
"additionalProperties": false
}🟢get_screen_image(screenId, size)
Get the screenshot itself so you can look at it. For marketing pages taller than 4000px, preview returns only the first screen (above the fold); use size=full for the whole page, which can exceed what vision models accept. getScreen lists the page's sections with their y offsets.
入力スキーマ
{
"type": "object",
"properties": {
"screenId": {
"type": "string",
"description": "Screen id from searchScreens or getProduct, e.g. linear-signup."
},
"size": {
"type": "string",
"description": "preview (default) keeps images small enough to view; full returns the original capture.",
"enum": [
"preview",
"full"
],
"default": "preview"
}
},
"required": [
"screenId"
],
"additionalProperties": false
}🟢list_products
List every product in the library with its capture date, tags, coverage notes and screen counts. Start here to see what references exist.
入力スキーマ
{
"type": "object",
"properties": {},
"required": [],
"additionalProperties": false
}🟢pick_reference(q, screens, product, kind, count, ...)
Show the user a few matching references side by side in their browser and let them click the one to build from. Prefer this over sending full-page images whenever the user should decide. Returns a url: open it for them (run `open <url>` on macOS, `xdg-open <url>` on Linux, or show the link), tell them to choose, then call waitForPick with the pickId.
入力スキーマ
{
"type": "object",
"properties": {
"q": {
"type": "string",
"description": "Search words, e.g. \"pricing page\". The best matches become the options."
},
"screens": {
"type": "string",
"description": "Comma-separated screen ids to show instead of searching, e.g. from an earlier searchScreens."
},
"product": {
"type": "string",
"description": "Only search this product id."
},
"kind": {
"type": "string",
"description": "Only search this kind of screen.",
"enum": [
"flow",
"marketing",
"product"
]
},
"count": {
"type": "number",
"description": "How many options to show when searching, 2 to 6.",
"default": 3
},
"goal": {
"type": "string",
"description": "What the user is building, shown on the page and used in the build prompt, e.g. \"NSDR premium upgrade page\"."
},
"stack": {
"type": "string",
"description": "Preferred stack for the build prompt."
}
},
"required": [],
"additionalProperties": false
}🟢search_screens(q, product, kind, limit)
Search every captured screen by keyword across titles, notes, page sections and observed actions. Filter by product or kind. Use this to find references like "pricing page", "empty state" or "date picker".
入力スキーマ
{
"type": "object",
"properties": {
"q": {
"type": "string",
"description": "Keywords to match. Omit to list everything that matches the filters."
},
"product": {
"type": "string",
"description": "Only return screens from this product id, e.g. linear."
},
"kind": {
"type": "string",
"description": "Only return this kind of screen.",
"enum": [
"flow",
"marketing",
"product"
]
},
"limit": {
"type": "number",
"description": "Maximum results, 1 to 50.",
"default": 20
}
},
"required": [],
"additionalProperties": false
}🟢wait_for_pick(pickId, wait)
Wait for the user to choose on the pick page. Returns as soon as they click, or status pending after the wait; call again if so. Once chosen, returns their reference with its screenshot and a full build prompt, so you can start building from it.
入力スキーマ
{
"type": "object",
"properties": {
"pickId": {
"type": "string",
"description": "The pickId returned by pickReference."
},
"wait": {
"type": "number",
"description": "Seconds to wait for a choice, 0 to 50.",
"default": 45
}
},
"required": [
"pickId"
],
"additionalProperties": false
}コミュニティ
エビデンス