Agentic Canvas: создавайте дизайн с ИИ-агентами2 min read

ИИ-агенты могут создать сайт за считаные минуты. Но потом вам нужно передвинуть кнопку, сравнить два макета, собрать скриншоты или самостоятельно поправить отступы. И вы снова объясняете визуальное изменение в новом запросе. Иногда проще перетащить элемент, чем описывать его.

Поэтому мы создали Agentic Canvas от AgentGrid.io. Это бесплатный ИИ-холст для дизайна, где вы и агент с поддержкой MCP работаете над одной настоящей страницей на HTML и CSS. Импортируйте HTML, начните с макета или изображения либо попросите агента создать страницу. Затем выделяйте, перемещайте, изменяйте размер и редактируйте то, что он сделал. Вы можете открыть Agentic Canvas без регистрации.

Вот как это работает: импортируйте HTML-страницу или изображение, расположите и поправьте элементы визуально, попросите Claude или ChatGPT доработать анимацию или взаимодействие, затем экспортируйте HTML. В любой момент можно внести изменения вручную, не начиная новый запрос с нуля.

Что такое Agentic Canvas?

Это визуальное рабочее пространство для создания настоящих веб-страниц вместе с ИИ-агентом. Здесь есть привычные фреймы, слои, инспектор и настройки макета, но фреймы основаны на коде, а не на статичных картинках. Агент, подключённый через MCP, может прочитать текущую страницу и изменить её. Вы видите результат, правите его вручную, а агент продолжает работу с обновлённым дизайном.

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

Зачем нам понадобился холст для ИИ-агентов

1. Визуальная совместная работа без бесконечных уточнений в чате

Когда вы создаёте лендинг, экран продукта или маркетинговый материал с помощью Claude или ChatGPT, первый вариант только начало. Возможно, вам нужны три версии первого экрана, более плотная сетка или другой призыв к действию. Описывать каждое визуальное решение в чате долго, особенно когда вы уже точно знаете, что хотите изменить.

В Canvas можно внести это изменение напрямую. Агент прочитает страницу в её текущем состоянии, а не словесное описание версии, которая уже изменилась. Он берёт на себя основную работу, вы вручную принимаете окончательные решения, и он продолжает с того места, где вы остановились.

2. Место для визуальных материалов

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

Это особенно важно для бренда. Референс макета, фрагмент текста и скриншот могут передать замысел быстрее, чем ещё один абзац об атмосфере, которую вы хотите создать.

3. Почему в основе холста настоящий HTML и CSS

Зачем строить инструмент дизайна на HTML и CSS? Потому что агенты для программирования уже свободно читают и пишут код. На мой взгляд, заставлять агента работать через отдельный формат дизайна похоже на просьбу к носителю английского думать по-английски, но читать и писать по-китайски. Дополнительный перевод может потерять детали, а ещё требует времени и токенов. Я уже говорил, что Дизайн , это код. Здесь эта мысль воплощена буквально.

В Agentic Canvas фрейм представляет собой настоящую страницу, авторазмещение соответствует CSS flexbox, а сетки являются CSS-сетками. Вы можете визуально изменить кнопку, попросить агента добавить анимацию или взаимодействие и экспортировать код, когда будете готовы. На холсте работают скрипты, состояния при наведении и адаптивное поведение. Это не картинка, которую потом придётся собирать заново.

Чем это отличается от обычного дизайнерского холста?

Обычный дизайнерский холст помогает оформить визуальную идею, но затем часто требуется отдельная разработка, чтобы превратить её в рабочую веб-страницу. Agentic Canvas это инструмент дизайна на HTML: фрейм является настоящей страницей, поэтому агент может читать и менять те же HTML и CSS, которые вы правите визуально. Это не значит, что здесь есть все возможности зрелого пакета для дизайна. Цель в том, чтобы визуальные решения и работающий код оставались вместе, дорабатываете ли вы сайт, созданный ИИ, или делаете новый.

Как спроектировать сайт с помощью Claude или ChatGPT на Agentic Canvas

