# Библиотека промтов

> Готовые промты для дизайна, страниц, форм, авторизации, магазина и исправления ошибок в Velvio.

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

Отправляйте по одной заметной задаче за раз и смотрите результат перед следующим сообщением. Если правило должно действовать и в будущих версиях — например, тон текста, палитра или запрет менять навигацию, — добавьте его в **«Правила для ИИ»** проекта.

Хороший промт отвечает хотя бы на четыре вопроса:

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

## Дизайн и визуальный характер

<details class="guide" open>
<summary>Минималистичный сайт</summary>

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

</details>
<details class="guide">
<summary>Премиальный интерфейс со стеклом</summary>

```prompt
Оформи панель в премиальном технологичном стиле: полупрозрачные карточки поверх мягкого градиента, лёгкое размытие, несколько уровней глубины и сдержанные тени. Навигация тоже полупрозрачная. При наведении карточки чуть светлеют. На телефоне уменьши количество стеклянных слоёв, чтобы интерфейс оставался чистым и быстрым.
```

</details>

<details class="guide">
<summary>Смелый плакатный стиль</summary>

```prompt
Сделай сайт смелым и плакатным: очень крупные заголовки, строгая модульная сетка, высокий контраст, чёрно-белая основа и один яркий акцент. Кнопки большие и прямые, без декоративных теней. Анимация короткая и подчёркивает смену секций.
```

</details>

<details class="guide">
<summary>Спокойный сервис</summary>

```prompt
Сделай спокойный и дружелюбный интерфейс: приглушённая природная палитра, мягкие градиенты, просторные отступы, плавные появления и чистая центрированная композиция. Формы должны выглядеть надёжно, сообщения об ошибке — понятно и без тревожного тона.
```

</details>

<details class="guide">
<summary>Редакционный сайт</summary>

```prompt
Сделай редакционный дизайн как у современного журнала: выразительная сетка, крупные фотографии, заметные цитаты, контраст заголовочного и текстового шрифтов, комфортная длина строки и много воздуха. На телефоне перестрой всё в одну колонку и сохрани удобный ритм чтения.
```

</details>

## Страницы и компоненты

<details class="guide" open>
<summary>Первый экран</summary>

```prompt
Сделай первый экран с коротким выразительным заголовком, пояснением в две строки и одной основной кнопкой. Справа поставь крупное изображение без лишнего фона. Под кнопкой добавь короткое подтверждение доверия. На телефоне сначала показывай текст и кнопку, затем изображение. Добавь спокойное появление элементов без резких эффектов.
```

</details>

<details class="guide">
<summary>Карточки преимуществ</summary>

```prompt
Добавь раздел из трёх карточек. В каждой — иконка, короткий заголовок и одно предложение. На компьютере карточки стоят в ряд, на телефоне — друг под другом. При наведении карточка слегка поднимается, тень становится заметнее, но раскладка не прыгает.
```

</details>

<details class="guide">
<summary>Форма с состояниями</summary>

```prompt
Добавь форму записи с полями «Имя», «Телефон», «Услуга» и «Удобное время». Обязательные поля проверяй рядом с вводом. Во время отправки покажи состояние загрузки и заблокируй повторное нажатие. После успеха покажи понятное подтверждение, после ошибки сохрани введённые данные и предложи повторить.
```

</details>

<details class="guide">
<summary>Панель с таблицей</summary>

```prompt
Добавь страницу со сводными показателями и таблицей последних записей. Над таблицей — поиск, фильтр по статусу и периоду. Предусмотри загрузку, пустой результат и ошибку. На телефоне ключевые поля карточки остаются видны, второстепенные открываются по нажатию.
```

</details>

## Пользователи и функции

<details class="guide" open>
<summary>Регистрация и закрытый раздел</summary>

```prompt
Добавь регистрацию по email и паролю, вход, выход и восстановление пароля. Раздел «Мои материалы» доступен только после входа. Если гость открыл закрытую страницу, отправь его на вход, а после успешного входа верни именно на исходную страницу. Уже вошедшего пользователя не отправляй повторно на вход или регистрацию. Покажи понятные ошибки и подтверждения во всех формах.
```

</details>

<details class="guide">
<summary>Магазин: вход перед оформлением</summary>

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

</details>

<details class="guide">
<summary>Каталог и корзина</summary>

```prompt
Добавь каталог с категориями, поиском и карточками товаров. В карточке покажи изображение, название, цену, наличие и кнопку «В корзину». Корзина сохраняет выбранные товары, позволяет менять количество и показывает товары, доставку и итог отдельно. Перед оплатой покупатель выбирает доставку или самовывоз и подтверждает контакты.
```

</details>

<details class="guide">
<summary>Загрузка файлов посетителем</summary>

```prompt
Добавь загрузку изображений и PDF до 10 МБ. Перед отправкой покажи имя и размер файла, для изображения — миниатюру. Разреши убрать выбранный файл. Во время загрузки покажи прогресс, после успеха — подтверждение, после ошибки — понятную причину без потери остальных полей формы.
```

</details>

## Проверка и исправление

<details class="guide" open>
<summary>Исправить наблюдаемую ошибку</summary>

```prompt
На телефоне после нажатия кнопки меню не видно пункта «Билеты». Воспроизведи проблему, исправь её и ещё раз проверь тот же сценарий. Остальные разделы и визуальный стиль не меняй.
```

</details>

<details class="guide">
<summary>Проверить пользовательский путь</summary>

```prompt
Проверь путь посетителя: открыть каталог, выбрать товар, добавить его в корзину, перейти к оформлению и увидеть итоговую сумму. Если какой-то шаг не работает, исправь причину и повтори проверку. Не меняй дизайн, если это не требуется для исправления.
```

</details>

<details class="guide">
<summary>Шаблон собственного запроса</summary>

```prompt
Сделай [страницу или функцию] в стиле [визуальное направление].

Цель и пользователи:
- [для кого]
- [главное действие]

Структура:
- [секции по порядку]
- [навигация и переходы]

Визуальный стиль:
- [цвета]
- [типографика]
- [форма, отступы, тени]

Поведение:
- [наведение, нажатие и анимация]
- [загрузка, пустой результат и ошибка]

Адаптация:
- компьютер: [раскладка]
- телефон: [что меняется]

Меняй только [граница правки]. Сохрани [что нельзя менять].
```

</details>