Вы знаете, что без страницы услуг клиенты уходят к конкурентам, но слово «сайт» звучит как вызов программисту. В Cursor пишете «сделай сайт» — и через минуту лежат десятки файлов, package.json и просьба открыть терминал. За один вечер можно собрать одну страницу услуг как листовку: hero, карточки с ценой «от …», форму заявки и ссылку, которую отправите в чат клиентам. Без npm, без ручного кода и без команды разработчиков.
Суть: сначала правило landing.mdc и явный бриф блоков, потом Agent собирает один services.html с Tailwind через CDN. Форма уходит в Formspree (до 50 заявок в месяц бесплатно), публикация — через Vercel Drop или htmlpub. На телефоне проверяете ширину 360 px до того, как дадите ссылку наружу.
Предприниматель попросил Agent «сделай страницу услуг» без правил — Cursor создал Next.js и package.json. Через час редактор закрыли. Agent (ИИ-помощник, Ctrl+I) тянет к фреймворкам, если не сказать «один HTML». На форуме Cursor в июле 2026 правила с alwaysApply: true иногда не подключаются сами — ограничения «без React, без npm» дублируйте в промпте.
Выберите структуру страницы услуг под ваш бизнес
Страница сайта услуги — витрина на 3-6 карточек, не каталог на сотню позиций. По чек-листам 2026 года коммерческий блок отвечает за десять секунд: что делаете, для кого, сколько стоит, как заказать. Оформление страницы услуги и её структура — два запроса, которые люди ищут вместе (74 и 47 показов в Wordstat), поэтому блоки лучше продумать до промпта в Agent.
Минимальный каркас для салона, репетитора или мастера на дому:
- Hero — заголовок H1, подзаголовок с УТП и кнопка «Оставить заявку» к форме ниже.
- Сетка карточек — название услуги, цена «от … ₽», 2-3 буллета выгод, иконка (лучше inline SVG, без внешних картинок-заглушек).
- Как работаем — три шага: заявка → созвон → результат.
- FAQ — 5-7 коротких вопросов про сроки, оплату, выезд.
- CTA с формой — имя, телефон, комментарий; кнопка дублируется в hero и после карточек.
| Блок | Зачем клиенту | Что написать в брифе Agent |
|---|---|---|
| Hero | Понять за 5 секунд, куда попал | Ниша + главное обещание + кнопка к форме |
| Карточки услуг | Сравнить варианты и цену | 3-6 услуг с «от … ₽» и буллетами |
| FAQ | Снять возражения без звонка | Реальные вопросы из переписок с клиентами |
| Форма | Оставить заявку с телефона | Имя, телефон, чекбокс согласия на обработку данных |
Запрос «страница сайта услуги» в Wordstat (702 показа/мес) часто смешивают с госпорталами — здесь речь о лендинге салона, репетитора или мастера на дому.
Настройте правило landing.mdc, чтобы Agent не создал React
Tailwind CDN подключает стили одной строкой в HTML, без сборки. Без правил Agent тянет к Next.js — как в шаблонах cursorrules на GitHub. Используйте landing.mdc и зафиксируйте стек в правиле.
- Создайте папку, откройте в Cursor (cursor.com/download, Hobby Free без карты на старте).
- В .cursor/rules/ файл landing.mdc с alwaysApply: true.
- Текст правила: один services.html, Tailwind CDN, без package.json, React и терминала.
- Сделайте копию ограничений в первом сообщении Agent.
- Лишние файлы — откат через checkpoint и промпт «оставь один HTML».
Базовый лендинг — в гайде без кода; здесь фокус на карточках и прайсе.
Соберите секции в Agent: от брифа до services.html
Мастер по маникюру в четверг вечером собирает витрину как листовку: правило → бриф → промпт в Agent (Ctrl+I / Cmd+I). В брифе: ниша и город, 3-6 услуг с «от …», контакты, светлая тема и крупные кнопки на мобилке.
Пример промпта для Agent:
Создай services.html для [ниша]. Секции: hero с H1 и кнопкой «Оставить заявку», сетка из 4 карточек услуг (иконка SVG inline, название, от 5 000 ₽, 3 буллета), блок «Как мы работаем» (3 шага), FAQ из 6 вопросов, форма имя+телефон+комментарий. Tailwind CDN. Один файл, мобильная вёрстка, светлая тема. Без npm и React.
Откройте файл двойным кликом в браузере. Типичная ошибка — пустые alt у иконок и битые placeholder-картинки; избегайте внешних заглушек, в шаблонах awesome-cursorrules для лендингов советуют alt сразу. Попросите Agent: «добавь осмысленный alt к каждой иконке карточки». Дизайн страницы услуги на старте — светлый фон и читаемый шрифт, без тяжёлых декоративных фото.
Подключите приём заявок без своего сервера
Formspree принимает данные формы и шлёт на почту без хостинга. Free: 50 заявок в месяц, история 30 дней, до двух email для уведомлений (help.formspree.io, июль 2026). Форма «для красоты» — вторая частая боль: кнопка есть, письма не приходят.
- На formspree.io создайте форму, скопируйте action URL.
- В form вставьте action и method=»POST».
- Проверьте поля name у имени, телефона и комментария.
- Отправьте тестовую заявку — письмо должно прийти за минуту.
- Свыше 50 заявок в месяц — платный тариф или Make webhook в Google Таблицу или Telegram.
Make — no-code workflow автоматизации, цепочка «форма → уведомление в мессенджер». Для первого вечера достаточно Formspree; Telegram-боты и таблицы подключите позже, когда поток заявок вырастет.
Проверьте мобилку и опубликуйте страницу в интернет
Используйте Chrome DevTools (F12): включите режим устройства, ширина 360-400 px. Кнопка заявки и цены читаются без горизонтального скролла — иначе клиенты закрывают вкладку. Мелко — выделите блок и Ctrl+K: «крупнее кнопка и отступы на mobile».
Публикация без Git и терминала:
- Vercel Drop — папку с HTML на vercel.com/drop, https-ссылка за минуты.
- htmlpub.com — вставка self-contained HTML, live URL ~60 секунд.
- WordPress — блок «Произвольный HTML» на странице /uslugi, если сайт уже на WP.
Схема вечера:
Правило landing.mdc → бриф услуг → Agent и services.html → тест Formspree → проверка 360 px → Vercel Drop или htmlpub → ссылка в мессенджер себе и коллеге
Meta title и description для поиска настраиваются в head HTML — подробнее в гайде meta-теги SEO страницы в Cursor.
Пройдите чек-лист из 15 пунктов перед публикацией
Финальный прогон — чеклист из 15 пунктов карточки темы. Отметьте перед публикацией:
- Один H1, логичные H2 по блокам страницы.
- Alt-текст у каждой иконки и картинки карточки.
- Title и meta description с нишей и городом в head.
- Meta viewport для корректной мобилки.
- Тестовая заявка дошла на почту или в таблицу.
- Нет тяжёлых фото — страница грузится за пару секунд.
- Контакты совпадают с тем, что в мессенджере клиентам.
- Телефон кликабельный через tel: в ссылке.
- На всех карточках цена «от …», не пустое «уточняйте».
- Кнопка «Оставить заявку» встречается минимум три раза.
- Чекбокс согласия на обработку персональных данных у формы.
- Favicon по желанию; Open Graph — если делите ссылку в соцсетях.
- Проверка ширины 360 px без горизонтального скролла.
- Публичная https-ссылка открывается с телефона без логина.
- Один файл services.html открывается локально двойным кликом.
Как понять, что всё сработало: в папке самодостаточный HTML с Tailwind CDN; на 360-400 px карточки не ломаются; тестовая заявка пришла; есть https-ссылка, которую отправили коллеге с телефона. Воронку заявок дальше можно связать с Make — в курсе на kv-ai.ru (5 800 ₽/мес, 159+ уроков) разбирают webhook без кода. Для первой витрины услуг хватит вечера с Cursor и Formspree.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: cursor.com/docs/rules, help.formspree.io, vercel.com/docs/deployments; структура услуг — seojazz.ru; Wordstat «страница сайта услуги» 702/мес, «cursor ai сайт» 150/мес (2026-07-03).
Частые вопросы
Можно ли сделать страницу услуг в Cursor без программиста?
Да. Откройте Agent, задайте правило landing.mdc и попросите один services.html с Tailwind CDN. Код писать руками не нужно — правите текстом на русском и проверяете результат в браузере.
Какая структура страницы услуг нужна в 2026 году?
Hero с УТП, сетка 3-6 карточек с ценой «от …», блок «как работаем» из трёх шагов, FAQ на 5-7 вопросов и форма заявки внизу. Так страница отвечает и людям, и нейропоиску.
Как оформить карточки услуг, чтобы их читали с телефона?
Название, цена «от», 2-3 короткие выгоды и кнопка к форме. Иконки — inline SVG с alt-текстом. На практике одна карточка — один экран на мобилке, без мелкого шрифта.
Хватит ли Formspree бесплатно для старта?
На Free — до 50 заявок в месяц и история 30 дней. Для салона или репетитора на запуске обычно достаточно; счётчик смотрите в кабинете Formspree.
Vercel Drop или WordPress — что выбрать?
Drop или htmlpub — если нужна ссылка сегодня вечером без админки. WordPress — если сайт уже там и вы вставляете готовый HTML в страницу услуг.
Почему Agent создал много файлов и package.json?
Не было явного правила и повтора в промпте. Добавьте landing.mdc, удалите лишнее через checkpoint и сформулируйте: «только один HTML, без npm и React».
Нужен отдельный services.html или секция на главной?
Оба варианта рабочие. Для SEO услуг и рекламы удобнее отдельная страница или адрес /uslugi — проще дать прямую ссылку в объявлении.
