Сайт под СЕО "генератор промптов" с нуля в Cursor: от пустой папки до деплоя за час
И так начнем
Видео со всеми шагами — смотреть тут YT: ссылка
(В статье — конспект и дополнения; полная пошаговая демонстрация в видео.)
О чём видео/пост
В прошлом ролике я собрал SEO-проект за ~6 часов. В этом — повторяю подход: делаю простой веб-сервис-генератор промптов (бесплатный), который:
- на главной показывает поле «введите идею» → возвращает готовый промпт (модель GPT-5, по смыслу — актуальную GPT-модель);
- имеет тёмную тему, плавные градиенты и аккуратный лендинг с блоками.
Задача — показать реальный цикл: от чистой папки → до продакшена. Без «полировки пикселей», но с рабочей логикой.
Почему начинаю с текста для Cursor
Cursor отлично работает, когда вы формулируете краткое ТЗ человеческим языком:
- что делает приложение (формулировка ценности),
- из каких секций состоит лендинг,
- какую архитектуру ожидаете (React/TSX, компоненты Header/Footer),
- где будут секреты (.env с ключом OpenAI),
- какой стиль (цвета/шрифты/иконки).
Большие проекты — всегда с документацией (архитектура, user flow, таблицы БД).Небольшие демо — можно сразу собирать и дописывать доку финальным блоком.
Архитектура «на салфетке»
- Фреймворк: React (TSX).
- Компоненты: Header (плавающий «островок» как «чёлка» у iPhone), Footer — отдельные компоненты, чтобы переиспользовать на других страницах.
- Секции лендинга: главный экран с формой генерации, «Зачем», «Как это работает», «Примеры», «FAQ».
- Стили: тёмная тема, современный грид, мягкие градиенты, иконки.
- Секреты: .env с OPENAI_API_KEY.
Сборка в Cursor: как это выглядит по шагам
- Пишу промпт коду: «Сделай бесплатный генератор промптов… вот список секций… React+TSX… отдельные компоненты… тёмная тема…».
- Cursor генерит проект: страницы, компоненты, зависимости, инструкции.
- Устанавливаем пакеты, создаём .env, вставляем ключ OpenAI.
- Локальный запуск: проверяю рендер, формы, вызовы модели.
- Микроисправления: иногда Cursor кладёт всё «в один файл» — прямо просим вынести в компоненты, он правит.
Отладка «по-человечески»
Ошибки будут. Нормально.
Мой паттерн:
- Скриню ошибку/логи и кидаю их в Cursor: «вот это и вот здесь».
- Просим ничего лишнего не трогать (например, модель), а точечно исправить файлы/конфиги.
- Если зависли — новый короткий промпт/чат только с фактом ошибки и контекстом.
Деплой на Vercel через GitHub
- git init → commit → push в репозиторий.
- В Vercel — импорт проекта из GitHub.
- В Environment Variables добавляю OPENAI_API_KEY.
- Vercel делает build & deploy. Любая правка → commit/push → автопересборка.
- Подключаю свой домен, если нужно.
Лайфхак: если в деплое непонятная ошибка — заскриньте, приложите в Cursor, попросите найти и исправить конкретное место (иногда правка в vercel.json/конфигах).
Что допилить после «первого взлёта»
- UI-правки: порядок блоков, отступы, анимации, позиция формы (часто удобнее поднимать выше).
- Тексты: дать модели переписать маркетингово, потом вручную довести.
- Примеры промптов: 5–10 реальных кейсов.
- SEO-базу: метатеги, sitemap, robots, микроразметка.
- CMS для блога: Strapi или аналог — чтобы публиковать статьи без коммита кода.
Привычки, которые экономят нервные клетки
- Частые коммиты: сломалось — откатились на предыдущую рабочую версию.
- Короткие итерации: один правочный промпт → проверка; не копите изменения.
- Ошибки — не враги: важнее уметь искать решение, чем помнить все конфиги.
Итог
За один вечер можно получить рабочий MVP: поле ввода идеи → готовый промпт, аккуратный лендинг, вызов модели, деплой на Vercel. Дальше — доводим UI, тексты, SEO и подключаем блог.
Если хотите глубже — в видео вся пошаговая сборка.
-----
Мой телеграм - перейти
Мой youtube - перейти