Советы по промптам для создания приложений с ИИ -- что писать для лучших результатов

Вы когда-нибудь просили Claude Code или ChatGPT «сделать TODO-приложение» и получали нечто совершенно непохожее на то, что представляли? Генеративный ИИ -- мощный инструмент, но если инструкции расплывчаты, ИИ заполняет пробелы собственными предположениями.

В этой статье -- 5 практических советов по составлению промптов с наглядными примерами «до и после», понятными даже абсолютным новичкам.

1. Почему промпт определяет результат

Генеративный ИИ пишет код исключительно на основе ваших инструкций (промпта). Живой коллега переспросит «вы имели в виду вот это?», но ИИ генерирует наиболее правдоподобный ответ, опираясь только на предоставленную информацию -- поэтому недостаток контекста приводит к промахам.

Проблемы из-за расплывчатых инструкций

• ИИ выбирает не тот фреймворк, который вы хотели
• Интерфейс (дизайн экрана) не соответствует ожиданиям
• Важные функции отсутствуют или добавлены ненужные
• Обработка ошибок и валидация недостаточны

Обратная сторона: достаточно быть конкретным в промпте, чтобы качество ответа ИИ резко возросло. Подробнее о принципах работы генеративного ИИ читайте в статье Что такое генеративный ИИ?.

2. 5 советов по написанию эффективных промптов

Освойте эти пять ключевых принципов, и качество кода, сгенерированного ИИ, заметно повысится.

Совет 1: Укажите стек технологий

Вместо «сделай веб-приложение» укажите конкретный язык, фреймворк и базу данных.

❌ Плохо:
"Сделай TODO-приложение"

✅ Хорошо (для инженеров):
"Сделай TODO-приложение на React + TypeScript.
Используй useState для управления состоянием
и localStorage для хранения данных."

✅ Хорошо (для не-программистов):
"Сделай TODO-приложение, которое работает
в браузере. Данные не должны теряться
при закрытии страницы. Технологии выбери сам,
но чтобы было понятно новичку."

Совет 2: Перечислите функции списком

Оформите нужные функции маркированным списком, отметив обязательные и опциональные. ИИ точнее интерпретирует списки, чем длинные абзацы.

✅ Хорошо:
"Реализуй следующие функции:
[Обязательно]
- Добавление задач (текстовое поле + кнопка)
- Переключение статуса выполнения
- Удаление задач
[Опционально]
- Установка срока выполнения
- Фильтрация завершённых задач"

Совет 3: Опишите интерфейс конкретно

Фраза «сделай красиво» почти ничего не говорит ИИ. Укажите цвета, расположение элементов и поведение.

✅ Хорошо (для инженеров):
"Требования к UI:
- Используй Tailwind CSS
- Тёмная тема (фон: slate-900)
- Карточный макет с border-radius 8px
- Mobile-first адаптивный дизайн
- Плавающая кнопка внизу справа"

✅ Хорошо (для не-программистов):
"Как должно выглядеть:
- Тёмный фон
- Каждая задача -- в виде карточки
- Удобно пользоваться на телефоне
- Кнопка добавления всегда видна внизу справа
- Простой и лаконичный стиль, как Apple Notes"

Совет 4: Укажите ограничения и чего НЕ нужно

Помимо того, что вы хотите, указание того, чего вам не нужно, значительно повышает точность.

✅ Хорошо (для инженеров):
"Ограничения:
- Единственная внешняя библиотека -- Tailwind CSS
- Не использовать Redux, Zustand и т.п.
- Бэкенд не нужен (только фронтенд)
- Комментарии в коде на английском"

✅ Хорошо (для не-программистов):
"Ограничения:
- Без настройки сервера и базы данных
- Без функции входа в аккаунт
- Как можно проще
- Добавить пояснительные комментарии в код"

Совет 5: Задайте формат вывода

Если указать ИИ, как структурировать результат, код можно сразу использовать в реальном проекте.

✅ Хорошо (для инженеров):
"Формат вывода:
- Разделить на файлы по компонентам
  (App.tsx, TodoList.tsx, TodoItem.tsx, AddTodo.tsx)
- Определения типов -- в types.ts
- В начале каждого файла -- комментарий с путём"

✅ Хорошо (для не-программистов):
"Формат вывода:
- Не складывать всё в один огромный файл --
  разделить по функциям
- В начале каждого файла простым языком описать,
  что он делает
- Приложить пошаговую инструкцию по запуску,
  чтобы можно было скопировать и запустить"

3. Плохой промпт vs хороший промпт (реальные примеры)

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

Плохой промпт

Сделай приложение для учёта бюджета.
Оно должно отслеживать доходы и расходы
и показывать графики.

С такой инструкцией ИИ вынужден гадать:

• Язык (Python? JavaScript? Swift?)
• Веб или мобильное?
• Тип графиков (столбчатый? круговой? линейный?)
• Хранение данных (база данных? локальный файл?)

Хороший промпт (для инженеров)

Создай веб-приложение для учёта бюджета
на Next.js (App Router) + TypeScript.

[Стек технологий]
- Фронтенд: Next.js 14, TypeScript, Tailwind CSS
- Графики: библиотека recharts
- Хранение данных: localStorage (без базы данных)

[Функции]
1. Запись транзакций (дата, категория, сумма, заметка)
2. Круговая диаграмма по категориям (помесячно)
3. Линейный график динамики доходов/расходов
4. Список записей с возможностью удаления

