Быстрый recap

Лучший инструмент в мире даёт мусор на расплывчатую задачу. Если вы скажете строителю «сделай красиво» — он сделает красиво по-своему. Возможно, это будет совсем не то красиво, которое вы имели в виду. Строитель не виноват: он угадывал по словам, а слов было мало.

Claude Code устроен точно так же. Чем расплывчатее задача, тем больше он вынужден угадывать. Иногда угадывает хорошо. Чаще — не совсем то. И это не баг Claude Code. Это естественное следствие того, что ИИ работает с вашими словами, а не с картинкой у вас в голове [1].

Хорошая новость: у хорошей задачи есть структура. Не магия, не опыт программиста — просто четыре элемента, которые вы будете применять каждый раз. К концу этого урока ваши слова превратятся в первый каркас страницы — с вашим именем, живой в браузере.

Часть 1. Почему «сделай красиво» не работает

Когда вы пишете Claude Code «сделай красивую страницу», что происходит у него «внутри»? Он не видит вашу комнату, не знает ваш вкус, не видел другие страницы, которые вам нравятся. Он берёт слово «красивый» и выбирает из сотен возможных интерпретаций — ту, которую видел чаще всего в обучающих данных [1]. Это может быть минималистичный белый фон. Или яркие градиенты в духе 2019 года. Или строгая тёмная тема.

Расплывчатость — не ваша вина и не вина ИИ. Это разрыв между картинкой в голове и словами, которые её описывают. У архитектора этот разрыв закрывает многолетняя совместная практика с заказчиком. У вас с Claude Code такой практики нет — каждая задача начинается с чистого листа. Поэтому надо говорить точно.

Разрыв между «красиво в голове» и «красиво в словах» — это не языковая проблема. Это проблема структуры задачи. И у неё есть решение: четыре элемента, которые закрывают большинство «угадываний».

Часть 2. Четыре элемента хорошей задачи

Хорошая инструкция для Claude Code — это не ракетостроение. Она отвечает на четыре вопроса. Запомните их: вы будете применять их каждый раз, пока не войдёт в привычку.

Посмотрите на разницу в действии. Вот одна и та же задача — расплывчато и с четырьмя элементами:

Часть 3. Тренажёр: собираем задачу из кусочков

Теория — это хорошо, но навык складывается руками. Виджет ниже даёт вам набор готовых фрагментов — соберите из них полную инструкцию для Claude Code. Это то же самое, что вы будете делать в реальном проекте, только с подсказками.

Если после виджета остались вопросы о каком-то элементе — это нормальная реакция. Формула хорошей задачи не запоминается с одного раза, она формируется через использование. Вы будете применять её в каждом уроке — к Уроку 5 она войдёт в привычку автоматически.

Часть 4. Проект — папка с файлами

Прежде чем попросить Claude Code сделать первый каркас страницы, нужно организовать пространство. Вспомните Урок 1: участок — это папка проекта [L1]. Всё, что вы будете строить, будет жить в этой папке. Сейчас создадим её.

Откройте терминал (на Mac — «Терминал», на Windows — «PowerShell») и создайте папку в удобном месте. Например, на рабочем столе:

# Mac / Linux — создать папку на рабочем столе
mkdir ~/Desktop/moy-sayt

# Windows PowerShell
mkdir $env:USERPROFILE\Desktop\moy-sayt

Теперь запустите Claude Code прямо из этой папки — это важно, потому что он будет работать с файлами именно там:

# Mac / Linux
cd ~/Desktop/moy-sayt
claude

# Windows
cd $env:USERPROFILE\Desktop\moy-sayt
claude

Первый каркас страницы — формулируем задачу

Теперь — первая настоящая задача по формуле. Напишите в диалоге с Claude Code что-то вроде этого (подставьте своё имя):

# Пример задачи по четырём элементам:
Создай файл index.html.
Это будет личная страница-визитка.
Сверху — заголовок h1 с моим именем «Имя Фамилия».
Под ним — короткая строка «Добро пожаловать на мою страницу».
Фон страницы белый, текст чёрный.
Страница должна нормально открываться в браузере.

Это и есть все четыре элемента, просто написанные в свободной форме. ЧТО — создай index.html. ГДЕ — в текущей папке (Claude Code это знает). КАК — заголовок с именем, строка приветствия, белый фон. ГОТОВО — открывается в браузере.

Claude Code покажет, что собирается сделать, и попросит разрешения. Согласитесь. Через несколько секунд в папке moy-sayt появится файл index.html.

Часть 5. Читаем результат — не пугаясь кода

Файл создан. Первый рефлекс — открыть его и увидеть кучу угловых скобок и странных слов. Именно здесь большинство людей пугаются и думают, что что-то пошло не так.

Всё в порядке. То, что вы видите — это HTML-код [2]. Язык разметки, которым написаны почти все страницы в интернете. Вы не будете его учить и не обязаны его понимать — его написал Claude Code. Но вы можете сориентироваться в структуре, если знаете одно простое правило.

Как проверить результат в браузере

Самый простой способ — открыть файл прямо из папки. Найдите файл index.html в папке moy-sayt через файловый менеджер (Finder на Mac, Проводник на Windows) и дважды кликните на него. Браузер откроет его как обычную страницу.

Вы увидите белую страницу с вашим именем сверху. Это и есть ваш первый каркас — стены без отделки, но уже стоят. Дальше будем украшать.

Часть 6. Итерации — «поправь вот это»

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

С Claude Code итерации работают просто: вы описываете, что не так, и он правит. Не нужно начинать с нуля. Не нужно объяснять всё заново. Просто коротко и конкретно — всё те же четыре элемента, только маленький кусочек:

# Примеры итерационных правок:
Заголовок слишком мелкий. Сделай шрифт больше — примерно 48 пикселей.

Цвет фона слишком ярко-белый, измени на светло-серый #F5F5F5.

Добавь отступ сверху у заголовка — 40 пикселей.

Каждая правка — короткая задача с четырьмя элементами, даже если вы их не формулируете явно. Claude Code понимает контекст: он помнит, что делал раньше в этом сеансе, и применяет правки к нужному месту [1].

Резюме