Claude Code: как собрать сайт с калькулятором цены и проверить его по 10 пунктам

Что такое Claude Code и зачем он нужен для сайта?

В обычном чате доступ к локальной папке не возникает автоматически: содержимое обычно нужно передать вручную или подключить отдельный инструмент. Claude Code работает внутри папки проекта и может менять несколько связанных файлов. Разница для первой задачи выглядит так:

Anthropic описывает Claude Code как инструмент, который живёт в терминале и помогает работать с кодовой базой. В первом анонсе он уже умел читать код, редактировать файлы, запускать тесты и команды терминала.

В анонсе Claude 3.7 Sonnet Anthropic описывает Claude Code как инструмент командной строки для агентного программирования: Claude 3.7 Sonnet and Claude Code.

Главное отличие от чата связано с доступом к рабочей папке и действиям. Claude Code не становится от этого безошибочным разработчиком. Он может предложить изменение, внести его в файл и проверить командой. Но результат всё равно надо принимать глазами и контрольными значениями.

Граница обещания простая. Одна страница с формой, понятной формулой и итоговой ценой подходит для вечернего эксперимента. Сервис, который принимает оплату, хранит данные клиентов и работает без сбоев, требует отдельной работы.

Как Claude Code работает в командной строке?

Терминал не превращает работу в программирование с нуля. Для первого проекта достаточно понимать три вещи:

1. Папка проекта - место, где лежат файлы страницы.
2. Запрос - описание действия для Claude Code.
3. Проверка - способ убедиться, что результат совпал с ожиданием.

Работа начинается внутри папки. Claude Code смотрит, что там уже есть. В зависимости от проекта Claude Code может предложить создать недостающие файлы; результат нужно проверить. Если в папке уже лежит сайт, сначала изучает существующие файлы и продолжает работу с ними.

Команды терминала нужны для действий вокруг кода. Полезно заранее понять, какие команды Claude Code доступны в выбранном проекте: Claude Code может проверить структуру, запустить тесты или локальную проверку. Для справки по доступным командам используй запрос claude code commands. Точный набор зависит от стека, поэтому одной универсальной команды запуска для всех компьютеров и проектов нет.

Базовая модель выглядит так:

1. Ты описываешь, что должно появиться на странице.
2. Claude Code изучает папку и задачу.
3. Он предлагает план или вносит изменения после согласования.
4. Ты открываешь результат и проверяешь поведение формы.

Установка и авторизация здесь намеренно не расписаны. Для них нужны актуальные системные требования и последовательность команд с официальной страницы. Эти данные нельзя безопасно заменить догадкой.

Как собрать сайт с калькулятором цены за вечер?

1. Зафиксируй правила расчёта.

   Запиши, что вводит человек, какие значения допустимы и как получается итоговая цена.

   Не начинай с фразы «сделай сайт». Сначала собери исходные правила. Конкретный пример калькулятора доставки с тарифами, промптами и проверками разобран в кейсе калькулятора доставки. Здесь оставляю универсальную структуру, которую надо заполнить своими бизнес-правилами.

   Требования к калькуляторуСкопировать промпт

   Нужна одна страница с калькулятором цены услуги.
   
   Параметры:
   - тип услуги: укажи допустимые варианты;
   - объём работы: укажи единицу и диапазон;
   - срочность: укажи варианты;
   - дополнительные опции: укажи варианты.
   
   Формула:
   - базовая цена зависит от типа услуги;
   - объём изменяет итог по правилу: вставь точное правило;
   - срочность изменяет итог по правилу: вставь точное правило;
   - дополнительные опции добавляют: вставь точное правило.
   
   Покажи итоговую цену после изменения значений. Не придумывай ставки, коэффициенты и дополнительные функции. Если правило неясно, сначала задай вопрос.

2. Попроси изучить задачу.

   Отправь требования Claude Code и попроси перечислить неясные места до написания кода.

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

3. Зафиксируй короткий план.

   Попроси разделить работу на каркас, расчёт, визуальную правку и тестирование.

   В рекомендациях Anthropic рабочий процесс разделён на исследование, планирование, реализацию и фиксацию результата; проверку нужно обеспечивать отдельным тестом, сборкой, скриншотом или другим проверяемым сигналом. Для маленького изменения отдельный план можно не раздувать. Но для первой страницы план помогает не смешать форму, дизайн и расчёт в одну непонятную правку.

   План первой версииСкопировать промпт

   Составь короткий план без кода.
   
   Раздели работу на четыре этапа:
   1. каркас страницы и поля формы;
   2. формула и вывод итоговой цены;
   3. визуальная правка интерфейса;
   4. локальная проверка и тестирование контрольных значений.
   
   Для каждого этапа укажи изменяемые файлы и способ проверки. Не добавляй деплой, оплату, авторизацию, базу данных и аналитику.

4. Создай каркас страницы.

   После согласования плана попроси сделать только форму и место для результата.

   На этом шаге нужны поля параметров, подписи и заметный блок итоговой цены. Не проси одновременно писать формулу и украшать экран. Так проще понять, где появилась ошибка.

5. Добавь формулу отдельно.

   Попроси реализовать только расчёт и обновление результата после изменения значений.

   Claude Code должен использовать зафиксированные правила и не дополнять их «логичными» предположениями. Попроси показать, где в файлах лежит формула. Потом сравни код с исходной записью.

6. Запусти локальную проверку.

   Попроси Claude Code запустить доступную для проекта проверку и сообщить фактический вывод команды.

   Если команда завершилась ошибкой, это не повод просить «починить всё». Передай конкретную ошибку и попроси изменить только связанные файлы. После крупной правки снова посмотри список изменений.