[Требования к UI]
- Mobile-first
- Нижняя навигация вкладками (Ввод / Список / Графики)
- Стандартные цвета Tailwind CSS

[Ограничения]
- Без внешних API
- Без авторизации
- Разделить на отдельные файлы-компоненты

[Формат вывода]
- Комментарий с путём к файлу в начале каждого файла
- Комментарии в коде на английском

Хороший промпт (для не-программистов)

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

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

[Что я хочу]
1. Записывать траты: дата, категория (еда, транспорт
   и т.д.), сумма и заметка
2. Видеть круговую диаграмму расходов по категориям
3. Видеть линейный график -- трачу ли я больше,
   чем в прошлом месяце
4. Смотреть все записи списком и удалять ошибочные

[Как должно выглядеть]
- Удобно пользоваться на телефоне
- Переключение вкладок внизу (Ввод / Список / Графики)
- Простые, аккуратные цвета

[Что мне не нужно]
- Функция входа в аккаунт
- Всё, что требует настройки сервера
  (должно работать целиком в браузере)

[Ещё, пожалуйста]
- Приложи инструкцию по запуску для новичков
- Добавь пояснительные комментарии в код

4. Готовые шаблоны промптов

Заполните эти шаблоны, и у вас получится качественный промпт. Копируйте и используйте.

Создай [тип приложения].

[Стек технологий]
- Язык: [напр., TypeScript]
- Фреймворк: [напр., React / Next.js / Laravel]
- CSS: [напр., Tailwind CSS]
- Хранение данных: [напр., localStorage / SQLite / MySQL]

[Функции] (отметить: Обязательно / Опционально)
1. [Функция A] (Обязательно)
2. [Функция B] (Обязательно)
3. [Функция C] (Опционально)

[Требования к UI]
- [Подход к вёрстке]
- [Цветовая схема / тема]
- [Адаптивный дизайн: да/нет]

[Ограничения]
- [Какие библиотеки не использовать / что не нужно]

[Формат вывода]
- [Как разделить файлы]
- [Язык комментариев]

Шаблон для не-программистов

Даже без технических знаний, заполнив этот шаблон, вы дадите ИИ всё необходимое.

Создай [тип приложения].
Я новичок в программировании, поэтому
выбери лучшие технологии за меня.

[Что я хочу] (отметить: «Обязательно» / «Было бы неплохо»)
1. [Что хочу №1] (Обязательно)
2. [Что хочу №2] (Обязательно)
3. [Что хочу №3] (Было бы неплохо)

[Как должно выглядеть]
- [Для телефона? Для компьютера?]
- [Ориентир: «как Notion», «как Trello»]
- [Светлая тема? Тёмный режим?]

[Что мне не нужно]
- [Вход в аккаунт, оплата и т.д.]

[Ещё, пожалуйста]
- Приложи инструкцию по запуску для новичков
- Добавь пояснительные комментарии в код
- Сделай структуру максимально простой

5. Как улучшать результат итерациями

Получить идеальный код с первого промпта -- редкость. Наращивание качества через диалог с ИИ -- самый эффективный подход.

Шаг 1: Начните со скелета

Сначала попросите только базовую структуру.

"Сначала создай базовую структуру проекта
и реализуй только функцию добавления задач."

Шаг 2: Протестируйте и дайте конкретную обратную связь

Запустите сгенерированный код и сообщите о конкретных проблемах.

"После нажатия кнопки добавления текстовое поле
не очищается. Пожалуйста, очищай поле ввода
после добавления. А ещё можно добавить пустую
строку -- добавь валидацию."

Шаг 3: Добавляйте функции постепенно

Когда базовые функции заработают, наращивайте возможности шаг за шагом.

"Добавление и удаление задач теперь работает.
Далее, пожалуйста, добавь:
1. Переключение статуса выполнения (чекбокс)
2. Фильтр для скрытия/показа завершённых задач
Добавляй к существующему коду, не ломая
то, что уже работает."

Более подробно о создании приложений с помощью ИИ -- в нашей статье Могут ли новички создавать приложения с помощью ИИ.

6. Типичные ошибки новичков

Ошибка 1: Просить всё сразу

Если запросить 10+ функций в одном промпте, ИИ перегрузится, и реализация будет недоработанной. Запрашивайте 3-5 функций за раз -- так результат будет лучше.

Ошибка 2: Расплывчатые формулировки

«Сделай красиво» или «добавь тестовые данные» -- именно такие нечёткие инструкции ИИ понимает хуже всего. Используйте конкретные цифры и примеры.

❌ Плохо: "Добавь тестовые данные"
✅ Хорошо: "Добавь эти 5 записей как начальные данные:
   - Продукты 1200₽ (Еда)
   - Метро 60₽ (Транспорт)
   - Обед 850₽ (Еда)
   - Книга 1500₽ (Образование)
   - Счёт за электричество 4500₽ (ЖКХ)"

Ошибка 3: Просто вставить текст ошибки

Если вставить только сообщение об ошибке без контекста, ИИ может предложить неверное исправление. Опишите, что вы делали и что произошло.

❌ Плохо: "TypeError: Cannot read properties of null"

✅ Хорошо: "При нажатии кнопки удаления задачи
возникает ошибка:
TypeError: Cannot read properties of null
Ошибка на строке 42 в TodoList.tsx.
Добавление и отображение задач работают нормально."

Ошибка 4: Начинать новый чат вместо продолжения

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

7. Итоги

FAQ