Промто Дизайн

Промто Дизайн работает с дизайн-HTML-файлами — самостоятельными веб-макетами, которые браузер уже умеет показывать как страницу. В таком файле можно собрать лендинг, экран сервиса, интерфейс мобильного приложения, презентацию, визуальную концепцию или интерактивный прототип, а затем отредактировать его, обсудить с агентом, опубликовать или использовать как точное задание для разработки.

Коротко: что это такое

Дизайн-HTML — это файл с именем вида:

• landing_design.html;
• dashboard_design.html;
• checkout_mobile_design.html.

Окончание _design.html важно: по нему Promto понимает, что перед ним дизайн, и показывает файл в разделе Все дизайны. Оно должно совпадать точно, включая регистр: используйте _design.html, а не _DESIGN.HTML.

Это полный HTML5-документ, а не отдельный фрагмент вёрстки: внутри есть корневые части doctype, html, head и body. В интерфейсе техническое окончание скрывается, поэтому dashboard_design.html отображается как dashboard.

Внутри обычно находятся:

• HTML — структура экрана: секции, карточки, заголовки, кнопки, формы;
• CSS — цвета, шрифты, сетка, размеры, состояния и адаптация под разные экраны;
• JavaScript — необязательные демонстрационные взаимодействия, например переключение вкладок, открытие меню или переход между слайдами;
• изображения, видео и шрифты — подключённые по постоянным ссылкам и путям проекта; большие материалы хранятся отдельно от HTML.

Основная визуальная часть собрана в одном главном файле. Для его просмотра не нужны npm install, сборка проекта, Vite, dev-сервер или отдельный порт: Promto открывает дизайн непосредственно на холсте.

При скачивании и публикации переносится сам HTML. Локальные файлы, лежащие рядом в проекте, автоматически внутрь него не упаковываются. Для изображений, видео и шрифтов используйте загруженные материалы с постоянными адресами или публичные URL, а после публикации отдельно проверьте, что все ресурсы открываются.

Один документ может быть длинной страницей, отдельным экраном приложения, набором демонстрационных состояний или презентацией со слайдами. Всё это остаётся одним дизайн-артефактом, пока его главная задача — показать и согласовать интерфейс.

На что это похоже

Проще всего представить дизайн-HTML как интерактивный макет, упакованный в настоящую веб-страницу.

• От скриншота он отличается тем, что текст, блоки и кнопки остаются отдельными элементами.
• От Figma-прототипа — тем, что макет уже рассчитывает настоящий браузер: работают CSS, шрифты, media queries и реальная ширина экрана.
• От готового приложения — тем, что его задача прежде всего показать внешний вид, композицию, состояния и предполагаемое поведение, а не реализовать всю систему.

Ещё одна полезная аналогия: дизайн-HTML — это “живое техническое задание”. Его можно не только рассматривать, но и открыть в браузере, проверить на ширине телефона, выбрать конкретный элемент, передать его агенту и затем использовать как визуальный источник для приложения.

Если сравнить процесс со строительством, Figma будет чертежом, дизайн-HTML — полноразмерным демонстрационным павильоном, а приложение — действующим зданием со всеми подключёнными системами. По павильону уже можно пройти и оценить пространство, но это ещё не означает, что внутри работают все реальные службы.

Зачем нужны дизайн-HTML-файлы

Быстро проверить идею

Не нужно сначала создавать весь проект. Можно собрать один экран, показать его команде или заказчику и понять:

• подходит ли визуальное направление;
• правильно ли расставлены акценты;
• понятен ли основной сценарий;
• хватает ли обязательных состояний;
• как интерфейс ведёт себя на телефоне и большом экране.

Сделать самостоятельный материал для демонстрации

Дизайн-HTML нужен не только как промежуточный этап перед разработкой. Иногда это и есть весь необходимый результат: его можно быстро показать команде, заказчику, инвестору, участникам встречи или тестовой группе по ссылке, в виде HTML, PNG или PDF.

