Страница услуги с ценой и заявкой — соберите сами за вечер

Шесть разделов — ровно столько, сколько нужно одной услуге. Каждый закрывает свой вопрос клиента.

Три бытовые ситуации, в которых страница услуги нужна не «когда-нибудь», а на этой неделе.

• Клиент просит «скиньте ссылку, посмотрю»

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

• Мастерская или кабинет работает, а описания нет

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

• Подписка на конструктор съедает деньги за простой

  Месяц без заказов — платёж за конструктор всё равно списывается. Через год вы платите за доступ к чужому сервису, а не за свою страницу.

Три дороги к одной странице. Разница — в деньгах, сроке и в том, кому принадлежит результат.

Отдельно оплачивается только адрес в интернете: файл живёт на хостинге без подписки на конструктор.

Не про «попробовать новое», а про практику: деньги, время и контроль над страницей.

• Экономия

  Не платите за вёрстку и не продлеваете подписку: стартовых 5 млн токенов хватает на сборку с запасом.

• Страница принадлежит вам

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

• Правки словами

  Подняли цену, добавили работу — пишете боту обычным предложением и получаете обновлённый файл.

• Не нужно ждать разработчика

  Сезон начался, а на странице старая цена? Исправление занимает минуты, не неделю переписки.

• Нет лимитов тарифа на функции

  Форма заявки, отзывы, галерея работ — не платные модули, а части одного файла.

Нужны только Telegram и браузер. Промпт копируется прямо с этого листа.

1. шаг 01

   Приложение установлено

   Напишите боту «старт» — он пришлёт ссылку. Установите приложение и войдите: на стартовом экране виден баланс токенов.

   

2. шаг 02

   Нажмите «Открыть веб-интерфейс»

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

   

3. шаг 03

   Нажмите «Создать проект»

   Проект — отдельная папка под задачу. Для страницы услуги хватит одного: файл и правки останутся вместе.

   

4. шаг 04

   Впишите название и подтвердите

   Например «Сайт: услуга». Название видит только вы. Нажмите «Создать проект» ещё раз.

   

5. шаг 05

   Скопируйте промпт и вставьте его

   Промпт — ниже. Вернитесь в проект, кликните в поле сообщения и нажмите Ctrl + V.

   

6. шаг 06

   Нажмите «Отправить» ↑

   Кнопка «Отправить» — справа под полем ввода, Enter делает то же. Дальше бот читает промпт и задаёт вопросы.

   

7. шаг 07

   Ответьте на 8–15 вопросов

   Бот спросит про услугу, цены и город. Отвечайте коротко, своими словами — в конце получите готовый HTML-файл.

   

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

Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без
технических знаний собрать лендинг одной услуги: первый экран, услуги с ценами, выполненные
работы, отзывы, контакты и форма заявки. Он не должен проектировать структуру страницы —
это твоя работа.

Сначала короткий опрос на понятном языке (8–15 вопросов, с вариантами ответов): как называется
услуга и что именно вы делаете; в каком городе и как далеко выезжаете; из чего складывается
цена и какая единица — за час, за метр, за выезд, за штуку; какие три-пять услуг показать
с ценами «от»; какие работы можно показать и что в них важно; что чаще всего спрашивают
клиенты; как с вами связаться и когда вы отвечаете. Не спрашивай про фреймворки, хостинг,
домены и дизайн-системы. После ответов коротко перескажи, что понял, и приступай.

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

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

Дизайн: выбери одну цельную систему под услугу — спокойная типографика, ясная иерархия,
тонкие разделители, единые кнопки и поля, hover и focus, адаптив от 360 px. Цена и кнопка
заявки видны на первом экране без прокрутки. Никакого визуального шума и декоративных цифр.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage для заявок и черновика,
без backend, сборщиков и npm. Внутри файла раздели слои: хранилище → сущности → секции →
компоненты → экраны → навигация. После любого изменения данные сохраняются, а интерфейс
перерисовывается сразу, без перезагрузки.

Добавь немного реалистичных демо-данных и кнопку «Удалить тестовые данные» с подтверждением,
одноразово. Предусмотри пустые поля, битые данные в localStorage, закрытие окон по Escape
и по клику на фон.

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

Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент». Все дальнейшие правки — тоже
полным файлом.

Моя услуга: ___ (одна фраза: что вы делаете, для кого и в каком городе).