Screenrove
Real product UI captures (onboarding, pricing, in-app screens) with design guides for coding agents.
我該用這個嗎
品質與安全性
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高,可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `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
}社群
證據