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

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

Источник: https://vibeceh.ru/guides/claude-code-sobrat-sajt-s-kalkulyatorom-ceny-uslugi-za-vecher
Автор: Сергей Мазур · опубликовано 2026-08-21

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

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

Claude Code - CLI-инструмент, который работает внутри папки проекта, а не только отвечает в чате. Он ищет и читает код, редактирует файлы, пишет и запускает тесты, выполняет команды терминала и работает с GitHub. Для первого вечера хватит одной страницы с формой, расчётом цены и проверяемым итогом. Порядок такой проверки разобран в [инструкции о 10 шагах проверки результата](/guides/claude-code-rabochij-protokol-proverki-rezultata-posle-kazhdoj-pravki).

![Кот закрывает морду лапой у сравнения Claude Code и обычного чата.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-sobrat-sajt-s-kalkulyatorom-ceny-uslugi-za-vecher/kadr-1.webp)

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

| Критерий | Claude Code | Обычный чат |
| --- | --- | --- |
| Доступ к файлам | Работает внутри папки проекта | Файлы обычно нужно передать вручную |
| Несколько связанных файлов | Может изучать и менять их в одном проекте | Изменения приходится переносить самостоятельно |
| Запуск команд | Может запускать доступные проверки в терминале | Не запускает команды в твоей папке |
| Способ проверки | Показывает результат команды и изменённые файлы | Результат нужно переносить и проверять отдельно |

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

В анонсе Claude 3.7 Sonnet Anthropic описывает Claude Code как инструмент командной строки для агентного программирования: [Claude 3.7 Sonnet and Claude Code](https://www.anthropic.com/news/claude-3-7-sonnet).

Главное отличие от чата связано с доступом к рабочей папке и действиям. 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. Ты открываешь результат и проверяешь поведение формы.

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

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

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

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

![Мужчина с ладонью на лице смотрит на цепочку шагов сборки калькулятора.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-sobrat-sajt-s-kalkulyatorom-ceny-uslugi-za-vecher/kadr-2.webp)

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

Не начинай с фразы «сделай сайт». Сначала собери исходные правила. Конкретный пример калькулятора доставки с тарифами, промптами и проверками разобран в [кейсе калькулятора доставки](/guides/kalkulyator-stoimosti-dostavki-na-sajte-vmesto-n8n). Здесь оставляю универсальную структуру, которую надо заполнить своими бизнес-правилами.

   

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

Claude Code помогает ускорить понятную ограниченную задачу. Пример похожего сценария есть в [разборе калькулятора стоимости доставки](/guides/kalkulyator-stoimosti-dostavki-na-sajte-vmesto-n8n). Он не отменяет исходные правила и приёмку. Если точной формулы нет, инструмент не должен придумывать её за владельца услуги.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![Собака тревожно смотрит на чек-лист контрольных значений с красными крестами.](https://s3.regru.cloud/crossmark/statejnik/images/guides/claude-code-sobrat-sajt-s-kalkulyatorom-ceny-uslugi-za-vecher/kadr-3.webp)

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

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

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

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

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

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

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

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

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

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

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

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

Продолжение длинной сессии может повторно отправить весь транскрипт и быстро увеличить расход. О том, как удерживать рабочий контекст проекта, я написал в [разборе контекста в Claude Code](/guides/kontekst-v-claude-code-zabyvaet-proekt). Сохрани краткое состояние проекта и начни новый диалог с одной конкретной задачей.

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

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

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

Claude Code работает через команды терминала внутри папки проекта. Ты описываешь действие обычными словами, инструмент читает файлы, меняет код, запускает доступные команды и возвращает результат. Перед запуском посмотри `package.json` и поле `scripts`, если оно есть. Точный набор команд зависит от стека и структуры конкретного проекта, поэтому проверку запускай по файлам именно этой папки.

Для первой страницы не нужно сразу подключать множество агентов и инструментов. Подготовь проект, понятный запрос, зафиксированную формулу и способ проверки. Сначала проверь базовый сценарий на одной странице. Настройку `CLAUDE.md`, `settings.json`, skills и MCP оставь для отдельной задачи с подтверждёнными примерами и понятной целью.

Работа начинается из папки проекта через командную строку. После запуска Claude Code опиши задачу и дождись чтения структуры проекта. До запуска сервера попроси показать доступные команды или проверь поле `scripts` в `package.json`. Команда локального сервера зависит от выбранного стека и файлов конкретного проекта.

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

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

Проверь актуальные системные требования и способ установки для своей системы: они могут отличаться. Для первого проекта не смешивай установку, настройку, публикацию сайта (деплой) и разработку в одну инструкцию. Сначала подготовь рабочую папку, проверь доступный запуск и только потом передай агенту ограниченную задачу. Результат проверь в браузере и по контрольным значениям.

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

- [Claude 3.7 Sonnet and Claude Code - Anthropic](https://www.anthropic.com/news/claude-3-7-sonnet)
- [Claude Code: Best practices - Claude Code Docs](https://code.claude.com/docs/en/best-practices)
- [Best practices for Claude Code - Claude Code Docs](https://code.claude.com/docs/en/best-practices)
- [1h prompt cache intermittently invalidated every ~11-12 min in active sessions](https://github.com/anthropics/claude-code/issues/76058)
- [Silent full transcript replay on cache expiry destroys rate budget on resume](https://github.com/anthropics/claude-code/issues/43602)
- [Seeing like an agent: how we design tools in Claude Code](https://claude.com/blog/seeing-like-an-agent)