Вайб-кодинг начинается с текста. Вы пишете слова, AI превращает их в код. Звучит магически. Но есть нюанс.
Помните старую сказку про золотую рыбку? Старуха просила корыто - получила. Просила избу - получила. Просила стать царицей - стала. Но когда попросила «быть владычицей морскою», всё рухнуло обратно к разбитому корыту.
Почему? Потому что запрос был неконкретным и несоразмерным.
С AI та же история. Если вы пишете: «Сделай мне сайт для бизнеса», он сделает. Какой-то. Возможно, даже красивый. Но почти наверняка не тот, который вы представляли.
И вот вы сидите, смотрите на результат и думаете: «Ну нет, вайб-кодинг - это ерунда, AI ничего не умеет».
AI умеет. Просто вы говорите с ним на разных языках. Вы на языке образов и желаний. Он на языке инструкций.
Промпт-инжиниринг - это искусство перевода с человеческого на «понятный AI».
И нет, это не rocket science. Сейчас разложим.
Представьте, что вы нанимаете фрилансера. Допустим, веб-дизайнера. Вы говорите: «Сделай сайт». Он спрашивает: «Какой?» Вы: «Ну, красивый». Он: «О чём сайт? Какие страницы? Какая целевая аудитория? Какой стиль?»
Вы не сможете ответить и получите либо отказ, либо сайт-заглушку с Lorem Ipsum и стандартным шрифтом.
С AI то же самое. Но есть разница: AI не переспрашивает. Он заполняет пробелы сам. И часто заполняет их ерундой.
Формула хорошего промпта:
Контекст + Роль + Задача + Формат + Ограничения
Разберём по косточкам.
1. Контекст: «Кто я и что происходит»
AI не знает ничего о вас и вашем проекте. Если вы не скажете ему — он додумает. А додумывает он из среднестатистических данных интернета, что часто мимо.
Сравните:
«Сделай калькулятор»
и
«Я владелец пекарни, мне нужен калькулятор для расчёта стоимости тортов. Клиент выбирает размер, начинку и оформление, калькулятор показывает итоговую цену»
Почувствовали разницу? Во втором случае AI понимает не просто «что делать», а «зачем и для кого». Это критически меняет результат.
Что сообщить в контексте:
- Кто вы (новичок, владелец бизнеса, дизайнер).
- Что за проект (сайт-портфолио, бот для сотрудников, игра для ребёнка).
- Кто конечный пользователь.
2. Роль: «Кем ты должен быть»
Это опциональный, но мощный приём. Вы можете сказать AI: «Ты - опытный Python-разработчик» или «Ты - дизайнер интерфейсов». AI подстроит стиль ответа и уровень сложности.
Для вайб-кодинга особенно хорошо работает: «Ты - терпеливый преподаватель, который объясняет код новичкам».
Это снижает шанс, что AI выдаст простыню сложного кода без комментариев.
3. Задача: «Что конкретно сделать»
Главное правило: одна задача - один промпт.
Не «Сделай сайт с каталогом, корзиной и чатом». Разбейте:
Сначала: «Создай главную страницу с шапкой и пятью разделами».
Потом: «Добавь в шапку логотип и меню из трёх пунктов».
Потом: «Сделай раздел "О компании" с текстом и фотографией».
AI, как и человек, лучше справляется с маленькими чёткими задачами, чем с гигантским расплывчатым заданием.
4. Формат: «В каком виде выдать ответ»
Не стесняйтесь указывать формат. AI может выдать просто код, может код с пояснениями, может пошаговую инструкцию.
Примеры:
«Выдай HTML-код целиком, без пояснений»
«Объясни каждую строчку кода комментарием»
«Разбей ответ на шаги: сначала создай структуру, потом стили, потом логику»
Без указания формата AI выберет сам. Иногда угадает, иногда нет.
5. Ограничения: «Что важно и чего нельзя»
Это простая, но часто забываемая часть. AI нужно сказать, что для вас приоритетно, а чего вы точно не хотите.
Примеры ограничений:
«Используй только чистый HTML и CSS, без фреймворков»
«Кнопка должна быть зелёной»
«Сайт должен открываться на мобильных устройствах»
«Не используй внешние библиотеки»
«Код должен работать в браузере без сервера»
Ограничения сужают поле фантазии AI и приближают результат к вашей картинке в голове.
Давайте посмотрим, как формула работает на практике. Возьмём одну и ту же задачу и прокачаем её от «новичкового» промпта до «профессионального».
Уровень «Новичок» (плохо):
«Сделай таймер»
Результат: AI сделает какой-то таймер. Возможно, консольный. Возможно, на Python. Возможно, без кнопок. Что вы хотели - неизвестно.
Уровень «Средний» (уже неплохо):
«Сделай таймер обратного отсчёта на веб-странице. Чтобы были кнопки Старт, Пауза и Сброс. Таймер показывает минуты и секунды»
Результат: рабочий таймер в браузере. Но дизайн стандартный, цвет серый, шрифт системный. Работает, но скучно.
Уровень «Профи» (отлично):
«Я ведущий онлайн-тренировок. Мне нужен таймер обратного отсчёта для сайта — буду проецировать на экран во время занятий.
Контекст: тренировки групповые, люди смотрят на экран с расстояния 3-5 метров.
Задача: Создай веб-страницу с таймером обратного отсчёта. Таймер показывает минуты и секунды крупными цифрами. Кнопки: Старт, Пауза, Сброс. При достижении нуля таймер меняет цвет фона на красный и издаёт звуковой сигнал (без внешних файлов, через Web Audio API).
Формат: Один HTML-файл, всё в одном и разметка, и стили, и скрипт.
Ограничения: Цифры должны быть видны с пяти метров (крупный шрифт, контрастные цвета). Кнопки крупные, чтобы нажимать на бегу. По умолчанию 60 секунд отсчёта. Не используй библиотеки, только нативные технологии.»
О проекте
О подписке
Другие проекты