1. Начните с того, что у вас есть. Откройте холст и вставьте HTML, скопируйте макет из Figma, импортируйте изображения или дизайн либо начните со страницы, созданной агентом. В руководство по импорту перечислены доступные способы начать.
2. Подключите своего агента. На холсте выберите ИИ-агенты, затем Добавить агента. Следуйте инструкции по подключению для Claude, ChatGPT или другого клиента с поддержкой MCP. Пока агент работает, не закрывайте вкладку с холстом.
3. Сделайте первый проход вместе. Попросите макет или взаимодействие, затем ознакомьтесь с живым результатом на холсте.
4. Возьми контроль визуально. Перемещайте элементы, меняйте цвета, изменяйте размер кадра и вручную настраивайте макет. Попросите агента продолжить с последней версии.
5. Экспортируйте или делитесь, когда будете готовы. Экспортируйте HTML или другой поддерживаемый формат без публикации. Если вам нужна ссылка на размещённую страницу, вы можете поделиться или опубликовать через AgentGrid.io. Этот облачный шаг необязателен и требует аккаунта.

Что хранится локально, а для чего нужен аккаунт?

Вы можете бесплатно начать работу прямо в браузере без регистрации. Ваши файлы хранятся в этом браузере на этом устройстве, а не в автоматическом облачном хранилище, доступном с разных устройств. Экспортируйте копию работы, которую хотите сохранить за пределами браузера. Подключённый внешний агент может читать холст через сеть, поэтому локальное хранение не означает работу офлайн. Делиться работой или публиковать её через AgentGrid.io необязательно, но для этого нужен аккаунт.

Я считаю, что следующий инструмент дизайна не должен заставлять нас выбирать между визуальным контролем и агентом, который умеет создавать. Агент должен работать на родном языке продукта, а мы по-прежнему должны иметь возможность взять элемент на экране и изменить его.

Откройте Agentic Canvas и попробуйте проектировать вместе со своим агентом. Чтобы быстро ознакомиться с рабочим процессом, посмотрите демонстрацию запуска и узнайте о возможностях.

Вопросы об Agentic Canvas

Бесплатен ли Agentic Canvas и нужен ли мне аккаунт?

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

Какие ИИ-агенты работают с Agentic Canvas?

Claude, ChatGPT, Claude Code, Codex, Cursor и другие агенты с поддержкой MCP могут читать и менять открытый холст. Выберите ИИ-агенты а затем Добавить агента, чтобы пройти шаги подключения. Пока агент работает, держите вкладку с холстом открытой.

Могу ли я визуально редактировать сайт, сгенерированный ИИ?

Да. Импортируйте HTML-страницу или папку сайта, затем перемещайте элементы, меняйте их размер и дорабатывайте их на холсте. Фреймы состоят из настоящих HTML и CSS, поэтому агент может продолжить работу после ваших визуальных правок, а не пересобирать статичный макет.

Могу ли я импортировать существующую HTML-страницу или сайт?

Да. Вставьте HTML в холст или перетащите папку сайта либо ZIP-архив на экран Home. Также можно начать с выбранного фрагмента Figma или изображения.

Где хранятся мои файлы Canvas? Создаются ли резервные копии?

Файлы хранятся локально в том браузере и на том устройстве, которыми вы пользуетесь. Автоматического облачного резервного копирования нет, и в другом браузере или на другом устройстве файлы не появятся. Экспортируйте копию важных материалов или выберите совместный доступ через AgentGrid.io, если нужны облачная копия и история версий.

Может ли мой AI-агент работать на холсте после того, как я закрываю вкладку?

Нет. Вкладка Canvas должна оставаться открытой, пока подключённый агент читает или меняет дизайн. Позже вы сможете вернуться к локально хранимым файлам в том же браузере.

Даёт ли подключение агента доступ к моему AgentGrid.io рабочему месту?

Нет. Подключение агента к холсту позволяет ему работать с открытыми файлами Canvas. Подключение того же агента к артефактам AgentGrid.io это отдельный шаг.

Могу ли я экспортировать без публикации?

Да. Экспортируйте HTML, PNG, SVG или PDF без распространения или публикации. Вы можете передать HTML программирующему агенту, чтобы он продолжал строить в другом месте.

Поделиться и опубликовать: в чём разница?

Нет. Обмен через AgentGrid.io даёт доступ к выбранным вами людям и агентам; публикация размещает дизайн на публичном веб-адресе. Оба варианта необязательны и требуют AgentGrid.io аккаунта.