Алина, SMM-щик, попросила Cursor «сделать лендинг для курса». Agent развернул Next.js, в терминале попросил npm install — красный текст, программа закрыта. Так рождается миф: cursor ai сайт только для программистов, а создать лендинг без кода нельзя. Боль не в Cursor, а в том, что агент тянет тяжелый стек. За вечер соберете index.html, проверите в браузере, подключите форму и получите публичную ссылку — без npm и терминала.
Лендинг в Cursor — один index.html со стилями через Tailwind CDN, правило в .cursor/rules/landing.mdc и Agent (Ctrl+I), который правит файлы по брифу. Заявки идут на почту через Formspree, публикация — папкой на vercel.com/drop. Hobby Cursor бесплатен; 12 июня 2026 Vercel запустил Drop — URL без Git и командной строки.
Запрос «cursor ai сайт» в июне 2026 почти пуст в выдаче, а «создать лендинг» — 2 141 показ в месяц; «как пользоваться cursor ai» — 146, «создать лендинг бесплатно» — 488. Большинство гайдов пишут про npm и MCP, не про фрилансера, который описывает услугу словами и скидывает ссылку клиенту. Cursor — форк VS Code с ИИ: не конструктор блоков как Tilda, а редактор, где Agent видит папку и меняет файлы. Для первого одностраничника это ближе к презентации в браузере, чем к курсу веб-разработки — если задать границы заранее.
| Критерий | Конструктор (Tilda) | Cursor + index.html |
|---|---|---|
| Вход | Блоки и шаблоны | Текстовый бриф в Agent |
| Кастом | В рамках темы | Любая верстка, правка фразой |
| npm | Не нужен | Не нужен с правилом landing.mdc |
| Старт | Бесплатно с брендингом | Cursor Hobby — free, без карты |
Итоговый вердикт: конструктор быстрее для типового лендинга. Cursor — когда нужна уникальная страница и правки промптами, а не ручной CSS.
Подготовьте пустую папку и войдите в Cursor на тарифе Hobby
Типичная ошибка — открыть Cursor в папке со старым package.json. Agent снова предложит npm install. На второй попытке Алина задала правило «только index.html» — и через 40 минут отправила тестовую заявку себе на почту. Повторите ее путь: создайте папку my-landing, File — Open Folder. Скачайте Cursor с cursor.com, войдите в аккаунт. Hobby — бесплатный, карта не нужна; на один лендинг за вечер лимитов Agent обычно хватает. Точные цифры лимитов не публикуются — расход смотрите в Dashboard.
- Шаг 1: Создайте пустую папку.
- Шаг 2: Установите Cursor и войдите в аккаунт.
- Шаг 3: Open Folder — выберите эту папку.
- Шаг 4: Убедитесь, что нет package.json и node_modules.
- Шаг 5: Тему из VS Code импортируйте по желанию.
Делайте: чистая папка. Не делайте: открывать React-репозиторий «на всякий случай».
Зафиксируйте правила в landing.mdc, чтобы Agent не тянул npm
Agent по умолчанию создает React или Next.js. Решение — .cursor/rules/landing.mdc с alwaysApply: true. Cursor читает файл при каждом запросе. По cursor.com/docs/rules правила лежат в .cursor/rules/*.mdc с YAML-шапкой.
Шаблон landing.mdc:
—
alwaysApply: true
—
Только index.html в корне. Стили через Tailwind CDN. Без package.json, npm, React, Next.js, сборщиков и терминала.
На практике агент перестает разворачивать тяжелый стек. Правки остаются в одном файле — например, кнопку CTA меняете фразой «сделай синей и крупнее», а не ищете тег в сотне строк. Если появились лишние файлы — удалите и напомните правило. Tailwind CDN подключается одной строкой в head: это библиотека готовых классов для отступов и сетки, без отдельной установки.
Откройте Agent (Ctrl+I) и опишите бриф из пяти блоков
Chat отвечает текстом, Agent меняет файлы. Ctrl+I (Cmd+I на Mac), меню режимов Ctrl+., выберите Agent, не Ask. Лендинг — одна страница и одно действие: заявка или запись.
Схема: папка — landing.mdc — Ctrl+I — Agent — бриф — index.html — двойной клик в браузере
- Ниша и оффер одной фразой.
- Hero: заголовок, подзаголовок, текст кнопки.
- Три преимущества короткими пунктами.
- Обо мне: имя и два предложения доверия.
- Форма: имя, email, сообщение; тон и цвета.
Добавьте: «mobile-first, русский, один index.html, Tailwind CDN». Черновик — 15-30 минут. Сначала каркас, потом косметика короткими промптами. Не просите сразу анимации и десять секций — лендинг 2026 держится на hero, трех выгодах, доверии и форме. Оффер в hero должен отвечать на вопрос «что я получу, нажав кнопку».
Проверьте index.html в браузере и поправьте блоки одной фразой
Двойной клик по index.html открывает страницу в Chrome или Firefox. Проверьте hero и кнопку. Сожмите окно до 375 px или включите мобильный режим в DevTools (F12).
В реальном проекте здесь всплывает кривая мобилка: кнопка у края, длинный заголовок. Напишите в Agent: «увеличь отступ кнопки», «сократи заголовок hero», «добавь иконки к преимуществам». Одно изменение за раз.
Делайте: F5 после правки. Не делайте: копировать HTML в Chat — Agent уже видит файл.
Подключите Formspree и поймайте тестовую заявку на почту
HTML сам письма не шлет — нужен Formspree. Регистрация на formspree.io, New Form, endpoint https://formspree.io/f/xxxxxxxx. Попросите Agent: «Подключи форму к endpoint …, method post, у input атрибут name». Без name поля не попадут в письмо — частая ошибка. Отправьте тест и проверьте спам.
С file:// форма иногда глючит — после Vercel Drop по HTTPS работает стабильнее. Formspree на бесплатном плане ограничивает число заявок в месяц — для теста курса или услуги этого достаточно; при росте трафика тариф можно сменить без переписывания всей страницы.
Опубликуйте папку через Vercel Drop и пройдите чеклист
Клиенту нужна ссылка, а не файл на диске. 12 июня 2026 Vercel анонсировал Drop: vercel.com/drop, перетащите папку с index.html, Deploy — live URL с HTTPS за пару минут. Git, CLI и npm не нужны. Каждый drop создает новый проект; для обновления перетащите папку снова или позже освоите GitHub Pages как альтернативу.
- Шаг 1: В head есть title и description, форма протестирована.
- Шаг 2: Папка на vercel.com/drop, Deploy.
- Шаг 3: Откройте ссылку с телефона.
- Шаг 4: Вторая тестовая заявка с боевого URL.
- Шаг 5: Сохраните ссылку клиенту.
Критерии успеха простые: в папке лежит один рабочий index.html; в Chrome и Firefox hero и форма читаются на ширине 375 px; тестовая заявка пришла на email; ссылка vercel.app открывается с телефона; следующую правку вы формулируете одной короткой фразой в Agent, без ручного HTML. Итог: лендинг как готовый макет, который можно показать клиенту в тот же вечер.
Дальше имеет смысл подтянуть GEO-оптимизацию страницы, чтобы нейропоиск видел четкую структуру заголовков. Когда освоите базовый лендинг, можно подключить MCP в Cursor — это «розетки» для браузера и документации, необязательны на старте. Образец оформления текста под поиск — в примере SEO-статьи (B01, href после публикации на mayai.ru). Если захотите собирать воронки и ботов тем же принципом «описал — получил», загляните на курс Make.com и вайбкодинга — первые занятия для новичков бесплатны.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: тарифы Cursor — cursor.com/pricing; правила — cursor.com/docs/rules; Formspree — formspree.io/html; Vercel Drop (12.06.2026) — vercel.com/docs/drop; частотность запросов — Яндекс Вордстат на 24.06.2026.
Частые вопросы
Можно ли пользоваться Cursor AI бесплатно для лендинга?
Да. Hobby на cursor.com/pricing — free, без карты. На один index.html за вечер обычно хватает. Pro — 20 долларов в месяц при исчерпании лимита.
Как пользоваться Cursor AI, если я не программист?
Откройте пустую папку, создайте landing.mdc, нажмите Ctrl+I, выберите Agent и опишите страницу на русском: ниша, hero, выгоды, форма. Проверка — двойной клик по index.html в браузере. Это сценарий «описал услугу — получил макет», без зубрежки HTML-тегов.
Нужен ли npm для лендинга в Cursor?
Нет с правилом один index.html и Tailwind CDN. npm появляется, когда Agent уходит в React — landing.mdc это отсекает.
Чем Agent отличается от Chat в Cursor?
Chat отвечает текстом. Agent создает и правит файлы, может предлагать терминал — отклоняйте. Для лендинга держите Agent и правило без npm.
Как сделать лендинг с помощью ИИ бесплатно?
Cursor Hobby + Formspree free + Vercel Drop. Платите только за свой домен, если нужен адрес вместо vercel.app.
Почему форма не отправляется?
Проверьте name у полей, method post, action на formspree.io. Тестируйте на URL после Drop, не только с диска.
Что делать, если Agent снова создал React?
Удалите лишнее, усильте landing.mdc, повторите бриф. На npm install не соглашайтесь.
