Screenrove

Real product UI captures (onboarding, pricing, in-app screens) with design guides for coding agents.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

    Какие данные видит

    Нужен ли аккаунт

    Не нужен: сервер работает без входа

    Real product UI captures (onboarding, pricing, in-app screens) with design guides for coding agents.

    Как подключить

    Как подключить Screenrove к Claude

    Адрес сервера, который нужно вставить в настройках Claude:

    https://screenrove.com/mcp

    1. Откройте Claude (сайт claude.ai или приложение для компьютера).
    2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
    3. Нажмите Добавить пользовательский коннектор (Add custom connector).
    4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
    5. В чате нажмите + → Коннекторы и включите новый коннектор.

    Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

    Авторизация

    После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

    Как подключить Screenrove к ChatGPT

    Адрес сервера, который нужно вставить в настройках ChatGPT:

    https://screenrove.com/mcp

    1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
    2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
    3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
    4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
    5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
    6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

    Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

    Авторизация

    При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

    Как подключить Screenrove к Cursor

    Адрес сервера, который нужно вставить в настройках Cursor:

    https://screenrove.com/mcp

    Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

    Вручную:

    1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
    2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
    3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

    Авторизация

    Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

    Список инструментов сервера (13)

    Технические названия из tools/list. Нужны только разработчикам.

    build_handoffGenerate a complete build prompt for a coding agent: ordered screens with notes, observed transitions, full-resolution image URLs, the measured design guide, and an implementation checklist. This is the same prompt as the "Use in agent" button on the site. Reference IDs: use `{product}-onboarding` for a product's signup flow, `{product}-collection` for all their screens, or any single screen id (like `linear-marketing-pricing`). Use this when you want to build UI that follows a real product's patterns. The prompt includes everything an agent needs: screenshots to reference, design tokens to match, and implementation steps to follow.
    check_my_uiCompare the user's UI structure against Screenrove's catalog of real products. Describe what the user has (screen type, sections, flow steps, plan count) and get a report showing the closest real-world references with factual comparisons. Use only the fields the user provides; leave out personal names, pricing, or customer data. The report includes step counts, section counts, observed actions, and factual comparisons— not recommendations. Use this when the user wants to validate their UI against real products, understand if their flow has more or fewer steps than competitors, or see how similar screens are structured.
    compare_screensCompare two captured screens side by side: layout structure, page sections, observed actions, dimensions, screen types, and design guide differences. Returns a structured comparison with similarities, differences, and factual observations. Use this when the user wants to understand how two products approach the same problem differently—e.g. comparing Linear's pricing page with Stripe's pricing page, or Vercel's onboarding with Notion's onboarding. You can also compare one screen against a target description to see how close a reference matches what the user is trying to build.
    get_designGet the measured design guide for a product: observed font families, color palette, type scale, layout patterns, spacing values, and component observations. Marketing site and product UI are measured separately. Use this when you want to match a competitor's design system, understand their visual language, or borrow their typography and color choices for your own project.
    get_flowGet the complete onboarding flow for a product: every step in order with titles, notes on what happens, observed transitions (button labels and where they lead), and which steps are alternate branches. Includes the handoff reference id to use with buildHandoff. Use this to study how a competitor structures their signup and onboarding, what information they collect at each step, and how they guide users to activation.
    get_productGet a product's full collection: coverage notes, design summary, and every captured screen grouped into onboarding flow, marketing pages, and in-product screens. Use this to explore a competitor's complete UI: their signup flow, pricing page, dashboard, settings, and other screens. Each screen has notes and an image URL.
    get_screenGet everything recorded about one screen: notes on what it does and how it's laid out, source URL, image URLs and dimensions, observed actions and where they lead, and page sections for long marketing pages. Use this to understand a specific UI pattern in detail before building something similar.
    get_screen_imageGet the actual screenshot so you can see the UI. 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 so you know what's below the fold.
    list_flowsList every captured user journey: onboarding flows, signup sequences, checkout processes, booking flows, and marketplace explorations. Shows step counts, flow type, and observed transitions between steps. Use this to find complete user journey references—not just individual screens—so you can see how products guide users through multi-step processes like signup, onboarding, or checkout.
    list_productsList every product in the UI reference catalog with its capture date, tags, coverage notes and screen counts. Start here to see what competitor products, design systems, and UI patterns are available. Products include: Linear, Cursor, Vercel, Airbnb, Stripe, Duolingo, Notion, Raycast, Cal.com, Framer, and Supabase. Each has captured onboarding flows, marketing pages, and/or in-app screens.
    pick_referenceShow the user several matching UI references side by side in their browser and let them click the one to build from. Returns a URL to open for them. Prefer this over sending full-page images whenever the user should decide which reference to use. The picker shows real screenshots at scroll depth so they can evaluate long pages. After calling this, tell them to choose in the picker, then call waitForPick with the pickId to get their choice and a complete build prompt.
    search_screensSearch the UI reference catalog by keyword across titles, notes, page sections, and observed actions. Filter by product or kind (flow/marketing/product). Use this to find design pattern examples like "pricing page", "empty state", "date picker", "onboarding step", "checkout form", "dashboard", "sign-up", "settings", etc. Returns the best matches with screen IDs you can pass to getScreen or getScreenImage.
    wait_for_pickWait for the user to choose on the pick page. Long-polls up to 50 seconds—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 immediately. If they clicked "None of these fit", status is "dismissed" and you should ask what they want instead.