---
title: "Интерактивные страницы, приложения и анимация"
description: Создавайте лендинги, дашборды, калькуляторы, анимированные баннеры, 3D-сцены и SVG-логотипы как живые артефакты Modelyx, а затем скачивайте их или публикуйте по ссылке.
---

# Интерактивные страницы, приложения и анимация

Артефакты — это живые результаты, которые Modelyx собирает в боковой панели рядом с чатом: веб-страницы, мини-приложения, дашборды, анимированные баннеры, 3D-сцены, диаграммы и векторная графика. Вы сразу видите рабочий **Preview**, дорабатываете результат запросами на изменения, а затем скачиваете исходник или публикуете публичную ссылку.

## Типы артефактов

| Тип | Для чего |
|---|---|
| HTML-страница | Лендинги, анимированные баннеры и первые экраны, вёрстка писем, страницы-слайды |
| React-компонент или мини-приложение | Калькуляторы, формы, дашборды, интерактивные инструменты |
| SVG | Логотипы, иконки, простые иллюстрации |
| Диаграмма Mermaid | Блок-схемы, оргструктуры, схемы процессов и структур |
| Markdown | Форматированный текст, например брифы и чек-листы |
| Код | Фрагменты кода и скрипты для копирования |

Скилл Artifacts включён по умолчанию, так что достаточно просто попросить нужный результат.

## Что можно создать

- **Лендинги и страницы товаров**, которые можно проверить до передачи разработчику.
- **Дашборды и графики** по вашим данным, интерактивные прямо в браузере.
- **Калькуляторы, квизы и формы**, которые работают в браузере.
- **Анимированные баннеры и первые экраны** с движением и переходами.
- **3D-сцены**, которые работают в браузере, например вращающийся товар или интерактивный фон.
- **Интерактивные презентации**: страницы-слайды, которые листаются по клику.
- **SVG-логотипы и иконки** в чистом векторе.
- **Диаграммы** процессов, воронок и структуры команды.

## Изображения из чата

Изображения, которые вы сгенерировали или загрузили в чат, можно разместить на странице — например, главную картинку на лендинге или фото товаров в разделе каталога. Сначала сгенерируйте визуал, затем попросите Modelyx собрать страницу вокруг него. См. [Генерация и редактирование изображений](../work/images.md).

## 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** отключает ссылку.

## Примеры запросов

```text
Сделай лендинг для студии йоги в Алматы: первый экран с картинкой, которую ты сгенерировал выше, таблица расписания, 3 карточки с ценами, форма обратной связи. С адаптацией под мобильные.
```

```text
Сделай анимированный первый экран для финтех-приложения: тёмный фон, парящие 3D-карты, заголовок «Плати в одно касание», кнопка с призывом к действию.
```

```text
Нарисуй SVG-логотип для «Northwind Coffee»: простая гора и кофейное зерно, два цвета, должен читаться в размере 32 px.
```

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

- Один артефакт на ответ.
- HTML- и React-артефакты экспортируются только как исходный код, не как изображения или видео.
- Опубликованная ссылка — это снимок; изменения появляются только после **Publish this version**.

## Связанные материалы
- [Результаты: артефакты, страницы и файлы](../work/outputs.md)
- [Генерация и редактирование изображений](../work/images.md)
- [3D-модели и видео по превизу](../work/3d-and-previs.md)
- [Дизайн лендинга с живым превью](../use-cases/landing-page.md)
- [Анимированный веб-баннер или hero-блок](../use-cases/animated-hero.md)
- [Логотип и набор иконок](../use-cases/logo-and-icons.md)
- [Интерактивный дашборд с доступом по ссылке](../use-cases/interactive-dashboard.md)