Например, в Промто Дизайн можно сделать:

• рекламный баннер или промокреатив для запуска продукта;
• презентацию, питч-дек, коммерческое предложение или отчёт;
• одноразовый лендинг для мероприятия, акции, анонса или проверки спроса;
• демонстрационную страницу новой функции до начала разработки;
• интерактивный прототип для интервью и пользовательского тестирования;
• концепцию главной страницы, личного кабинета, мобильного экрана или редизайна;
• статичный дашборд или отчёт с демонстрационными данными;
• мини-каталог, меню, прайс-лист, портфолио или страницу продукта;
• приглашение, программу мероприятия, инструкцию или визуальный гайд;
• несколько вариантов одной идеи для сравнения на встрече.

Для таких задач не обязательно создавать полноценное приложение. Дизайн можно согласовать внутри Promto, опубликовать как самостоятельную страницу или экспортировать в подходящий формат.

Разделить дизайн и разработку

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

Передать агенту точный контекст

Вместо сообщения «сделай кнопку красивее» можно выбрать саму кнопку в макете и описать нужное изменение. Агент получает контекст элемента и понимает, о какой части какого файла идёт речь.

Проверить реальное поведение браузерной вёрстки

Figma показывает задуманный макет. HTML дополнительно позволяет увидеть:

• как переносится настоящий текст;
• как работает сетка при изменении ширины;
• что происходит с длинными заголовками;
• как выглядят hover-, focus- и active-состояния;
• помещается ли контент без горизонтальной прокрутки;
• как ощущаются анимации и локальные взаимодействия.

Быстро показать дизайн по ссылке

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

Дизайн-HTML, Figma и приложение: главное различие

	Дизайн-HTML в Promto	Файл Figma	Полноценное приложение
Основная единица	Браузерная страница в *_design.html	Фреймы, слои, компоненты и прототипные связи	Проект из множества файлов и сервисов
Где открывается	В Promto Design и браузере	В Figma	В браузере или мобильном приложении после запуска/сборки
Чем рисуется	Реальными HTML-элементами и CSS	Графическим движком Figma	Компонентами приложения, например React/Next.js
Адаптивность	Настоящие media queries и поведение браузера	Constraints и Auto Layout моделируют размеры	Реальная вёрстка плюс продуктовая логика
Интерактивность	Демонстрационная или локальная	Переходы прототипа между состояниями	Рабочие сценарии, данные и интеграции
Данные	Обычно примеры и заглушки	Текст и примеры внутри макета	API, база данных, состояние пользователя
Серверная часть	В самом файле отсутствует	Отсутствует	Может включать backend, очереди, хранилища и фоновые задачи
Основная цель	Согласовать и проверить дизайн в реальном браузере	Спроектировать визуальную систему и совместно работать над ней	Решать задачу пользователя в рабочем продукте

Чем дизайн-HTML отличается от файла Figma

Figma хранит модель дизайна

В .fig находятся специфичные для Figma сущности: страницы, фреймы, векторные слои, компоненты, варианты, Auto Layout, стили и связи прототипа. Эти данные лучше всего редактируются инструментами самой Figma.

HTML хранит браузерную реализацию макета

В дизайн-HTML нет нативных фреймов или компонентов Figma. Визуальная структура переводится в DOM и CSS: фрейм может стать секцией, Auto Layout — flex- или grid-контейнером, а вариант компонента — отдельным CSS-состоянием.

Из-за этого HTML лучше отвечает на вопросы о браузере:

• как макет растягивается и сжимается;
• как ведёт себя на конкретной ширине;
• что происходит с реальным контентом;
• какие элементы действительно можно нажать;
• как выглядит страница вне редактора.

А Figma лучше подходит для:

• сложной векторной графики;
• общей библиотеки компонентов;
• совместной дизайнерской работы и комментариев;
• быстрого исследования множества визуальных вариантов;
• поддержки дизайн-системы именно в среде Figma.