7. Проверь контрольные значения.

   Введи минимальные, максимальные, пустые и нулевые значения, затем проверь сочетания параметров.

   Запиши ожидаемый итог для каждого сценария до проверки. Сравни его с тем, что показывает страница. Проверь также, меняется ли итог сразу после изменения поля и не исчезает ли результат при повторном выборе параметра.

8. Остановись на рабочей версии.

   Не добавляй новые функции, пока форма и формула не проходят проверку.

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

Промпт для финальной приёмки можно использовать отдельно:

Проверь страницу как приёмщик, а не как автор кода.

1. Перечисли все требования из задачи.
2. Покажи, где каждое требование реализовано.
3. Проверь минимальные значения.
4. Проверь максимальные значения.
5. Проверь пустые значения.
6. Проверь нулевые значения.
7. Проверь сочетания параметров.
8. Сравни фактические итоги с ожидаемыми значениями.
9. Запусти доступную проверку проекта и покажи её вывод.
10. Не пиши «готово», если хотя бы одно требование или значение не проверено.

Claude Code помогает ускорить понятную ограниченную задачу. Пример похожего сценария есть в разборе калькулятора стоимости доставки. Он не отменяет исходные правила и приёмку. Если точной формулы нет, инструмент не должен придумывать её за владельца услуги.

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

Как попросить Claude Code сделать понятный дизайн?

Запрос «сделай красиво» слишком пустой. Claude Code начнёт заполнять пробелы своими решениями. Опиши экран языком будущего пользователя:

• поля параметров находятся в одном понятном блоке;
• у каждого поля есть подпись;
• допустимые варианты видны до выбора;
• итоговая цена заметнее второстепенного текста;
• после изменения значения итог обновляется;
• пустое или нулевое значение обрабатывается явно.

Попроси сначала изменить интерфейс, не трогая формулу. Если визуальная правка меняет логику расчёта, это уже не только дизайн. На таком месте я останавливаюсь и проверяю значения заново.

Сделай интерфейс спокойным и понятным для человека, который впервые открыл страницу.

Требования:
- вынеси поля параметров в отдельный блок;
- добавь короткие подписи без технических терминов;
- сделай итоговую цену заметной;
- показывай результат сразу после изменения значения;
- явно обработай пустые и нулевые значения;
- не меняй формулу и не добавляй новые поля.

После правки перечисли изменённые файлы и отдельно проверь, что расчёт остался прежним.

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

Как писать запросы Claude Code, чтобы он не додумывал задачу?

Структуру запроса можно держать в шести блоках:

1. цель страницы;
2. параметры услуги;
3. формула;
4. ожидаемые состояния;
5. ограничения;
6. способ проверки.

Пример готовой заготовки:

Цель: собрать одну страницу с калькулятором цены услуги.

Параметры:
- [название параметра]: [допустимые значения];
- [название параметра]: [диапазон];
- [название параметра]: [допустимые значения].

Формула:
- [точное правило расчёта];
- [точное правило для дополнительного параметра];
- [правило для пустого и нулевого значения].

Ожидаемые состояния:
- до ввода показывается понятная подсказка;
- после выбора параметров показывается итог;
- изменение любого параметра обновляет итог;
- недопустимое значение не даёт ошибочного расчёта.

Ограничения:
- одна страница;
- не добавлять оплату, авторизацию, базу данных и деплой;
- не менять несвязанные файлы;
- не придумывать отсутствующие ставки и коэффициенты.

Порядок работы:
1. изучи проект;
2. перечисли неясные места;
3. составь короткий план;
4. дождись подтверждения;
5. внеси изменения;
6. запусти доступную проверку;
7. покажи изменённые файлы и фактический результат.

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

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

Почему Claude Code может сказать «готово», хотя калькулятор сломан?

Типовая поломка выглядит правдоподобно. Форма открывается, кнопка реагирует на нажатие, и на экране появляется итоговое число, но это ещё не подтверждает правильность расчёта. Но один параметр не влияет на расчёт, пустое поле превращается в неожиданное значение или срочность применяется дважды.

Форма может открываться, кнопка реагировать, а итоговое число всё равно может быть неверным. Поэтому результат нужно сверять с требованиями, кодом и контрольными значениями.

Я бы проверял калькулятор по отдельным сценариям, ориентируясь на его поведение и расчёт:

Я проверяю шесть сценариев: минимальные и максимальные значения, пустые и нулевые поля, сочетания параметров и изменение каждого поля после появления результата.

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

Что делать, если длинная сессия съедает лимит?

В issue-отчёте один пользователь сообщил о сбросе кэша контекста в диапазоне от 133 000 до 252 000 токенов (issue #76058). Это наблюдение отдельного автора, а не универсальная норма для каждой сессии. Но риск понятен: короткая правка может потянуть за собой большой объём старой истории.

В другом issue-отчёте пользователь описал возобновление старого диалога объёмом 500 тысяч токенов: после паузы новое сообщение повторно отправило весь транскрипт как некэшированный ввод (issue #43602). Автор указал, что не получил предупреждения перед расходом. Это также отдельное наблюдение, а не правило для всех сессий.

Практический режим для калькулятора:

1. Одна сессия на исследование и план.
2. Отдельная сессия на каркас.
3. Отдельная сессия на формулу.
4. Отдельная сессия на проверку.
5. Новый диалог после длинной паузы.
6. Краткая запись состояния вместо копирования всей истории.

После большого запроса проверь экран использования или доступную статистику. Если расход резко вырос, не продолжай вслепую цепочкой из десяти новых правок. Сначала сохрани текущий результат и зафиксируй, что уже проверено.

Для маленького проекта не нужны множество агентов, skills и внешних инструментов. Один проект, короткий запрос, локальная проверка и контрольные значения дают более прозрачный рабочий контур.

Вопросы и ответы