# Vibe Coding для не-разработчиков: как маркетологам, дизайнерам и PM создавать продукты с Claude и Cursor

> Практический гайд по Vibe Coding без терминала: 45 приемов работы в Claude и Cursor для маркетологов, дизайнеров и PM. От правок сайта до автоматизации рутины.

Концепция **Vibe Coding** часто воспринимается как развлечение для опытных программистов, которые устали писать бойлерплейт вручную. Однако наибольшую ценность современные AI-редакторы несут тем, кто никогда не изучал синтаксис языков программирования и не умеет работать в терминале: маркетологам, дизайнерам, UX-копирайтерам и продакт-менеджерам.

В открытом репозитории собраны 45 практических советов по преодолению технического барьера с помощью связки **Claude + Cursor**. Главный принцип всей подборки сформулирован прямо в описании: **терминал не нужен**.

[Открыть репозиторий на GitHub: baddiecodes/claude-cursor-tips-for-creatives →](https://github.com/baddiecodes/claude-cursor-tips-for-creatives)

Все материалы разделены на три логических блока:
- **25 приемов по Claude:** построение базы контекста, UX-копирайтинг, исследования, креативные брифы, итеративная доводка текстов и критика идей.
- **10 приемов по Cursor:** навигация по файлам проекта без знания кода, правка текстов прямо в репозитории, связка с no-code генераторами и локальная диагностика ошибок.
- **10 принципов AI-Workflow:** превращение разовых хаотичных промптов в стабильные, повторяемые рабочие процессы команды.

> [!NOTE]
> **Суть Vibe Coding для не-разработчика:** вы не учите JavaScript или Python ради кода. Вы используете привычный естественный язык, чтобы напрямую взаимодействовать с файлами, версткой и данными продукта.

---

## Матрица возможностей: что закрывает специалист без помощи инженера

В таблице ниже показано, как разделяются задачи между Claude и Cursor для различных продуктовых ролей:

| Роль в команде | Задачи в Claude (Генерация и Смысл) | Задачи в Cursor (Действие и Файлы) | Реальный бизнес-результат |
| :--- | :--- | :--- | :--- |
| **Маркетолог** | A/B-заголовки, тексты лендингов, брифы кампаний | Замена текстов, цен и баннеров в коде сайта | Запуск правок за 5 минут без тикетов в бэклог |
| **UX/UI Дизайнер** | Микрокопирайтинг, сценарии онбординга, TOV | Правка UI-компонентов, цветов и шрифтов | Точное соответствие макета продакшн-версии |
| **Product Manager** | Анализ требований, декомпозиция фич, PRD | Поиск логики фичи в проекте, прототипирование | Быстрая проверка гипотез без отвлечения Dev-команды |
| **Контент / Operations** | Структурирование таблиц, рерайт материалов | Скрипты массового переименования, чистка CSV | Автоматизация рутинных манипуляций с контентом |

---

## Блок Claude: 25 приемов системной работы с текстом и смыслом

Самый объемный раздел посвящен тому, как выстроить предсказуемую работу с Claude. Здесь нет абстрактных «секретных промптов» — автор предлагает строгую операционную модель.

### 1. Управление постоянным контекстом через Claude Projects
Главная ошибка начинающих — объяснять контекст своего продукта заново в каждом новом диалоге. Автор рекомендует создать тематические **Projects** под каждое ключевое направление:

- **База бренда:** tone of voice, брендбук, миссия, целевые персоны и стоп-слова.
- **Продуктовая база:** спецификации функций, текущая тарифная сетка, сегменты аудитории.
- **Библиотека референсов:** примеры лучших текстов, презентаций и прошедших согласование брифов.

При наличии постоянного контекста длина ваших промптов сокращается в 3–4 раза, а модель перестает предлагать оторванные от реальности формулировки.

### 2. Четырехчастная архитектура запроса
Для любой рабочей задачи используется минималистичный, но строгий каркас:

```text
РОЛЬ → КОНТЕКСТ → ЗАДАЧА → ФОРМАТ
```

Вместо абстрактного *«Напиши заголовки для приложения»* рабочий запрос строится так:

```text
РОЛЬ: Senior UX-копирайтер в FinTech-стартапе.
КОНТЕКСТ: Мобильный экран подтверждения перевода, где пользователь впервые сталкивается с комиссией банка.
ЗАДАЧА: Сформулировать 3 варианта предупреждающего заголовка, снимающих тревожность.
ФОРМАТ: Маркированный список до 6 слов в строке, тон спокойный и прозрачный.
```

### 3. Правило 70%: итерации вместо полных регенераций
Если Claude выдал результат, который устраивает вас на 70%, категорически не рекомендуется нажимать кнопку повторной генерации (*Retry*) или писать *«Сделай лучше»*.

Дробите доработку на микро-правки:
- *«Структуру оставь без изменений, но сократи длину каждого пункта вдвое»*.
- *«Первые два абзаца утверждаем. Перепиши только финальный призыв к действию (CTA), сделав упор на бесплатный триал»*.
- *«Тон слишком формальный. Перепиши на уровне живого диалога с коллегой»*.

### 4. Claude в роли безжалостного критика
Использовать ИИ только для генерации — значит задействовать лишь половину его потенциала. Модель отлично работает в качестве спарринг-партнера для проверки гипотез.

Перед отправкой документа стейкхолдерам протестируйте его следующими промптами:
- *«Найди 3 самых слабых аргумента в этом тексте и объясни, почему клиент нам не поверит»*.
- *«Какие скрытые возражения могут возникнуть у финансового директора при чтении этого коммерческого предложения?»*.
- *«В каком месте пользователь с наибольшей вероятностью бросит чтение этой страницы?»*.

---

## Блок Cursor: Vibe Coding без навыков разработки

Cursor представляет собой редактор кода со встроенным ИИ, который понимает всю файловую структуру вашего проекта. Для нетехнического специалиста это мост, позволяющий напрямую вносить изменения в продукт.

> [!IMPORTANT]
> **Базовое правило безопасности в Cursor:**
> Всегда начинайте запрос с фразы:
> `«Сначала объясни, что именно ты собираешься изменить и какие файлы затронешь. Ничего пока не применяй».`
> Это исключает случайную перезапись критических участков проекта.

### 1. Безопасная разведка: понимание структуры без правок
Первый шаг знакомства с проектом — режим «только чтение». Откройте папку проекта в Cursor и используйте диалоговое окно для вопросов на естественном языке:

```text
В каком файле хранится текст блока с тарифами на главной странице?
```

```text
Где задаются заголовки для экрана успешной оплаты?
```

```text
Найди все места в проекте, где упоминается старое название тарифа "Pro Basic".
```

Cursor сам просканирует сотни файлов и выдаст точные пути и номера строк, избавив вас от необходимости обращаться к разработчикам за банальными ссылками.

### 2. Прямые правки текстов и контента
Во многих современных проектах маркетинговые тексты хранятся не в громоздких CMS, а прямо в файлах конфигурации или компонентах интерфейса (файлы `.json`, `.ts`, `.html`).

Когда маркетологу требуется обновить формулировку на странице тарифов:
1. Найдите блок через поиск Cursor.
2. Выделите нужный фрагмент текста.
3. Нажмите комбинацию клавиш <kbd>Cmd</kbd> + <kbd>K</kbd> (или <kbd>Ctrl</kbd> + <kbd>K</kbd> на Windows).
4. Напишите команду: *«Замени этот текст на новый вариант, сохранив все кавычки и структуру»*.
5. Нажмите кнопку **Accept** после визуальной проверки дифф-подсветки.

### 3. Связка Lovable + Cursor: от прототипа к кастомизации
Автор репозитория предлагает мощный гибридный пайплайн для быстрого запуска посадочных страниц и интерфейсов:

```
Идея ➔ Промптинг в Lovable ➔ Экспорт в GitHub ➔ Точечная доводка в Cursor
```

1. **Lovable:** сборка каркаса лендинга или дашборда на естественном языке за 10 минут.
2. **Экспорт:** выгрузка исходного кода в репозиторий GitHub.
3. **Cursor:** открытие локальной копии проекта для тонкой настройки шрифтов, цветовых акцентов, микро-анимаций и нестандартных текстов, которые генератор не смог настроить с первого раза.

### 4. Экспресс-диагностика ошибок
Если локальная версия сайта выдает ошибку, не обязательно сразу писать в чат разработки. 

Скопируйте текст ошибки из окна браузера в чат Cursor:

```text
Я вижу следующую ошибку в браузере: [Текст ошибки]. 
Объясни простыми словами для продакт-менеджера: из-за чего это произошло и в каком файле проблема?
```

В 80% случаев проблема вызвана опечаткой в названии переменной, пропущенной запятой в JSON или битой ссылкой на изображение, что позволяет устранить ее на месте.

---

## Простые микро-автоматизации рутины без написания скриптов

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

Для этого достаточно создать пустую папку, положить туда исходные файлы и описать желаемый результат:

### Сценарий А: Пакетное переименование медиафайлов
```text
Напиши и выполни простой скрипт, который переименует все .jpg и .png файлы в этой папке. 
Новый формат: product-hero-01.jpg, product-hero-02.jpg и так далее, с сохранением исходного порядка по дате создания.
```

### Сценарий Б: Очистка и фильтрация выгрузки из CRM/Таблицы
```text
В папке лежит сырой файл export_leads.csv. 
Создай скрипт, который удалит строки без email, оставит только столбцы "Full Name", "Email", "Company" и сохранит чистый результат в clean_leads.csv.
```

### Сценарий В: Массовая конвертация изображений в WebP
```text
Сконвертируй все тяжелые PNG-файлы в этой папке в формат WebP с качеством 85% для оптимизации скорости загрузки сайта.
```

> [!TIP]
> **Лайфхак:** вам не нужно знать, как устроен Python или Bash. Cursor сам создаст скрипт, выполнит его и отчитается о количестве обработанных строк или файлов.

---

## 5 шагов построения устойчивого AI-Workflow

Главная мысль финального раздела репозитория: **ценность создает не отдельный удачный промпт, а воспроизводимый рабочий процесс**.

```
1. Контекст ➔ 2. Генерация ➔ 3. Отбор ➔ 4. Реализация ➔ 5. Проверка
```

1. **Сбор контекста:** агрегация исходных требований, аудитории, бренд-гайда и референсов в одном месте.
2. **Генерация вариантов в Claude:** создание широкого пула альтернатив (5–10 вариантов заголовков, 3 структуры блоков).
3. **Человеческий отбор:** выбор лучшего варианта на основе собственного профессионального вкуса и понимания продукта.
4. **Реализация в Cursor:** перенос утвержденного решения непосредственно в рабочие файлы проекта.
5. **Визуальная проверка:** запуск проекта и финальный контроль отображения в браузере.

### Создание личной библиотеки процессов
Если алгоритм решения задачи сработал успешно один раз, сохраните его в командную базу знаний:
- **Для маркетологов:** шаблоны проведения конкурентного анализа, сценарии прогрева, структуры продуктовых страниц.
- **Для дизайнеров:** промпты проверки контрастности и доступности (accessibility), генерация пользовательских историй (user stories).
- **Для продакт-менеджеров:** шаблоны описания фич, матрицы приоритезации гипотез, алгоритмы разбора технической документации API.

---

## Где заканчиваются границы Vibe Coding

Подход Vibe Coding убирает технический барьер для повседневных креативных и продуктовых задач, однако у него есть жесткие профессиональные границы:

> [!WARNING]
> **Где участие профессиональных инженеров остается обязательным:**
> - Архитектура баз данных и оптимизация тяжелых запросов.
> - Безопасность, шифрование и работа с конфиденциальными персональными данными.
> - Финансовый биллинг, платежные шлюзы и критическая бизнес-логика.
> - Настройка CI/CD пайплайнов, серверов и облачной production-инфраструктуры.

Правильное позиционирование Vibe Coding звучит не как *«разработчики больше не нужны»*, а как:

> **«Теперь каждый специалист в команде может самостоятельно реализовывать свои идеи в коде в 5 раз быстрее, не отвлекая инженеров по мелким операционным поводам».**