Учим ИИ понимать вас
На прошлых уроках мы настроили рабочее место и разобрали инструменты. Теперь — самое важное: как правильно ставить задачи, чтобы ИИ делал именно то, что вы хотите. И как сделать так, чтобы он помнил ваш проект между чатами.
Результат этого урока: формула хорошего запроса, три файла для памяти проекта, паспорт вашего проекта и готовые шаблоны промптов на все случаи.
1. Три главные ошибки в запросах к ИИ
Вы пишете запрос, получаете результат — а он не совпадает с тем, что было в голове. Знакомо? Дело не в ИИ. Дело в том, как вы ставите задачу.
Ошибка 1. Слишком размыто.
«Сделай мне сайт» — это как сказать таксисту «отвези меня куда-нибудь». Он поедет. Но вряд ли туда, куда вам нужно. ИИ так же — что-то сделает, но результат будет случайным.
Ошибка 2. Слишком много сразу.
«Сделай сайт с регистрацией, каталогом, корзиной, оплатой и личным кабинетом» — это как попросить повара одновременно приготовить завтрак, обед и ужин. Результат будет хаотичным. ИИ теряет фокус, когда задач слишком много.
Ошибка 3. Нет контекста.
«Напиши текст для главной страницы» — какой страницы? Для кого? О чём? ИИ не умеет читать мысли. Он работает только с тем, что вы ему дали.
Запрос к ИИ — как заказ в ресторане. «Принесите что-нибудь вкусное» — несут стейк, а вы вегетарианец. «Салат Цезарь, без анчоусов, соус отдельно» — именно то, что хотели.
2. Формула хорошего запроса — 5 элементов
Не обязательно использовать все пять каждый раз. Но чем больше элементов — тем точнее результат.
| # | Элемент | Что это | Пример |
|---|---|---|---|
| 1 | Контекст | Что за проект, какая ситуация | «Я делаю сайт для кофейни» |
| 2 | Роль | Кем должен быть ИИ | «Ты опытный веб-дизайнер» |
| 3 | Задача | Что именно нужно сделать | «Создай главную страницу» |
| 4 | Формат | В каком виде получить результат | «Один HTML-файл, адаптивный» |
| 5 | Ограничения | Чего делать не нужно | «Без внешних библиотек» |
Плохой запрос vs хороший
Плохой:
Сделай трекер привычек
Результат: что-то непонятное, без дизайна, без логики.
Хороший:
Создай файл habits.html — трекер привычек на неделю.
5 привычек: вода, зарядка, чтение, сон до 23:00, без сахара.
Таблица 5×7 с чекбоксами. При клике — галочка с анимацией.
Прогресс-бар внизу: сколько процентов выполнено за день.
Тёмный фон, неоновые акценты, адаптивный дизайн.
Тот же Claude, но совсем другой результат. Потому что во втором запросе мы описали образ конечного результата — что именно хотим увидеть.
Опишите образ конечного результата. Что вы хотите увидеть, когда откроете файл? Если не знаете, как сформулировать — попросите Claude: «Подготовь подробный промпт для самого себя и выполни его».
3. Техника «Раскритикуй»
Вы получили результат. Выглядит красиво. Но вы ведь делаете это не для себя — а для пользователей. Давайте посмотрим на результат их глазами.
У Claude есть мощная способность — он может посмотреть на результат с разных сторон. Как пользователь, как дизайнер, как тестировщик. Это как иметь целую команду экспертов в одном окне.
Готовый промпт — просим Claude стать пользователем:
Представь, что ты обычный пользователь, который впервые открыл этот трекер привычек.
Что тебе непонятно? Что неудобно? Чего не хватает?
Дай 5 конкретных рекомендаций по улучшению.
Claude находит то, что мы не заметили: «Непонятно, как сбросить прогресс на новую неделю», «Нет подсказок — что значит каждая привычка?», «На телефоне чекбоксы слишком мелкие». Каждый пункт — реальная проблема, которую мы бы обнаружили только когда кто-то начал пользоваться. А Claude нашёл за 10 секунд.
Другие варианты для критики:
Посмотри глазами пользователя — что неудобно?
Посмотри как опытный UI/UX-дизайнер — что выглядит непрофессионально?
Какие минусы у этого решения? Что может пойти не так?
Посмотри как владелец конкурирующего бизнеса — что бы ты сделал лучше?
Не стесняйтесь спорить с ИИ. Он не обидится. Зато вы получите лучший результат.
4. Техника «Итерация»
Не нужно писать идеальный запрос с первого раза. Это миф. Работайте короткими уточнениями — шаг за шагом.
Раскритиковали — теперь исправляем. Берём каждое замечание и превращаем в короткую команду:
Добавь кнопку «Новая неделя» для сброса прогресса
Сделай чекбоксы крупнее для мобильных
Добавь подсказки при наведении на каждую привычку
Три коротких запроса. Каждый — по одному замечанию из критики. Результат стал в разы лучше первой версии.
Итерация — это как лепить из глины. Сначала форма, потом детали, потом полировка. Не пытайтесь вылепить шедевр одним движением.
5. Цикл вайбкодера
Вот ваш рабочий процесс на весь курс. Запомните его — будете использовать каждый день.
| Шаг | Что делаем | Пример |
|---|---|---|
| 1 | Представьте образ конечного результата | «Хочу трекер привычек с прогресс-баром» |
| 2 | Опишите его словами (или попросите Claude помочь) | Пишете подробный промпт |
| 3 | Посмотрите результат в браузере | Открыли файл — проверили |
| 4 | Раскритикуйте глазами пользователя | «Что неудобно? Чего не хватает?» |
| 5 | Улучшите итерациями | Короткие уточнения по одному |
| 6 | Повторяйте до идеала | Снова критика → снова улучшение |
Создал → Раскритиковал → Улучшил → Снова раскритиковал. И так до тех пор, пока результат вас не устроит.
Ваш главный инструмент проверки. Claude иногда уверенно говорит вещи, которые не совсем точны. Не надо проверять каждое слово. Но ключевые утверждения — спрашивайте: «Ты уверен?»
6. Документация — память вашего проекта
Вы закрыли чат — и Claude не помнит, над чем вы работали. Не знает, что за проект. Какие файлы. Какой дизайн вы выбрали. Каждый новый разговор — это как новый сотрудник на первый день. Талантливый, но ничего не знает о вашем проекте.
Представьте: каждое утро к вам приходит новый помощник. Вчерашний — исчез. Новый не знает ни ваших клиентов, ни задач, ни правил. Без записки — вы каждый раз объясняете всё с нуля. С запиской — он прочитал её в первую минуту и сразу в курсе дела.
Два типа документации:
Проектная документация — описание всего проекта целиком. Что за проект, какая идея, для кого, какую проблему решает, основные функции, конкуренты, технологии. Это ваша база знаний, к которой вы и Claude будете возвращаться.
Техническая документация — описание конкретной функции перед её реализацией. Что за штука, что она должна делать, как это работает у конкурентов, какие технологии использовать. Сначала описываете — потом разрабатываете.
Проектная — «что я хочу построить». Техническая — «как построить конкретную комнату».
80% работы вайбкодера — думать и описывать. 20% — просить ИИ сделать. Без документации каждый новый чат — объяснение с нуля. С ней — Claude сразу в курсе.
7. Три файла — решают проблему памяти
Вам нужно всего три файла, чтобы Claude всегда знал, что делать.
project.md — описание проекта
Это паспорт вашего проекта. Что это, для кого, какие функции, чего НЕ будет на старте.
Посмотри все файлы в проекте.
Создай файл project.md — описание этого проекта.
Включи:
- Что это за проект (в 2-3 предложениях)
- Для кого он
- Какие страницы уже есть
- Какие страницы планируются
- Какой стиль дизайна используется
Что должно быть в хорошем project.md:
| Раздел | Что писать |
|---|---|
| Что это | Краткое описание в 1-2 предложения |
| Для кого | Целевая аудитория |
| Проблема | Какую боль решает |
| Основные функции | Что проект умеет |
| Страницы / экраны | Что увидит пользователь |
| Чего НЕ будет (пока) | Что сознательно не делаем — важно для фокуса |
Раздел «Чего НЕ будет» — один из самых важных. Без него вы будете бесконечно добавлять «ещё одну фичу» и никогда не закончите.
CLAUDE.md — правила для ИИ
Это файл, который Claude читает автоматически при каждом запуске. Как памятка для нового сотрудника: «У нас принято так-то. Вот чего нельзя делать.»
Создай файл CLAUDE.md в корне проекта.
Опиши правила работы с этим проектом:
- Все страницы делаем в одном HTML-файле, без внешних библиотек
- Дизайн: тёмный фон, светлый текст, акцентный цвет — оранжевый
- Адаптивная вёрстка — всё должно хорошо выглядеть на мобильных
- Стиль текста: простой, дружеский, без канцелярита
- Перед созданием нового файла — сначала расскажи, что планируешь сделать
Теперь при каждом новом чате Claude прочитает CLAUDE.md — и сразу знает, как работать с вашим проектом. Не нужно повторять одно и то же каждый раз.
CLAUDE.md — это как правила дома, написанные на холодильнике. Любой, кто зайдёт на кухню, сразу знает: обувь снимать, посуду мыть, кота не кормить. Любой новый чат с Claude — сразу знает: тёмный фон, оранжевый акцент, адаптивный дизайн.
Как проверить, что CLAUDE.md работает: откройте новый чат с Claude и дайте короткий запрос, в котором специально НЕ упоминайте стиль:
Создай страницу pricing.html — страницу с тарифами для моего проекта. Три тарифа.
Если Claude сделал тёмный фон и оранжевый акцент без вашей подсказки — файл работает.
PLAN.md — план работ
Когда вы работаете над проектом, идеи приходят постоянно. Если не записать — забудете к завтрашнему дню.
Создай файл PLAN.md — план развития проекта.
Формат — чек-лист:
- [x] Визитка (готово)
- [x] Лендинг (готово)
- [ ] Страница тарифов
- [ ] Страница контактов
- [ ] Форма обратной связи
- [ ] Портфолио с примерами работ
Когда я буду отмечать задачи выполненными — помогай мне обновлять этот файл.
Каждый раз, когда приходит новая идея — говорите Claude: «Добавь в PLAN.md задачу — сделать страницу FAQ». А завтра откроете проект и скажете: «Посмотри PLAN.md. Что у нас следующее?» — и Claude сразу продолжит работу.
8. Цикл улучшения документации
Документация готова. Но она не идеальна — и это нормально. Прогоните её через цикл 2–3 раза.
Шаг 1. Перечитайте как будто видите впервые. Понятно ли человеку со стороны? Нет ли противоречий?
Шаг 2. «Ты уверен?» — проверяйте ключевые утверждения. Claude иногда уверенно говорит вещи, которые не совсем точны.
Шаг 3. Критический взгляд — попросите Claude найти слабые места:
Посмотри на эту документацию критически. Какие слабые места? Что может пойти не так?
Что я мог упустить? Какие функции обычно забывают?
Шаг 4. Пересмотрите — обновите документацию с учётом найденного.
Пример: было → стало
Было: «Основные функции: каталог товаров, корзина, оформление заказа»
Стало: «Каталог товаров (редактируется через админку). Корзина (сохраняется в браузере). Оформление заказа (уведомление клиенту и мне на email). Простая админка для управления товарами»
Видите разницу? Документация стала конкретнее.
Новые правки мелкие и косметические. Нет явных дыр в логике. По документации можно начать работу — и не переспрашивать каждые 5 минут «а что тут имелось в виду?»
9. Собираем паспорт проекта
Теперь применим всё к вашему реальному проекту — тому, который вы придумали на прошлых уроках. Три шага.
Шаг 1. Расскажите Claude свою идею
Откройте Claude Code и просто расскажите идею. Как другу. Без структуры, без шаблонов. Ваша задача — передать суть.
Я хочу сделать телеграм-бота для своей кофейни «Утренний кофе».
Идея такая: клиент открывает бота, смотрит меню с напитками и десертами,
выбирает что хочет, указывает время когда заберёт — и приходит к готовому заказу.
Не надо стоять в очереди.
Ещё хочу программу лояльности — каждый 5-й кофе бесплатно.
Аудитория — люди 20–40 лет, которые каждое утро заходят за кофе
по дороге на работу и не хотят ждать.
Бюджет небольшой, поэтому начну с минимума: меню + предзаказ.
Лояльность и акции — потом.
Помоги превратить это в документацию проекта.
Создай файл с описанием: что это, для кого, какую проблему решает,
основные функции, чего НЕ будет на старте.
Чем больше контекста вы дадите Claude на старте — тем точнее получится документация. Не стесняйтесь писать длинно.
Шаг 2. Исследование — пусть Claude изучит рынок
Прежде чем строить — нужно понять, как это делают другие. Не нужно гуглить самому. Claude может провести исследование по пяти направлениям сразу:
Проведи исследование для моего проекта.
Исследуй 5 направлений:
1. КОНКУРЕНТЫ — найди 5 примеров похожих продуктов.
Для каждого: название, что умеет, плюсы, минусы.
2. ФУНКЦИИ — какие функции обычно есть в подобных продуктах?
Список из 15–20. Отметь, какие для старта, какие потом.
3. UX И СЦЕНАРИИ — как пользователь обычно взаимодействует?
Опиши 3 типичных сценария. Что удобно, что бесит.
4. ТЕХНОЛОГИИ — какие технологии обычно используют?
Сравни 2-3 варианта: плюсы, минусы, цена.
5. МОНЕТИЗАЦИЯ — как подобные проекты зарабатывают?
Подписка, комиссия, реклама, партнёрства.
Создай файл с исследованием в проекте.
Шаг 3. Соберите всё в паспорт
На основе моей идеи и результатов исследования —
создай файл project.md, полный паспорт проекта.
Включи:
- Название проекта
- Что это (2-3 предложения)
- Для кого (целевая аудитория)
- Какую проблему решает
- Основные функции (MVP — что делаем первым)
- Функции на будущее (что добавим позже)
- Конкуренты (краткий обзор)
- Технологии (что будем использовать)
- Чего НЕ будет на старте
- Первые шаги (с чего начать)
Посмотри на этот документ критически — что я мог упустить?
Лайфхак: попросите Claude составить план реализации
У вас есть паспорт проекта. Claude его видит. Теперь можно попросить его поставить задачу самому себе:
Изучи паспорт проекта (project.md) и исследование.
На основе этого составь подробный промпт для самого себя —
пошаговый план реализации MVP этого проекта.
Учти:
- Код пишешь ты, не человек
- Начни с самого простого — чтобы через 10 минут уже был результат
- Каждый шаг должен давать видимый результат
- После каждого шага — проверка: работает ли то, что сделали
- Комментируй, что делаешь — я новичок и хочу учиться
Составь план и выполни первый шаг.
Вы не придумываете задачу для ИИ — вы просите ИИ самому себе поставить задачу, опираясь на готовый паспорт. Результат получается намного точнее.
10. Готовые шаблоны промптов
Каждый шаблон — готовая команда. Подставьте свои данные в фигурные скобки {...} и отправьте Claude.
Создание сайтов и страниц
Лендинг — одностраничный сайт, который продаёт продукт или услугу:
Создай лендинг для {продукт/услуга}.
Целевая аудитория: {кто}.
Структура:
- Первый экран: заголовок с УТП + кнопка
- Блок проблемы: {какую боль решаем}
- 3 преимущества с иконками
- Отзывы (3 штуки)
- Тарифы
- Финальный призыв + кнопка
Стиль: {тёмный/светлый, акцентный цвет, настроение}.
Адаптивная вёрстка.
Портфолио — сайт-визитка с проектами:
Создай сайт-портфолио.
Структура:
- Шапка с именем и специализацией
- Сетка проектов (карточки с превью, названием, описанием)
- При клике — окно с деталями проекта
- Фильтры по категориям
- Секция «Обо мне»
- Контакты и соцсети
Стиль: {описать}.
Многостраничный сайт:
Создай сайт для {бизнес/проект} из 4 страниц:
1. Главная — представление + УТП
2. Услуги — карточки с ценами
3. О нас — история, команда
4. Контакты — форма + карта
Общая навигация на всех страницах.
Единый стиль: {описать}.
Адаптивный дизайн.
Интернет-магазин (витрина):
Создай витрину интернет-магазина {тематика}.
- Сетка товаров (карточки: фото-заглушка, название, цена, кнопка)
- Фильтры: по категории, по цене
- Поиск по названию
- Корзина: добавление товаров, подсчёт суммы
- Адаптивный дизайн
Стиль: {описать}.
Приложения и инструменты
Трекер привычек:
Создай трекер привычек на неделю.
{N} привычек: {перечислите}.
Таблица с чекбоксами. При клике — галочка с анимацией.
Прогресс-бар: процент выполнения за день.
Кнопка «Новая неделя» для сброса.
Данные сохраняются в браузере.
{Стиль}.
Калькулятор стоимости:
Создай калькулятор стоимости {услуги}.
Параметры:
- {Параметр 1: ползунок / выпадающий список}
- {Параметр 2}
- {Параметр 3}
Итог считается мгновенно при изменении.
Кнопка «Оставить заявку» под результатом.
{Стиль}.
Квиз / тест:
Создай квиз из {N} вопросов на тему {тема}.
Один вопрос на экране, варианты ответа.
Прогресс-бар сверху. Кнопка «Далее» после выбора.
В конце — результат с рекомендацией и кнопкой {действие}.
{Стиль}.
Список задач (To-Do):
Создай приложение для списка задач.
- Поле ввода + кнопка добавления
- Задачи списком с чекбоксами и кнопкой удаления
- Фильтры: все / активные / выполненные
- Счётчик: выполнено / всего
- Данные сохраняются в браузере
{Стиль}.
Дашборд / панель управления:
Создай дашборд для {проект/бизнес}.
Блоки:
- 4 карточки с метриками (числа + тренд вверх/вниз)
- График (столбчатый или линейный)
- Таблица последних {событий/заказов/клиентов}
- Боковое меню навигации
{Стиль}.
Дизайн и интерфейс
Изменить цвета:
Измени цветовую схему:
- Фон: {цвет}
- Текст: {цвет}
- Акцент (кнопки, ссылки): {цвет}
Убедись, что контраст достаточный для чтения.
Добавить анимации:
Добавь анимации:
- Элементы появляются при прокрутке (плавно снизу)
- Кнопки увеличиваются при наведении
- Карточки приподнимаются при наведении
- Плавные переходы на всех элементах
Сделать навигацию:
Добавь навигацию:
- Логотип слева, пункты меню справа
- Пункты: {перечислить}
- На мобильном: меню-бургер, при клике — выезжает сбоку
- Фиксированная шапка (прилипает при прокрутке)
Добавить тёмную/светлую тему:
Добавь переключатель темы.
Кнопка (солнце/луна) в правом верхнем углу.
Тёмная тема: {цвета}.
Светлая тема: {цвета}.
Плавный переход. Запоминать выбор.
Критика и проверка
Глазами пользователя:
Представь, что ты обычный пользователь, который впервые открыл этот проект.
Что непонятно? Что неудобно? Чего не хватает? Где запутаешься?
Дай 5 конкретных рекомендаций по улучшению.
Глазами дизайнера:
Посмотри как опытный UI/UX-дизайнер.
Оцени: цвета, отступы, типографику, контраст, визуальную иерархию.
Для каждого пункта: что не так и как исправить.
Проверка на мобильных:
Проверь на разных экранах: 375px, 390px, 768px, 1440px.
Что ломается? Что обрезается? Что налезает друг на друга?
Исправь все проблемы.
Исправление ошибок
Ошибка в консоли:
Вот ошибка: {скопировать текст}.
Объясни простыми словами, что пошло не так.
Исправь. Покажи, что изменил и почему.
Выглядит не так:
{Что не так}. Ожидаю: {как должно быть}. Вижу: {что вижу сейчас}.
Исправь, чтобы выглядело как ожидаю.
Всё сломалось:
После последних изменений перестало работать {что именно}.
До изменений работало нормально.
Найди, что сломалось, и верни в рабочее состояние.
Исследование и планирование
Выбор подхода:
Мне нужно сделать {задача}.
Какие есть способы? Сравни 3 варианта.
Для каждого: плюсы, минусы, сложность.
Дай рекомендацию для новичка.
Разбивка проекта на шаги:
Мне нужно сделать {проект}.
Разбей на 5-7 простых шагов.
Для каждого: что делаем, какой файл создаём, какой результат увидим.
Claude пишет промпт для себя:
Я хочу сделать {описание идеи}.
Подготовь подробный промпт для самого себя — что создать,
какая структура, какой дизайн, какие элементы.
Потом выполни этот промпт.
Домашнее задание
- Создайте папку для своего проекта в Documents/Projects — латиницей, без пробелов (например: coffee-bot, habit-tracker)
- Расскажите идею Claude и создайте project.md — что это, для кого, функции, чего НЕ будет
- Проведите исследование по 5 направлениям (конкуренты, функции, UX, технологии, монетизация)
- Создайте CLAUDE.md — минимум 5 правил для ИИ. Проверьте: откройте новый чат, дайте короткий запрос — Claude следует правилам?
- Создайте PLAN.md — разбейте проект на 5–7 этапов с чекбоксами
- Прогоните документацию через цикл улучшения — хотя бы один проход
Образ идеального результата: у вас есть папка проекта с тремя файлами: project.md, CLAUDE.md, PLAN.md. Вы открываете новый чат с Claude — и ему не нужно ничего объяснять. Он уже знает что за проект, какие правила, и что делать дальше. Вы готовы начать разработку.
Чек-лист:
- Создана папка проекта (латиница, без пробелов)
- project.md заполнен — идея + исследование + функции + «чего НЕ будет»
- CLAUDE.md создан — минимум 5 правил для ИИ
- PLAN.md создан — проект разбит на 5–7 этапов с чекбоксами
- Документация прошла цикл улучшения
- CLAUDE.md проверен — в новом чате Claude следует правилам
После этого урока вы умеете правильно ставить задачи ИИ, знаете формулу из 5 элементов, владеете техниками критики и итерации, а главное — ваш проект теперь имеет паспорт. Claude помнит всё, что нужно. В следующем модуле вы начнёте создавать реальный веб-проект — и паспорт станет вашим фундаментом.