Прайс на сайте для ателье: 8 шагов до своей страницы услуг на вайб-кодинге

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

А началось всё с прайса, который приходилось держать в голове.

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

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

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

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

Первое изменение было простым: я перестала держать весь прайс в голове. Я не стала программистом и не начала писать код. Теперь согласованная сумма остаётся в заказе и не меняется случайно.

Что изменилось в моих буднях после прайса на сайте?

Раньше я объясняла цену через вещь целиком. «Платье будет стоить столько-то» звучит просто, но за этой суммой скрываются разные действия. Одно платье можно укоротить, ушить по бокам, изменить длину рукава и заменить молнию. Это уже несколько операций.

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

Так мне проще разговаривать с клиентом. Я не вспоминаю весь прайс по памяти и не объясняю стоимость длинной фразой. Показываю состав заказа и согласую сумму по понятным позициям.

В журнале заказов остаются:

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

Это не превращает ателье в фабрику. Мастер всё так же работает с вещью руками. Но между приёмом и выполнением появляется одна понятная запись.

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

Я начала с основных операций, которые повторяются каждый день. Редкие дополнительные работы вынесла в отдельную категорию, поэтому прайс остаётся коротким, а правила не теряются.

Почему я не стала покупать готовый сервис?

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

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

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

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

Подрядчик тоже остаётся вариантом. Но после передачи задачи всё равно понадобится человек, который сможет объяснить, что поменять в следующий раз. Мне важнее было самой менять рабочее правило, когда оно появляется в ежедневной рутине.

Я не стала добавлять в страницу личные кабинеты, сложную CRM и лишние отчёты. Каждая ненужная функция увеличивает количество мест для ошибки. Для моего процесса достаточно прайса, обращения, таблицы и уведомления.

Из чего состоит страница услуг с прайсом

Структура у страницы такая:

1. Категории операций. Например, подгонка, ремонт, замена деталей и срочные заказы.
2. Карточки работ. В карточке есть название операции, описание и цена.
3. Кнопка действия. Она предлагает выбрать работу или оставить обращение.
4. Форма. В ней сохраняется выбранная операция, имя, один канал связи и комментарий. Рядом с формой размести действующую политику конфиденциальности и сформулируй отдельное согласие под конкретную цель и состав данных. Юридическую формулировку проверь перед публикацией, а согласие на рекламные сообщения оставь отдельным и необязательным.
5. Таблица заявок. В ней остаются дата, операция, контакт и содержание обращения.
6. Уведомление. После отправки мне приходит сообщение о новой заявке.
7. Адрес и телефон. Они находятся рядом с прайсом, чтобы посетителю не приходилось искать контакт по всей странице.

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

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

В Яндекс Бизнесе прайс тоже строится по категориям и отдельным позициям:

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

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

Что нужно поставить и сколько это стоит?

Сначала установи Visual Studio Code. В нём открыта папка с файлами проекта: ты видишь страницу, а помощник читает эти файлы и меняет их по твоей задаче. Самой писать программу не придётся. Тебе достаточно открыть папку, посмотреть результат и отправить задачу помощнику.

Затем установи Claude Code. Он запускается в проекте из терминала; Visual Studio Code можно использовать рядом для просмотра и изменения файлов по твоему описанию. Ты пишешь не «создай компонент с таким-то классом», а обычную задачу: «добавь карточки операций и кнопку обращения».

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

Для публикации страницы подходит Cloudflare Pages. Там размещается обычный статический HTML-сайт. В документации прямо сказано:

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

Apps Script имеет ограничения. Например, выполнение одного скрипта может длиться до 6 минут, а вызовы внешних адресов URL Fetch для бесплатного пользовательского аккаунта ограничены 20 000 в сутки. Для небольшой страницы услуг я не усложняю сборку из-за этих лимитов, но держу их в виду.

Про подписку расскажу отдельно и без маскировки. Claude Pro стоит $20 в месяц. Рублёвый эквивалент зависит от курса на дату оплаты. Для России в приведённых официальных тарифах нет отдельной рублёвой цены; $20 указаны как долларовая цена плана, а не как российский тариф.

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

Как собрать страницу услуг по шагам?

1. Опиши операции ателье.

   Создай папку проекта, открой её в Visual Studio Code и сначала опиши, как в ателье принимают и оценивают работу.

   Разобрать операции ательеСкопировать промпт

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

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

