Интерактивные визуализации¶

Агент может собрать интерактивный макет интерфейса и открыть его прямо в Koda Desktop. Так проще обсудить экран, форму или целый сценарий: вы видите не описание, а работающий прототип.

Как это выглядит¶

Когда агент создаёт визуализацию, в ленте чата появляется карточка с названием и номером версии. Нажмите на карточку — макет откроется в панели браузера. Старые карточки остаются в истории и открывают именно свою версию: обновление макета не меняет прошлые кадры.

Каждая новая версия — отдельная карточка. Это позволяет вернуться к предыдущему варианту и сравнить его с текущим.

Доска и взаимодействие¶

Макет может состоять из нескольких экранов: например, компьютерная и мобильная версии или разные состояния формы. Экраны располагаются на доске, которую можно двигать и масштабировать.

• Перетаскивание фона или заголовка экрана перемещает доску или сам экран.
• Колесо мыши и жест двумя пальцами двигают доску, Shift + колесо — по горизонтали.
• ⌘ + колесо или щипок на трекпаде меняют масштаб вокруг указателя.
• Кнопки − и + в правом нижнем углу меняют масштаб, стрелки двигают доску, Shift + 1 показывает все экраны.
• Двойной щелчок по экрану или Enter на нём включает взаимодействие: кнопки, поля и прокрутка начинают работать.
• Esc или щелчок по пустому месту возвращает режим перемещения доски.

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

Версии и правки¶

Обсуждение и правки идут в обычном чате. Когда вы просите что-то изменить, агент создаёт новую версию и новую карточку, а прежняя остаётся доступной.

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

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

Что можно собрать¶

Поддерживаются два формата:

• HTML-документ — один файл с разметкой, стилями и скриптами;
• Проект — несколько файлов: HTML-экраны или компоненты React/TSX, общие стили, данные и ассеты.

Для проекта доступны React 19, ReactDOM, иконки Lucide и небольшой набор компонентов @koda/ui: кнопки, карточки, поля, вкладки, переключатели, таблицы и графики. Всё это поставляется вместе с приложением и не требует установки зависимостей.

Ограничения¶

• Нет произвольных npm-пакетов, CDN и Tailwind: используется только встроенный набор.
• Нет доступа к сети из макета.
• Нет публикации и постоянного состояния виджетов между открытиями.
• Код макета не запускается в основном окне приложения и не получает доступ к файлам проекта.
• Проект читается только в объёме, нужном для контекста и ассетов; установка зависимостей и сборка проекта не выполняются.

Где это доступно¶

Визуализации работают в режиме агента с правом записи. В режиме планирования и в read-only чате инструмент недоступен: макет нельзя создать или обновить.