Как написать промпт для Claude Code: шаблоны и примеры
Ты открыл Claude Code, написал «сделай мне сайт» — и получил что-то непонятное. Знакомо? Проблема почти всегда не в модели, а в промпте. Claude Code — мощный инструмент, но он читает ровно то, что ты написал. Чем точнее твой запрос, тем точнее результат. В этой статье разберём, как писать промпты для Claude, которые работают с первого раза.
Почему большинство промптов не работают
Новички делают одну и ту же ошибку: пишут запрос так, будто разговаривают с волшебником. «Сделай красиво», «добавь анимацию», «сделай как у Apple» — это не промпты, это пожелания. Claude Code не угадывает намерения. Он работает с контекстом, который ты ему даёшь.
Хороший промпт отвечает на три вопроса:
- Что нужно сделать — конкретная задача
- Как это должно выглядеть — технические детали
- Зачем — контекст, который помогает выбрать правильное решение
Если хотя бы один пункт отсутствует, результат будет случайным.
Плохой промпт vs хороший: наглядно
Посмотри на два запроса для одной и той же задачи.
Плохой промпт:
сделай форму регистрации
Хороший промпт:
Создай HTML-форму регистрации на чистом HTML/CSS без фреймворков.
Поля: имя (text), email (email), пароль (password) с подтверждением.
Кнопка «Зарегистрироваться» — тёмная, на всю ширину.
Стиль: минималистичный, фон #F5F0E8, шрифт IBM Plex Sans.
Валидацию делай через HTML5 атрибуты (required, minlength, type).
Никакого JavaScript пока не нужно.
Разница очевидна. Во втором случае Claude Code знает стек, знает стиль, знает ограничения. Он не будет угадывать и не добавит лишнего Bootstrap или jQuery, которые тебе не нужны.
Шаблон промпта для Claude Code
Используй эту структуру как отправную точку для любой задачи:
[Задача одним предложением]
Контекст:
— [Технологический стек или ограничения]
— [Где этот код будет использоваться]
— [Что уже есть / что нельзя трогать]
Детали реализации:
— [Конкретные требования к внешнему виду или поведению]
— [Что должно произойти при взаимодействии пользователя]
Что не нужно делать:
— [Исключения, чтобы избежать лишнего кода]
Этот шаблон работает для верстки, скриптов, API-запросов и даже для рефакторинга существующего кода.
Примеры промптов по задачам
Верстка компонента
Сверстай карточку товара для интернет-магазина.
Стек: HTML + CSS, никаких фреймворков.
Карточка содержит: фото (aspect-ratio 4/3), название, цену, кнопку «Купить».
Ширина карточки — 280px, скругление углов — 12px, тень — мягкая.
Hover на кнопке — потемнение на 10%, без анимаций.
CSS пиши в отдельном блоке <style>, не инлайн.
Работа с данными в JavaScript
Напиши функцию на чистом JavaScript, которая:
— принимает массив объектов [{name, price, category}]
— фильтрует только объекты с category === "electronics"
— сортирует по цене от меньшего к большему
— возвращает массив только с полями name и price
Никаких внешних библиотек. Добавь JSDoc-комментарий к функции.
Исправление бага
В этом коде есть баг: при клике на кнопку форма отправляется дважды.
[вставь код]
Найди причину и исправь только эту проблему.
Ничего больше не меняй.
Таблица: какие детали добавлять в промпт
| Тип задачи | Что указать обязательно | Что указать по желанию |
|---|---|---|
| Верстка | Стек, размеры, цвета | Шрифты, анимации, брейкпоинты |
| JavaScript | Входные данные, ожидаемый результат | Обработка ошибок, браузерная поддержка |
| Рефакторинг | Что нельзя трогать, почему рефакторим | Целевой стиль кода |
| Баг-фикс | Код с багом, описание поведения | Шаги для воспроизведения |
| API / fetch | URL, метод, формат данных | Авторизация, обработка ошибок |
Итеративный подход: не пиши всё сразу
Один из частых мифов о вайбкодинге: хороший промпт должен описывать всё с нуля в деталях. На практике работает иначе.
Начни с малого:
Создай пустую HTML-страницу с подключённым CSS-файлом styles.css.
Заголовок страницы — «Мой проект». Больше ничего.
Получил результат — продолжай:
Добавь в body навигационную панель с тремя ссылками: Главная, Блог, Контакты.
Используй тег <nav> и список <ul>. Стили добавь в уже существующий styles.css.
Такой подход даёт тебе контроль на каждом шаге и снижает вероятность, что Claude Code уйдёт в сторону.
💡 Совет: Если Claude Code сделал что-то не так, не переписывай весь промпт. Просто уточни: «Всё правильно, но убери внешние отступы у кнопки и сделай текст на 2px крупнее». Точечные правки работают лучше, чем запрос с нуля.
Частые ошибки при написании промптов
Слишком размыто. «Сделай покрасивее» — не даёт Claude Code никакой точки опоры. Всегда описывай конкретный визуальный или функциональный результат.
Слишком много за раз. Запрос на 10 задач одновременно почти всегда даёт смешанный результат. Разбивай на шаги.
Нет контекста стека. Claude Code не знает, используешь ты React или чистый HTML. Если не сказать — он выберет сам, и не всегда угадает.
Нет примера нежелательного поведения. Если у тебя уже есть код, который делает что-то не так, покажи его. Это экономит несколько итераций.
Итог
Промпты для Claude Code — это не магия и не программирование. Это просто чёткое техническое задание, которое ты формулируешь для очень быстрого исполнителя. Чем конкретнее задача, стек и ожидаемый результат — тем меньше итераций понадобится.
Начни с шаблона из этой статьи, добавляй детали по мере необходимости, работай итеративно — и Claude Code станет твоим надёжным инструментом, а не источником случайного кода.
Хочешь разбирать промпты и вайбкодинг вместе с сообществом? Заходи в Telegram-канал @fizrukvibecode — там примеры, шаблоны и живые разборы каждую неделю.