Я сделал холст для AI-агентов и потратил 63 млн токенов, чтобы сравнить его с Figma

Привет, меня зовут Александр, я бекенд разработчик. С приходом ИИ-агентов границы между ролями постепенно стали размываться. Я почувствовал этот сдвиг на себе, когда работал в небольшой команде. Сейчас, получив запрос на новую фичу, я могу с помощью Claude Code или Codex придумать её интерфейс, собрать черновой макет и принести его бизнесу для обсуждения.

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

Так мне пришла идея создать Ream - холст для совместной работы с ИИ-агентом. Я хотел, чтобы агент быстро создавал варианты дизайна на холсте, а я мог сравнивать их, вносить правки и выбирать направление.

С самого начала для меня было важно, чтобы ИИ-агентам было удобно работать в Ream. Поэтому в основе холста лежат HTML и CSS - современные модели хорошо их понимают и легко редактируют.

Я решил проверить, действительно ли такой подход упрощает работу агента. Для сравнения я решил использовать Figma MCP. Я попросил Claude Code воссоздать три сайта отдельно в Ream и Figma и сравнил время, стоимость и расход токенов.

И Ream, и Figma можно подключить к Claude Code через MCP. Разница в том, как агент создаёт макет.

В Figma он работает с внутренними объектами редактора. Для этого ему нужно описать сами объекты и их свойства через JavaScript код. Затем этот код траслируется в Figma и переводится в объекты на холсте

В Ream агент передаёт HTML и CSS, а браузер рассчитывает размеры и расположение элементов. Например, карточку с заголовком, текстом и кнопкой можно создать одним фрагментом разметки, а не собирать из отдельных слоёв.

Для теста я выбрал страницы с разной композицией:

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

Каждую страницу Claude Code собрал дважды: через Ream MCP и Figma MCP. Всего получилось шесть отдельных сессий. Все они начинались в чистом окружении, без дополнительной памяти и специальных навыков. Я использовал Claude Opus 5 с уровнем рассуждений high, не давал подсказок после запуска и не исправлял макеты вручную.

В таблице привожу результаты создания всех трех страниц:

Чтобы понять, откуда взялась разница, я разделил расходы по типам действий:

По результатам эксперимента, агенту проще работать со ссылкой, чем со скриншотом: из HTML и CSS он сразу получает точные параметры страницы.

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

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

Самое интересное было сравнить качество полученных макетов с оригиналом.

Ниже показаны результаты всех трёх тестов: оригинал, версия из Ream и версия из Figma.

Это был первый эксперимент, в дальнейшем я хочу проверить Ream на других задачах. Например, дать агенту готовые макеты из Ream и Figma и сравнить, как он превратит их в рабочий код.

Ream уже работает на macOS и Windows и подключается к Claude Code, Codex и другим агентам через MCP. Редактором можно пользоваться бесплатно: в тариф входят 100 MCP-вызовов в неделю.

Если вы уже используете Claude Code или Codex для работы с интерфейсами, попробуйте Ream на своей задаче. В комментариях расскажите, где вы храните варианты дизайна и как передаёте выбранный макет агенту.