Импорт Figma — это перевод, а не синхронизация

При загрузке .fig Promto подготавливает содержимое файла и прикрепляет результат к чату. После отправки задания агент изучает импортированный макет и создаёт новый отдельный *_design.html.

При переводе агент старается сохранить внешний вид и смысл, но нативные возможности Figma не обязаны переноситься один в один. Например, компонентные варианты, плагины, сложные маски и прототипные связи приходится выражать средствами HTML, CSS и JavaScript.

Чем дизайн-файл отличается от полноценного приложения

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

Что видно на экране	Что обычно делает дизайн-файл	Что должно делать приложение
Форма входа	Показывает поля, ошибки и состояния кнопки	Проверяет пользователя, создаёт сессию, восстанавливает пароль
Каталог товаров	Показывает пример карточек и фильтров	Загружает товары из API, ищет, сортирует и учитывает остатки
Кнопка «Оплатить»	Демонстрирует внешний вид и переход состояния	Создаёт платёж, обрабатывает ответ провайдера и сохраняет результат
Загрузка файла	Показывает область загрузки и прогресс	Принимает файл, проверяет его и сохраняет в хранилище
Личный кабинет	Показывает пример данных	Получает данные конкретного пользователя и проверяет его права
Уведомление	Демонстрирует визуальное состояние	Приходит после реального события и сохраняет статус прочтения

Полноценное приложение обычно дополнительно включает:

• несколько экранов и реальные маршруты;
• состояние пользователя и правила доступа;
• backend и API;
• PostgreSQL, S3 или другие хранилища;
• интеграции с внешними сервисами;
• обработку ошибок и повторных запросов;
• тесты, зависимости и конфигурацию окружения;
• сборку, запуск, публикацию и наблюдение за работой.

Один HTML-файл технически может содержать много JavaScript и обращаться к внешним API. Но Promto Design намеренно рассматривает его как дизайн-артефакт. Не стоит превращать макет в скрытое монолитное приложение: после согласования интерфейса надёжнее создать нормальный проект с понятной структурой.

Как создать дизайн

Из готового стиля или шаблона

1. Откройте Главную в Промто Дизайн.
2. Выберите лендинг, дизайн, анимацию или слайды.
3. Нажмите Использовать.
4. Шаблон добавится в чат как подготовленный контекст.
5. Проверьте запрос, дополните требования и отправьте сообщение агенту.

Нажатие Использовать не отправляет сообщение автоматически. До отправки полезно добавить аудиторию, обязательные экраны, реальный текст, фирменные цвета и нужные размеры.

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

С нуля через агента

Можно сразу описать задачу в чате:

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

Агент создаст дизайн-файл, а Promto покажет ход работы в разделе Создание. После сохранения результат появится в Все дизайны.

Из Figma

Перед импортом подготовьте отдельную небольшую локальную копию: в идеале один экран или объект, максимум 2–3 тесно связанных фрейма со всеми нужными материалами внутри. Пошаговый процесс описан в руководстве «Как подготовить Figma-файл для Promto».

1. В полноценном рабочем пространстве на настольном интерфейсе нажмите Импортировать файлы из Figma.
2. Выберите или перетащите файл .fig.
3. Дождитесь завершения подготовки.
4. Promto прикрепит разобранный материал к чату.
5. Опишите, какой экран или страницу нужно получить, и отправьте запрос агенту.
6. Проверьте созданный *_design.html отдельно от исходного Figma-файла.

Из существующего HTML

Если у вас уже есть автономная HTML-страница, сохраните её в рабочем пространстве с окончанием _design.html или попросите агента сделать это. После обновления списка файлов Promto автоматически добавит её в Все дизайны.

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

Как подготовить хорошее задание

Перед генерацией укажите:

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

Чем точнее перечислены состояния, тем меньше вероятность получить красивый главный экран без важных рабочих ситуаций.

