Визитка — одна страница: кто вы, чем занимаетесь и куда написать. Для первого вечера в Cursor этого хватает. Файлов мало, ошибка видна в браузере, и не нужно придумывать базу, роли и оплату.
Ниже маршрут, которым собирается такая страница с агентом: узкий первый запрос, проверка diff, потом одна правка формы. Готовый вид — на скрине. Имя на макете вымышленное, его меняете на своё.
Что лежит на странице
Герой: род занятий, имя и одно предложение. Под ним три коротких факта, не абзац «о компании». Дальше форма: имя, почта, сообщение и кнопка. Пока нет своего сервера, отправка пишет данные в консоль браузера. Так видно, что поля доезжают, и почта не уходит в чужой CRM.
Счётчики, чаты и виджеты «оставьте заявку» на этом шаге не ставьте. Их легко добавить позже, когда страница уже открывается локально и вы сами понимаете, какой скрипт подключили.
Папка и первый запрос
Новый проект — пустая папка, не домашний каталог и не рабочий стол. В Cursor откройте её через File → Open Folder. Если открыть всё сразу, агент начнёт читать чужие файлы и править не тот проект.
Первое сообщение должно помещаться в один экран. Рабочий текст такой:
Плохой вариант короче, но хуже: «сделай сайт-агентство с админкой и блогом». Агент раздует структуру, а diff вы не успеете прочитать.
После ответа откройте localhost сами. Фразу «я проверил» не считайте проверкой. Если страница белая — вставьте агенту текст ошибки из терминала, а не «не работает».
Как выглядит код главной
Один файл app/page.tsx и один app/globals.css. Герой и список фактов живут в разметке. Форма — рядом отдельным компонентом, чтобы следующий запрос не переписывал всю страницу.
На что смотреть в diff, прежде чем оставить правку:
- в
layoutнет аналитики, пикселей и чужих скриптов; - стили не разъехались по пяти CSS-модулям;
- тексты на русском, если вы просили русский;
- у кнопки формы
type="submit", это не простоdiv.
В следующем сообщении файлы указывайте через @: @app/page.tsx и @app/globals.css. Тогда агент не создаст второй page где-нибудь в src.
Форма: проверка почты
Вторая задача — одна. Не «улучши дизайн и добавь SEO». Текст: «в форме проверь email, ошибку покажи под полем, данные пока только в console.log».
includes("@") — учебная проверка, не замена нормальному разбору адреса. Для визитки её достаточно: пустое поле и слово без собаки не попадают в консоль. Сообщение об ошибке — обычный абзац под полем, не alert.
Когда это стабильно, console.log можно заменить на свой route app/api/contact/route.ts, который дописывает строку в файл на сервере. Чужой бот и таблицу на этом шаге не подключайте: токен окажется в чате агента.
Если агент уехал в сторону
Откатите лишнее и сузьте задачу. Рабочие формулировки:
- «верни форму в
app/page.tsx, отдельный пакет для валидации не ставь»; - «не добавляй базу и Prisma»;
- «кнопка под полями, ошибка — текст под полем, не модальное окно».
Если на такую правку diff больше пары файлов — не принимайте пачкой. Оставьте то, что просили, остальное отклоните.
Какие файлы нормальны
После первого запроса достаточно package.json, app/layout.tsx, app/page.tsx, app/globals.css и компонента формы. node_modules появится сам после npm install. Не оставляйте второй фреймворк, Storybook и папку pages, если просили App Router.
Имя, факты и подпись кнопки меняйте сами или отдельным запросом: «замени имя и три факта, вёрстку не трогай». Так агент не перепишет форму заодно.
Сборка и выкладка
Страница должна открываться локально и после обновления браузера. Затем в терминале проекта: npm run build.
Зелёная сборка — повод выкладывать, не раньше. На VPS маршрут тот же, что в гайде деплой Next.js на Beget: процесс, nginx, сертификат. В rules заранее запишите запрет на аналитику и чужие ключи — коротко, как в правилах и агентах.
Если Cursor ещё не стоит, начните с как начать работу, а визитку откройте следующим вечером.