🎯 О чём этот конспект: Пошаговое руководство по превращению Cursor в мощный инструмент для создания IT-продуктов. Разбираются основы установки, продвинутые настройки агента, работа с правилами (cursorrules), использование MCP-серверов и создание фронтенда по скриншоту.

👤 Кому будет полезно: Вайбкодерам любого уровня — от новичков, желающих собрать первый SaaS, до опытных разработчиков, переходящих на AI-native разработку.

✨ Что получите: Готовую к работе среду Cursor с оптимальными настройками моделей, безопасности и автоматизации, а также понимание того, как генерировать код на основе визуальных референсов.

1. Оптимальная конфигурация моделей и режимов

Контекст: Cursor — это не просто чат, а полноценная IDE (на базе VS Code), где AI имеет доступ к вашим файлам. Для достижения наилучших результатов важно правильно выбрать «мозг» системы. Автор подчеркивает, что выбор модели напрямую влияет на логику и отсутствие багов в сложных проектах.

Выгода: Экономия времени на исправление галлюцинаций AI и получение более чистого кода с первой попытки.

Как применить:

• Шаг 1: Выбор модели — В настройках (Settings > Models) оставьте включенными только Claude 3.7 Sonnet (наиболее надежная для кодинга) и, опционально, Gemini 2.0 Pro. Остальные модели можно отключить для стабильности.
• Шаг 2: Режим Agent — Всегда используйте режим Agent (в панели чата) для написания нового кода. Он умеет самостоятельно создавать файлы, запускать терминал и исправлять свои ошибки.
• Шаг 3: Настройка Auto-run (YOLO mode) — В Cursor Settings > Features найдите Enable auto run mode.
  • Включите, если вы опытны и хотите, чтобы агент сам выполнял все шаги без подтверждения.
  • Выключите, если вы новичок и хотите контролировать каждое изменение в коде.

Результат: Предсказуемое поведение AI-агента, использующего самую мощную модель на рынке.

2. Использование .cursorrules для контроля качества

Контекст: Без четких инструкций AI может писать код вразнобой. Файл .cursorrules (или глобальные правила в настройках) задает «личность» и стандарты разработки для агента: какие библиотеки использовать, как называть переменные и какой архитектуры придерживаться.

Выгода: Единообразие кода во всем проекте и автоматическое соблюдение Best Practices без лишних промптов.

Как применить:

• Шаг 1: Создание файла — Создайте в корне проекта файл .cursorrules или добавьте правило в Cursor Settings > General > Rules for AI.
• Шаг 2: Использование готовых шаблонов — Перейдите на сайт cursor.directory, выберите свой стек (например, Next.js + Tailwind) и скопируйте готовый набор правил.
• Шаг 3: Пример промпта для правил — Вставьте в файл инструкции следующего типа:

You are an expert in TypeScript, Node.js, Next.js App Router.
Key principles:
- Use Tailwind CSS for styling.
- Follow Google's Material Design principles.
- Use naming conventions: camelCase for variables, PascalCase for components.
- Ensure all components are functional and use Hooks.

Результат: Агент перестает предлагать устаревшие решения и пишет код строго под ваш стек.

3. Безопасная архитектура и быстрый старт проекта

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

Выгода: Защита ваших финансов (API-ключей) и возможность опубликовать сайт одной кнопкой.

Как применить:

• Шаг 1: Инициализация через промпт — Откройте пустую папку в Cursor и в режиме Agent введите промпт:

Set up my project in Next.js connecting to Supabase and using .env.local to securely store my environment details and keys. For deployment on Vercel, ensure adequate dependencies and versions. Create a .gitignore file to exclude .env.local.

• Шаг 2: Настройка БД — Следуйте инструкциям агента: создайте проект в Supabase, получите URL и API-ключ, вставьте их в созданный файл .env.local.
• Шаг 3: Проверка — Убедитесь, что агент создал файл .gitignore, где прописан .env.local.

Результат: Готовый каркас приложения с настроенной базой данных и защищенными ключами.

4. Фронтенд по скриншоту (Image-to-Code)

Контекст: Cursor обладает мощным зрением. Вместо того чтобы описывать интерфейс словами, вы можете просто показать ему картинку или макет из Figma.

Выгода: Сокращение времени на верстку UI в 10 раз.

Как применить:

• Шаг 1: Загрузка изображения — Перетащите скриншот (PNG/JPG) прямо в окно чата Cursor.
• Шаг 2: Промпт для генерации — Напишите короткую инструкцию:

Create a page similar to this image using Next.js and Tailwind CSS. Ensure it's responsive and includes all functional elements like the sidebar and chat input as seen in the screenshot.

• Шаг 3: Итерация — Если результат не идеален, выделите область кода или сделайте новый скриншот с правками и попросите исправить.

Результат: Готовый, стилизованный код фронтенда, максимально похожий на ваш референс.

5. Работа с MCP (Model Context Protocol)

Контекст: MCP — это протокол, который позволяет AI-моделям подключаться к внешним инструментам (Google Search, Slack, базы данных) напрямую. Это превращает Cursor из «писателя кода» в «операционную систему», которая видит актуальные данные из интернета.

Выгода: Возможность давать агенту доступ к актуальной документации или вашим данным в реальном времени.

Как применить:

• Шаг 1: Настройка — Перейдите в Settings > Features > MCP.
• Шаг 2: Добавление сервера — Вы можете добавить готовые сервера (например, для поиска в Google или работы с Supabase). Ссылки на них также можно найти на cursor.directory.
• Шаг 3: Использование — Теперь в чате агент сможет сказать: «Я поищу актуальную версию библиотеки в сети» или «Я проверю структуру таблиц в твоей базе данных через MCP».

Результат: AI-агент с расширенными возможностями, выходящими за рамки простого редактирования текста.

FAQ

В: В чем разница между Cursor и обычным VS Code? О: Cursor — это форк VS Code, в который на уровне ядра интегрированы AI-функции. В отличие от плагинов (типа Copilot), Cursor понимает весь контекст вашего проекта, может создавать файлы, исправлять ошибки в терминале и «видеть» изображения.

В: Что делать, если Cursor «сошел с ума» и начал портить код? О: Используйте функцию Restore Checkpoint в окне чата. Это позволяет откатить все изменения, сделанные агентом за текущую сессию, к определенному моменту времени.

В: Нужно ли платить за API-ключи Claude или OpenAI отдельно? О: Если вы на подписке Pro ($20/мес), вы используете 500 быстрых запросов в месяц через инфраструктуру Cursor. Свои ключи вводить не обязательно, но такая возможность есть, если лимиты закончатся.

В: Как запустить созданный проект, чтобы посмотреть результат в браузере? О: Введите в терминале Cursor команду npm run dev (для Next.js). Агент обычно сам предлагает это сделать и даже дает ссылку (localhost:3000).

В: Можно ли в Cursor создавать мобильные приложения? О: Да. Автор показывает пример: создайте проект в Xcode (для iOS), затем откройте эту папку в Cursor. Агент сможет писать код на Swift и помогать с архитектурой приложения так же, как и с веб-сайтами.

Конспект создан на основе видео «Cursor AI Setup for Success (2025)» канала Alex Northstar. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=cE84Q5IRR6U