2. Создай структуру прайса.

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

   Создать структуру прайса ательеСкопировать промпт

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

   Я проверяю, чтобы помощник не свалил базовую цену, сложность и срочность в одну строку. Если помощник сложил всё в одну непонятную строку, попроси переделать структуру до создания страницы.

3. Добавь карточки услуг.

   Теперь попроси вывести операции на страницу. На этом шаге получится первый видимый результат.

   Сделать карточки операцийСкопировать промпт

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

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

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

4. Подключи кнопку обращения.

   Кнопка должна передавать выбранную операцию, чтобы клиенту не приходилось переписывать её руками.

   Подключить обращение из карточки услугиСкопировать промпт

   Подключи кнопку «Оставить обращение» в каждой карточке операции. После нажатия должна открываться форма обращения, а выбранная операция должна подставляться в поле «Работа». Посетитель может добавить комментарий и оставить имя с одним каналом связи.
   
   Сделай проверку обязательных полей и понятное сообщение после отправки. Не собирай паспортные данные, данные карты, пароли или сведения о здоровье. Если для собственной формы понадобится Apps Script, объясни по шагам, какие доступы нужны и какой URL вставить. Не показывай секретный токен в HTML-файле.

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

5. Свяжи форму с таблицей.

   Хранилище должно быть понятным и пригодным для сверки с журналом заказов.

   Связать форму с Google ТаблицейСкопировать промпт

   Настрой приём заявок со страницы ателье через Google Apps Script и Google Таблицу. В одну строку записывай дату и время, выбранную операцию, имя, телефон или другой один канал связи, комментарий и статус обработки.
   
   Форма отправляет данные методом POST. Не записывай лишние персональные данные. Добавь защиту от пустой операции и пустого канала связи. Объясни, как создать скрипт, опубликовать его как Web app, получить URL и проверить доступ. Секреты и токены не вставляй в открытый HTML.
   
   Перед изменением перечисли файлы и настройки, которые будут затронуты. После настройки дай мне тестовый сценарий: отправить заявку, найти одну строку в таблице, проверить операцию и время.

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

6. Добавь уведомление в Telegram.

   Уведомление должно сообщать о новой заявке, но не становиться единственным местом хранения.

   Добавить уведомление о новой заявкеСкопировать промпт

   Добавь уведомление в Telegram после успешной записи заявки в Google Таблицу. Сообщение должно содержать операцию, имя, канал связи, комментарий, дату и время. Сначала записывай заявку в таблицу, затем отправляй уведомление.
   
   Не отправляй одно и то же сообщение повторно после неоднозначного таймаута. Если результат отправки неизвестен, запиши это в лог и покажи, как проверить заявку вручную. Добавь резервную проверку: по таблице должно быть видно, что заявка записалась, даже если Telegram временно недоступен. Токен бота храни в настройках Apps Script, а не в HTML. Контекст проекта и настройки интеграции не должны содержать секреты в открытой странице.

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

7. Проверь мобильную версию.

   Проверь мобильную версию на телефоне: узкие карточки и мелкий текст лучше заметить до публикации.

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

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

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

8. Попроси исправить симптом.

   Не пытайся сама искать строку кода, если видишь понятный сбой. Опиши помощнику, что произошло, и попроси сначала найти причину.

   Найти и исправить проблемуСкопировать промпт

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

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

Что появилось в папке после сборки?

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

Минимальная структура выглядит так:

index.html
styles.css
README.md

index.html содержит категории операций, названия, описания, цены, кнопки и форму. styles.css отвечает за размеры, отступы, цвета и мобильную версию. README.md объясняет, как открыть страницу, где находится адрес формы и что проверить после изменения.

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

Храни несколько копий:

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

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

В готовом шаблоне может быть только index.html, styles.css и README.md. Это нормально для статической страницы. Сложность появляется не из количества файлов, а из связей между прайсом, формой, таблицей и уведомлением.

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

Что ломалось и как я это чинила?

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

Время заявки отличается

Если сайт, Apps Script, таблица и Telegram используют разные часовые пояса, время в строке и уведомлении может не совпасть. Особенно неприятно это рядом с полуночью.

В одной технической разборке проблему описали так:

В issue php-telegram-bot/core описан риск расхождения при разных настройках часового пояса в PHP и базе данных: обсуждение на GitHub.

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

