Генерация кода и вайрфреймов
Обзор
После аннотации изображения ограничивающими рамками и назначения поведений вы можете сгенерировать рабочий код компонентов или макет вайрфрейма. ИИ использует позиции ограничивающих рамок, типы элементов и направления поведения для создания точного вывода.
Боковая панель ИИ-ассистента
Панель ИИ-ассистента — правая боковая панель для настройки и запуска генерации кода или вайрфреймов. Она содержит следующие элементы управления:
Vision Model Selector
Выберите, какую модель компьютерного зрения ИИ использовать для анализа изображений и генерации вывода. Разные модели могут давать разные уровни детализации и точности.
Framework Selector
Выберите целевой фреймворк для генерации кода (например, React, Vue, Svelte). Сгенерированный код будет использовать синтаксис и паттерны выбранного фреймворка.
Components / Wireфреймы Tabs
Switch между generating код компонента (Components tab) или макеты вайрфреймов (Wireфреймы tab) из your annotated изображения.
Image Groups
Перечисляет все группы изображений текущего проекта обратной разработки. Выберите группу для предпросмотра изображений и настройки генерации. Каждая группа показывает количество изображений.
Generate Blocks
Нажмите для запуска процесса генерации ИИ. ИИ анализирует изображения выбранной группы вместе с аннотациями ограничивающих рамок и поведениями для создания результата.
Режимы вывода
Generate Code
Преобразуйте аннотированное изображение в рабочий код компонентов для вашего целевого фреймворка (React, Vue, Svelte и др.). Сгенерированный код включает макет, стили и поведения, которые вы определили для ограничивающих рамок.
Generate Wireframe
Экспортируйте аннотированное изображение как макет вайрфрейма, открывающийся в инструменте вайрфреймов. Каждая ограничивающая рамка становится элементом вайрфрейма, который можно дополнительно доработать, переставить и соединить с другими экранами.
Возможности генерации кода
Framework Selection
Выберите целевой фреймворк перед генерацией. Поддерживаемые фреймворки включают React, Vue, Svelte, SolidJS, Angular и другие.
Behavior Mapping
Поведения, назначенные ограничивающим рамкам, транслируются в обработчики событий, логику навигации, модальные окна и другой интерактивный код в выводе.
Layout Accuracy
ИИ использует позиции и размеры ограничивающих рамок из изображения для создания макета, максимально приближённого к оригинальному визуальному дизайну.
Save to Blocks
Сгенерированные компоненты можно сохранить непосредственно в библиотеку блоков для повторного использования между проектами.
Add to Project
Вставьте сгенерированный код непосредственно в текущий проект как новые файлы компонентов.
Советы
Для лучших результатов используйте изображения высокого разрешения с чёткими элементами UI. Плотно рисуйте ограничивающие рамки вокруг каждого элемента для более точной генерации кода. Назначайте конкретные поведения, а не расплывчатые описания — «открывает модальное окно регистрации» работает лучше, чем «делает что-то». ИИ лучше всего работает со стандартными веб-макетами и типичными UI-шаблонами.