Remote MCP · Подключение через облако

Pixso MCPПодключите ИИ к вашим макетам

Передайте ИИ-ассистенту ссылку на слой в Pixso. Изучайте структуру макета, вносите точечные изменения и преобразуйте дизайн в код — держать настольное приложение открытым не нужно.

Подключить Remote MCP Документация

Документация на английском

Авторизация OAuth 2.1Чтение и редактирование макетовДизайн ↔ код

Ваш ИИ-инструмент

CodexClaude CodeCursorVS Code

Опишите задачу в привычном инструменте

Pixso Remote MCPhttps://pixso.net/mcpОблачное подключение · Авторизованный доступ

Ваш файл дизайна Pixso

Слои и компоновкаКомпоненты и переменныеСтили и ресурсы

Работа с реальной структурой макета

Используйте MCP-клиент с поддержкой Streamable HTTP. Доступность инструментов зависит от типа вашего места и прав на файл.

ОТ СТРУКТУРЫ МАКЕТА К ДЕЙСТВИЮ

Дайте ИИ больше, чем скриншот

Передайте ассистенту структуру, компоненты, стили и комментарии к макету. Он сможет работать с нужной частью дизайна и показать вам результат.

Разбирайтесь в структуре макета

Читайте структурированные данные слоёв, находите узлы и фреймы, изучайте те части макета, которые нужны для вашей задачи.

Данные макета

Создавайте и редактируйте макеты

Создавайте или изменяйте узлы в заданных пределах. Корректируйте отступы или обновляйте набор свойств прямо в файле дизайна.

Редактирование макета

Переходите от дизайна к коду и обратно

Генерируйте фронтенд-код из макета или преобразуйте HTML и ZIP-архив веб-проекта в редактируемый макет Pixso.

Двустороннее преобразование

Работайте с вашей дизайн-системой

Читайте данные о компонентах, стилях и переменных для повторного использования. Обновляйте стили и переменные с учётом принятых в команде правил.

Компоненты и стили

Проверяйте результат визуально

Сделайте снимок нужной области, изучите свойства и проверьте выравнивание, вложенность и структуру макета после изменений.

Проверка компоновки

Используйте ресурсы и обратную связь

Экспортируйте ресурсы в PNG, JPEG, SVG, PDF, WebP и другие форматы. Читайте обсуждения в комментариях, чтобы учитывать замечания при работе над задачей.

Экспорт ресурсов

REMOTE MCP

Один адрес. Три шага для подключения.

Подключите ИИ-инструмент, скопируйте ссылку на слой и опишите задачу. Для Remote MCP не нужно держать открытыми настольное приложение или вкладку с макетом.

URL сервера Remote MCPhttps://pixso.net/mcp
  1. 01

    Добавьте сервер и авторизуйтесь

    Укажите URL сервера в настройках MCP вашего клиента и пройдите авторизацию OAuth 2.1. Можно также использовать персональный токен доступа — порядок настройки описан в документации.

    Codex Claude Code Cursor VS Code
  2. 02

    Скопируйте ссылку на нужный слой

    В Pixso выберите нужный фрейм или слой и нажмите Copy link. Параметр item-id указывает область макета, с которой должен работать ассистент.

    Где скопировать ссылку

    Используйте ссылку на слой, а не общую ссылку на файл или страницу.

  3. 03

    Опишите задачу и допустимые изменения

    Отправьте ИИ-ассистенту ссылку, цель и область, которую разрешено менять. Сначала попросите изучить структуру, затем — сгенерировать код или отредактировать выбранный макет.

    Руководство по настройке

    Для чтения нужны права на просмотр. Для изменений также нужны права на редактирование.

НАЧНИТЕ С КОНКРЕТНОЙ ЗАДАЧИ

Один экран, группа компонентов или точечное изменение

Ссылка на слой указывает нужный макет. Ваш запрос объясняет ассистенту, что с ним сделать.

Сначала изучите макетИзучи слой по этой ссылке и кратко опиши разделы страницы, компоненты и основные переменные. Пока не меняй макет.
Затем внесите изменениеДля группы карточек по этой ссылке на слой установи расстояние между карточками 24px. Сохрани текст и связи между компонентами, затем сделай скриншот, чтобы я мог проверить результат.

ДИЗАЙН ↔ КОД

Свяжите дизайн и разработку

Начните разработку с готового макета или перенесите веб-страницу на редактируемый холст для следующего обсуждения и доработки.

Макет Pixso<React />

ИЗ ДИЗАЙНА В КОД