В заявках ателье время в Google Таблице и Telegram отличается от времени на компьютере. Сначала проверь, какой часовой пояс используют страница, Apps Script и таблица. Не меняй данные вслепую. Объясни причину простыми словами, предложи единый формат хранения времени и дай тест около полуночи, чтобы сравнить результат в трёх местах.

Одна заявка превращается в несколько строк

Повторная доставка webhook может создать дубли. Например, отправляющая сторона получила редирект и повторила запрос. В примере интеграции причина объяснена так:

В примере интеграции Google Apps Script с Google Sheets повторные записи связывают с повторной доставкой запроса после перенаправления: пример на GitHub.

Перед записью полезно проверять уникальный messageId или submissionId. Если такой идентификатор уже есть в таблице, повторную строку создавать не нужно.

Одна тестовая заявка ателье иногда появляется в Google Таблице несколько раз. Проверь путь от формы до Apps Script и найди, может ли POST повторно доставляться из-за редиректа или ответа сервера. Предложи защиту по уникальному идентификатору заявки. Сначала покажи причину и список изменений, затем дай тест: одна отправка должна создать одну строку, повтор того же идентификатора не должен создавать новую.

Telegram присылает уведомление дважды

Таймаут не всегда означает, что сообщение не дошло. Telegram мог принять его, а ответ не успел вернуться в Apps Script. Если после этого сработает повторная отправка, появятся два одинаковых уведомления.

В технической issue это описано так:

Таймаут не доказывает, что сообщение не дошло. Это нужно проверить по идентификатору заявки, а не автоматически отправлять повторно: обсуждение на GitHub.

Не ставь два слоя автоматических повторов. При неизвестном результате лучше сохранить заявку в таблице и проверить статус, чем отправлять сообщение заново без уверенности.

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

Резервного канала нет

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

В разборе такой ситуации есть короткое предупреждение:

В разборе vc.ru отсутствие резервного канала связывают с поздним обнаружением сбоя интеграции: разбор приёма заявок.

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

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

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

Сколько стоит своё решение против готового?

$20 в месяц - официальная цена Claude Pro. Рублёвый эквивалент меняется вместе с курсом и не является рублёвым тарифом Anthropic. Официальная оплата из России и рублёвая цена не найдены.

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

У своей страницы есть пределы. Она не подойдёт, если нужен сложный CRM-контур, большой поток заявок, нестандартная обработка персональных данных или нет времени на регулярные проверки.

Ещё один расход - домен, если нужен собственный адрес. Подтверждённой цены домена для этой сборки у меня нет, поэтому не включаю её в таблицу.

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

Есть и отраслевой ориентир. В исследовании HubSpot на ввод данных приходилось 17% рабочего времени продавцов (источник HubSpot). Это не замер ателье и не обещание, что страница освободит такой же объём времени. Для себя можно взять саму идею: ручной ввод стоит измерять до и после, а не приписывать странице заранее готовую экономию.

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

Что сделать сегодня, если техника не твоя?

Маршрут можно пройти так:

1. Выпиши операции, которые реально повторяются в работе.
2. Отдели основные работы от дополнительных.
3. Для каждой операции укажи название, описание и цену.
4. Отдельно запиши правила сложности и срочности.
5. Реши, какие данные нужны для ответа клиенту.
6. Поставь Visual Studio Code и Claude Code.
7. Создай страницу с категориями и карточками.
8. Подключи кнопку обращения и таблицу.
9. Добавь Telegram как уведомление, но оставь таблицу основным хранилищем.
10. Проверь одну заявку на компьютере и одну на телефоне.

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

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

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

Материалы и документы

• Яндекс Бизнес: прайс-лист
• Cloudflare Pages: размещение статического HTML-сайта
• Google Apps Script Web Apps
• Google Apps Script: квоты и ограничения
• Google Forms: встраивание формы на сайт
• What is the Pro plan?
• Курс доллара на 21 августа 2026 года
• Issue о часовом поясе в php-telegram-bot
• Пример webhook-интеграции с Google Sheets
• Issue о повторной отправке сообщений Telegram
• Приём заявок на почту и в CRM без разработчика
• HubSpot Sales Pro: данные о времени продавцов
• Федеральный закон № 152-ФЗ «О персональных данных»
• Федеральный закон № 38-ФЗ «О рекламе»

Если хочешь собрать такую страницу на собственной задаче, практикум продолжает этот маршрут:

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