Как работать с готовым дизайном

Найти и открыть

• Недавние дизайны на главной дают быстрый доступ к четырём найденным файлам; этот блок не гарантирует сортировку по времени изменения.
• Все дизайны содержит все сохранённые *_design.html текущего рабочего пространства.
• Нажмите карточку, чтобы открыть конкретный дизайн.
• Команда Обновить перечитывает файл, если его только что изменил агент или вы отредактировали его другим способом.

В списке карточка показывает лёгкое превью первого экрана. Полный файл открывается только после выбора карточки.

Проверить в режиме просмотра

В режиме Просмотр страница открывается как интерактивный макет. Проверьте:

1. визуальную иерархию и читаемость;
2. реальный текст, длинные значения и переносы;
3. прокрутку и отсутствие горизонтального переполнения;
4. состояния кнопок, меню, вкладок и слайдов;
5. ширину телефона, планшета и десктопа через переключатель устройств;
6. загрузку изображений и шрифтов.

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

Отредактировать вручную

1. Откройте дизайн и перейдите в Редактирование.
2. Используйте разделы Шаблоны, Элементы, Текст, Загрузки и Слои.
3. Выберите элемент на странице или в дереве слоёв.
4. Измените текст, размеры, цвет, отступы, положение или другие доступные свойства.
5. Используйте отмену и повтор действий при необходимости.
6. Нажмите Сохранить.

Для старого или нестандартного HTML редактору может сначала потребоваться адаптация. Если автоматическая подготовка не прошла, файл всё равно можно открыть для просмотра или попросить агента привести его к формату редактора.

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

При выходе с несохранёнными изменениями Promto предложит сохранить их или явно отказаться от правок.

Попросить агента изменить конкретный элемент

1. Включите правку через агента или выберите элемент в редакторе.
2. Убедитесь, что в чате появился контекст выбранного элемента.
3. Опишите желаемый результат.
4. Отправьте сообщение.
5. После ответа обновите дизайн и проверьте изменение на нужных ширинах.

Пример:

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

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

Чтобы передать агенту весь дизайн, укажите путь к *_design.html в сообщении или используйте Сделать веб-приложение. Отдельной кнопки прикрепления всего дизайна к чату нет: контекстный чип предназначен для выбранного элемента.

Посмотреть или передать исходник

В меню действий доступны:

• копирование пути к файлу;
• открытие дизайна в отдельном окне;
• просмотр HTML-кода;
• создание альтернативного варианта;
• скачивание HTML;
• скачивание PNG;
• скачивание PDF для поддерживаемых презентаций.

HTML удобно передать разработчику как визуальный ориентир. PNG или PDF подходят для обсуждения и согласования, но теряют редактируемую структуру и поведение исходного файла.

Что за служебный project-файл рядом

Для визуального редактора Promto может создать рядом с дизайном служебный файл вида landing_design.project.json. Он хранит состояние редактора, а сам дизайн и публикация по-прежнему строятся из landing_design.html.

Не редактируйте служебный project.json вручную. Если нужно переместить, переименовать или удалить связанный дизайн, используйте файловый интерфейс Promto, чтобы HTML и служебные данные не разошлись.

Варианты и версии

Для исследования другого направления используйте Сгенерировать альтернативный вариант, если действие доступно и на балансе есть сообщения, или попросите агента создать новый файл с отдельным именем. Одновременно запускается только один альтернативный вариант. Не перезаписывайте согласованный дизайн, если хотите сравнить решения рядом.

История опубликованного дизайна связана с публикациями:

• первая публикация создаёт доступную версию;
• Обновить сайт выпускает последние изменения по тому же адресу;
• в История версий · откат можно выбрать предыдущий опубликованный вариант.

Локальное сохранение в редакторе и публикация — разные действия. Правка файла не появится на публичном адресе, пока вы не обновите сайт.

Как опубликовать дизайн

