Первый проект в Claude Code: калькулятор ROAS и CPL
Три файла, три промпта и проверка на цифрах, которые ты посчитал заранее
Какую задачу решает
Собрать HTML-калькулятор ROAS и CPL с Claude Code
Что будет на выходе
HTML-калькулятор ROAS/CPL с защитой от деления на ноль
- Кому подойдёт
Маркетолог без опыта кода, который хочет сделать первый рабочий проект в Claude Code
- Тема
- Агенты и Claude Code
- Инструменты
- Claude Code
Первый проект в Claude Code лучше брать маленьким и таким, где сразу видно, работает он или нет. Калькулятор рекламной окупаемости подходит: три поля, две формулы, и правильный ответ ты можешь посчитать в уме. Если агент ошибся, ты это заметишь сам, без программиста.
На выходе будет одна папка с тремя файлами: страница, которая открывается двойным щелчком в браузере, принимает расходы на рекламу, выручку и число заявок и показывает ROAS и стоимость заявки (CPL). При нулевых расходах или нуле заявок она пишет понятное сообщение вместо «Infinity» или «NaN».
Пустая папка, Claude Code и три промпта по очереди: собрать калькулятор, проверить его на трёх наборах цифр, сохранить версию в git. Контрольный пример: 10 000 ₽ расходов, 30 000 ₽ выручки, 50 заявок → ROAS 3, CPL 200 ₽.
Что получишь
- 🧮Рабочий калькулятор
index.html, style.css и app.js без библиотек и сборки. Открывается с компьютера и с телефона.
- 🚧Защиту от кривых цифр
Пустое поле, минус и ноль в знаменателе дают подсказку под полем.
- 🔁Привычку проверять агента
Ты сам сверяешь результат с ответом, который посчитал заранее, и требуешь от агента показать, что он запускал.
Как использовать
- 1Создай пустую папку
Например, roas-calc на рабочем столе. Открой в ней терминал и запусти Claude Code командой claude.
- 2Посчитай ответ заранее
Возьми цифры своей последней кампании и посчитай на калькуляторе телефона: выручка / расходы и расходы / заявки. Это твой эталон.
- 3Отправь шаг 1 и прочитай план
Агент сначала пишет план и спрашивает разрешения создать файлы. Согласись, если в плане три файла и нет библиотек.
- 4Проверь руками и шагом 2
Открой index.html в браузере, введи свои цифры и сравни с эталоном. Потом попроси агента пройти три контрольных набора.
- 5Сохрани версию
Шаг 3 делает коммит в git. Если следующая правка всё сломает, к этой версии можно вернуться.
Если Claude Code ещё не установлен, порядок установки и первого запуска разобран в гайде как сделать сайт с Claude Code за выходные. Для этого проекта хватит его первых шагов.
Рядом по теме: Скиллы, MCP и плагины для Claude Code, CLAUDE.md для любого проекта, Вайбкодим калькулятор стоимости рекламы, статья «Cursor или Claude Code» и 12 модов Claude Code для вайбкодера (490 ₽).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
- Пустые, ошибочные и загрузочные состояния — то, что отличает поделку от инструмента. Разобрано в четырёх состояниях интерфейса.
- Чтобы калькулятор открывался по ссылке у коллег, его нужно выложить в интернет.
- Если хочешь пройти путь от своей идеи до первого рабочего экрана с агентом по шагам, есть курс Первый экран за 990 ₽.