Создавайте код на основе структуры макета

Используйте design_to_code для генерации кода HTML, React, Vue, ArkUI или Flutter. Затем выберите нужные доработки: адаптивную компоновку, CSS-переменные, Tailwind, очистку кода или приведение к дизайн-системе проекта.

Преобразование дизайна в код

Для преобразования дизайна в код нужны корпоративное место типа Full-function или Developer и файл в корпоративном пространстве.

<HTML />Редактируемый макет

ИЗ КОДА В ДИЗАЙН

Перенесите веб-код на холст

Используйте code_to_design, чтобы преобразовать HTML или ZIP-архив веб-проекта в редактируемый макет Pixso. Изучайте компоновку, корректируйте стили и обсуждайте следующую версию с командой.

Преобразование кода в дизайн

Преобразование выполняется как отдельная задача. Последующие изменения макета и кода проекта не синхронизируются автоматически в реальном времени.

ВЫБЕРИТЕ СПОСОБ ПОДКЛЮЧЕНИЯ

Начните с Remote MCP

Используйте облачное подключение для задач по ссылке на слой. Выбирайте Local MCP, если хотите работать с файлом и выделенными элементами, открытыми в настольном приложении.

Рекомендуем для начала

Remote MCP

Подключайтесь к облачному сервису Pixso с помощью авторизации и ссылки на слой.

  • Не нужно держать Pixso Web или настольное приложение открытыми
  • Рекомендуется OAuth 2.1; персональные токены доступа также поддерживаются
  • Ссылки на слои можно использовать на разных устройствах
Настроить Remote MCP
Работа в настольном приложении

Local MCP

Подключайтесь к запущенному настольному приложению Pixso и работайте с активным файлом.

  • Настольное приложение и сервис MCP должны быть запущены
  • Нужный файл дизайна должен быть открыт в активной вкладке
  • Некоторые инструменты доступны только через Local MCP
Настроить Local MCP

НАЧНИТЕ С НУЖНОГО СЛОЯ

Укажите ассистенту точную область макета

Скопируйте ссылку на фрейм или слой, с которым хотите работать. Так ассистент получит точную область для чтения, редактирования или генерации кода.

Как получить ссылку на слой
Добавьте Pixso Skills для работы с задачами

Skills помогают агенту организовывать работу над дизайном и выбирать инструменты. MCP обеспечивает подключение к файлу. Используйте официальное руководство по установке для вашего агента и версии Pixso.

Узнать о Pixso Skills
Редактор Pixso: команда Copy link для выбранного слоя
Скопируйте ссылку на нужный слой, чтобы указать ассистенту конкретную область макета.

ЧАСТЫЕ ВОПРОСЫ

Перед подключением

Документация
Нужно ли настольное приложение Pixso для Remote MCP?

Нет. Сервис работает в облаке. После авторизации он использует действующую ссылку на слой; держать Pixso Web или настольное приложение открытыми не требуется. При этом нужны подключение к сети и действующая авторизация.

Какой тип места и какие права на файл нужны?

Для работы с MCP нужно место типа Full-function или Developer. Для преобразования дизайна в код нужны корпоративное место одного из этих типов и файл в корпоративном пространстве. Чтение требует прав на просмотр, а изменения макета — также прав на редактирование.

Все инструменты
Как подключить Cursor, Claude Code, VS Code или Codex?

Используйте один и тот же URL сервера Remote MCP, но следуйте инструкции для своего клиента. Поля конфигурации отличаются: откройте руководство для разработчиков по ссылке, а не копируйте настройки другого редактора.

Настроить подключение
Почему подключение работает, но макет недоступен?

Проверьте, что у вашего аккаунта есть права на просмотр файла, а ссылка на слой содержит правильный item-id. Параметр page-id или общая ссылка для доступа к файлу не указывают нужный слой. Если срок сеанса истёк, авторизуйтесь снова. Для Local MCP также проверьте настольное приложение и активный файл.

Может ли ИИ редактировать макет, а не только читать его?

Да. Текущая версия Remote MCP поддерживает редактирование макетов, обновление стилей и переменных, изменение свойств. Укажите слои и допустимые изменения, используйте файл с правами на редактирование и проверьте результат с помощью скриншотов и проверки компоновки.

Можно ли использовать Remote MCP при частном развёртывании?

Перед включением Remote MCP в частном развёртывании обратитесь к своему менеджеру. Используйте адрес сервера и настройки подключения вашей среды, а не URL публичного облака.