Откройте дизайн и нажмите Опубликовать. Дальше есть два разных сценария.

Опубликовать сайт в один клик

Promto публикует текущий дизайн как самостоятельную страницу и создаёт HTTPS-ссылку. После этого можно:

• открыть и скопировать адрес;
• опубликовать обновлённую версию по тому же адресу;
• настроить собственный домен;
• посмотреть историю версий и выполнить откат.

Это хороший вариант для лендинга, презентации, визуальной демонстрации или статического сайта.

Сделать веб-приложение

Promto открывает чат разработки и передаёт агенту путь к дизайн-файлу. Агент сначала изучает макет и задаёт вопросы о сценариях, данных и интеграциях. После уточнений он создаёт отдельный проект приложения, например на React или Next.js.

Дизайн при этом остаётся визуальным источником и не превращается в кодовую базу простым переименованием файла.

Когда достаточно дизайн-HTML

Оставьте результат дизайн-файлом, если нужно:

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

Когда нужно полноценное приложение

Переходите к разработке, если нужны:

• регистрация, вход и личные данные пользователей;
• сохранение информации между посещениями;
• роли, права доступа и совместная работа;
• платежи и подписки;
• поиск по реальным данным;
• загрузка файлов в хранилище;
• интеграции с API и внешними сервисами;
• фоновые задачи, уведомления и очереди;
• надёжная обработка ошибок и эксплуатация сервиса.

Рекомендуемый рабочий процесс

1. Сформулируйте цель и основной пользовательский сценарий.
2. Создайте первый дизайн из шаблона, Figma или описания.
3. Добавьте реальные тексты и обязательные состояния.
4. Проверьте телефон, планшет и десктоп.
5. Исправьте детали вручную или через выбранный элемент в чате.
6. Сохраните отдельные варианты, если сравниваете направления.
7. Согласуйте дизайн до начала большой разработки.
8. Выберите: быстрая публикация страницы или создание полноценного приложения.
9. После разработки сравните готовый интерфейс с исходным дизайн-файлом и отдельно проверьте рабочие сценарии.

Инструкции и CLI для агента

Для чистой работы с дизайн-HTML агенту нужны две focused-инструкции:

• Promto Design Instructions — get_instruction({ topic: "design" });
• Promto UI Markers And User-Facing Paths — get_instruction({ topic: "ui_markers" }).

Для HTML-презентации агент дополнительно загружает Promto HTML Presentation Instructions — get_instruction({ topic: "html_presentations" }) — и в том же ходе обязательно сохраняет topic design. Перед публикацией готового дизайн-файла отдельно нужна Promto Publish Capability — get_instruction({ topic: "publish" }).

get_instruction — встроенный tool агента, а не команда shell. В этой задаче агент использует два доверенных инструмента:

• promto_design_validate — встроенный tool для проверки точного пути к *_design.html. Его нужно вызывать после каждого создания или изменения файла; перед открытием результат обязан содержать одновременно valid=true и grapesjs_round_trip: pass;
• promto_asset — встроенный tool для загрузки локального изображения, видео, аудио, PDF или шрифта и получения постоянного URL. В терминальном режиме та же операция доступна как promto-asset upload <file> [--content-type <type>] [--json].

Готовый промпт для агента

Сначала вызови get_instruction({ topic: "design" }) и get_instruction({ topic: "ui_markers" }). Создай или обнови самодостаточный файл /home/user/project/landing_design.html. Никогда не запускай дизайн-файл через Preview-сервер, Vite или отдельный порт и не возвращай Preview:. Все локальные медиа, которые должны отображаться в дизайне, загрузи через promto_asset и используй возвращённые постоянные URL. После каждого сохранения вызывай promto_design_validate с точным путём к файлу, исправляй все ошибки и повторяй проверку после последней правки. Верни OpenDesign: /home/user/project/landing_design.html только когда последняя проверка показывает valid=true и grapesjs_round_trip: pass.