Интерактивные страницы, приложения и анимация
Артефакты — это живые результаты, которые Modelyx собирает в боковой панели рядом с чатом: веб-страницы, мини-приложения, дашборды, анимированные баннеры, 3D-сцены, диаграммы и векторная графика. Вы сразу видите рабочий Preview, дорабатываете результат запросами на изменения, а затем скачиваете исходник или публикуете публичную ссылку.
Типы артефактов
| Тип | Для чего |
|---|---|
| HTML-страница | Лендинги, анимированные баннеры и первые экраны, вёрстка писем, страницы-слайды |
| React-компонент или мини-приложение | Калькуляторы, формы, дашборды, интерактивные инструменты |
| SVG | Логотипы, иконки, простые иллюстрации |
| Диаграмма Mermaid | Блок-схемы, оргструктуры, схемы процессов и структур |
| Markdown | Форматированный текст, например брифы и чек-листы |
| Код | Фрагменты кода и скрипты для копирования |
Скилл Artifacts включён по умолчанию, так что достаточно просто попросить нужный результат.
Что можно создать
- Лендинги и страницы товаров, которые можно проверить до передачи разработчику.
- Дашборды и графики по вашим данным, интерактивные прямо в браузере.
- Калькуляторы, квизы и формы, которые работают в браузере.
- Анимированные баннеры и первые экраны с движением и переходами.
- 3D-сцены, которые работают в браузере, например вращающийся товар или интерактивный фон.
- Интерактивные презентации: страницы-слайды, которые листаются по клику.
- SVG-логотипы и иконки в чистом векторе.
- Диаграммы процессов, воронок и структуры команды.
Изображения из чата
Изображения, которые вы сгенерировали или загрузили в чат, можно разместить на странице — например, главную картинку на лендинге или фото товаров в разделе каталога. Сначала сгенерируйте визуал, затем попросите Modelyx собрать страницу вокруг него. См. Генерация и редактирование изображений.
Preview, Code и доработка
Переключайтесь между Preview, чтобы пользоваться результатом, и Code, чтобы посмотреть исходник. Чтобы что-то изменить, скажите, что именно: «сделай шапку закреплённой», «добавь тёмную тему», «замедли анимацию». Просите Modelyx обновить тот же артефакт — так у вас будет одна развивающаяся версия, а не несколько копий. В каждом ответе — один артефакт.
Экспорт
- Download сохраняет исходный файл для любого типа: HTML, TSX, SVG, Mermaid или Markdown.
- У SVG-артефактов также есть Download as PNG, Download as SVG и Copy as Image.
- HTML- и React-артефакты не экспортируются в PNG, GIF или видео. Для статичного баннера используйте генерацию изображений. Для векторного логотипа или иконки попросите SVG-артефакт.
Публикация по ссылке
Publish создаёт публичную ссылку на снимок артефакта: «Anyone with the link can open this artifact.» Нажмите Copy URL, чтобы поделиться ею с тем, у кого нет аккаунта Modelyx, — например, с клиентом, который проверяет лендинг, или с командой, которая открывает дашборд.
- По ссылке открывается та версия, которую вы опубликовали. После новых изменений нажмите Publish this version, чтобы обновить её.
- Счётчик просмотров показывает, сколько раз открывали ссылку.
- Unpublish отключает ссылку.
Примеры запросов
Сделай лендинг для студии йоги в Алматы: первый экран с картинкой, которую ты сгенерировал выше, таблица расписания, 3 карточки с ценами, форма обратной связи. С адаптацией под мобильные.
Сделай анимированный первый экран для финтех-приложения: тёмный фон, парящие 3D-карты, заголовок «Плати в одно касание», кнопка с призывом к действию.
Нарисуй SVG-логотип для «Northwind Coffee»: простая гора и кофейное зерно, два цвета, должен читаться в размере 32 px.
Ограничения
- Один артефакт на ответ.
- HTML- и React-артефакты экспортируются только как исходный код, не как изображения или видео.
- Опубликованная ссылка — это снимок; изменения появляются только после Publish this version.