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
}커뮤니티
증거