🎯 О чём этот конспект: Пошаговое руководство по созданию полноценного Micro-SaaS продукта (на примере конвертера HTML в PDF) без навыков программирования. В видео разбирается связка VS Code + Claude Code для автоматической генерации кода, настройки VPS-сервера и мгновенного деплоя в сеть.

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

✨ Что получите: Готовый алгоритм: от покупки сервера до работающего веб-сервиса с SSL-сертификатом, созданного исключительно с помощью AI-агентов.

1. Подготовка инфраструктуры и домена

Контекст: Для того чтобы ваш сервис был доступен пользователям, его нужно разместить на удаленном сервере (VPS) и привязать к домену. Автор использует хостинг Beget, так как он позволяет быстро создавать поддомены и автоматически направлять их на нужный IP-адрес. Это критически важный этап, так как Claude Code будет работать напрямую с сервером через SSH, настраивая окружение в реальном времени.

Выгода: Экономия времени на ручной настройке Nginx, SSL и окружения — AI сделает это за вас.

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

• Шаг 1: Создание VPS — Зайдите на Beget (или любой аналог), создайте виртуальный сервер на базе Ubuntu (самый дешевый тариф подойдет). Обязательно сохраните IP-адрес и пароль root.
• Шаг 2: Настройка домена — В панели управления доменами создайте поддомен (например, converter.yourdomain.ru) и направьте его на IP вашего нового сервера.
• Шаг 3: Установка VS Code — Скачайте и установите Visual Studio Code.

Результат: У вас есть "чистый" сервер и адрес, по которому скоро откроется ваш сервис.

2. Настройка Claude Code в VS Code

Контекст: Claude Code — это продвинутый AI-агент, который живет внутри вашего редактора кода. В отличие от обычного чата, он может читать файлы, создавать их, выполнять команды в терминале и деплоить код. Для работы необходима подписка Claude Pro ($20/мес), так как работа через API (Pay-as-you-go) может выйти значительно дороже из-за огромного контекста.

Выгода: Вы получаете полноценного "автономного разработчика", который сам исправляет свои ошибки.

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

• Шаг 1: Установка расширения — В VS Code перейдите во вкладку Extensions (Ctrl+Shift+X), введите Claude Dev (или актуальное название плагина Claude) и нажмите Install.
• Шаг 2: Авторизация — Нажмите на иконку Claude, выберите способ подключения через браузер. Если используете Яндекс.Браузер и возникла ошибка, скопируйте URL авторизации в Chrome.
• Шаг 3: Выбор режима — Для полной автоматизации выберите режим Bypass Permissions (режим "фигач"). В этом режиме агент не будет спрашивать разрешение на каждую команду в терминале.

Результат: Среда разработки готова к приему команд.

3. Генерация идеального промпта через Claude

Контекст: Чтобы AI построил качественный сервис, ему нужно подробное ТЗ. Лучший способ составить ТЗ для нейронки — попросить саму нейронку его написать. Автор использует скриншоты существующего сервиса-аналога, чтобы Claude понял желаемый UI/UX.

Выгода: Исключение ошибок в структуре проекта и логике работы приложения.

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

• Шаг 1: Сбор референсов — Сделайте скриншоты сервиса, который хотите скопировать (дизайн, формы, кнопки).
• Шаг 2: Генерация ТЗ — В обычном чате Claude (web-версия) отправьте скриншоты и промпт:

Я пришлю тебе скриншоты сервиса. Мне нужен подробный промпт для Claude Code, чтобы создать такой же микро-SaaS. Учти структуру проекта, необходимые библиотеки и функционал. Я позже передам агенту доступы к серверу. Напиши максимально детальное ТЗ для AI-разработчика.

• Шаг 3: Копирование результата — Сохраните полученный "здоровый" промпт для использования в VS Code.

Результат: У вас на руках профессиональное техническое задание, понятное AI-агенту.

4. Автоматическая сборка и деплой на сервер

Контекст: Теперь мы объединяем всё воедино. Мы даем Claude Code промпт и доступы к серверу. Агент сам зайдет по SSH, установит Node.js/Python, настроит веб-сервер и выпустит SSL-сертификат.

Выгода: Полностью рабочий сервис в сети через 5-10 минут без единой строчки кода, написанной вручную.

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

• Шаг 1: Запуск агента — Вставьте сгенерированный промпт в чат Claude в VS Code.
• Шаг 2: Передача доступов — Когда агент запросит данные, предоставьте их в формате:

IP: [Ваш IP]
User: root
Password: [Ваш пароль]
Domain: converter.yourdomain.ru
Задача: Разверни сервис на этом сервере, установи SSL (Certbot), настрой Nginx. Сохраняй все файлы локально и на сервере.

• Шаг 3: Контроль процесса — Наблюдайте за терминалом. Если агент "завис" более чем на 5 минут, нажмите Stop и отправьте запрос повторно.

Результат: Ссылка на ваш работающий сервис с замочком (HTTPS) в адресной строке.

5. Управление памятью и масштабирование

Контекст: Если вы планируете запускать несколько SaaS на одном сервере, важно научить агента не "затирать" старые проекты. Для этого используется файл memory.md, где фиксируются порты и пути текущих проектов.

Выгода: Возможность держать 5-10 микро-сервисов на одном дешевом VPS.

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

• Шаг 1: Инструкция по памяти — Напишите агенту:

Запомни, что на этом VPS будут еще проекты. Когда разрабатываешь и тестируешь, не отключи по ошибке другой проект. Проверь занятые порты. Запиши это в свою долгосрочную память (memory.md).

• Шаг 2: Использование плагинов — Для улучшения дизайна используйте плагин Frontend Design внутри Claude Code. Просто попросите: "Сделай дизайн более современным, добавь логотип и переведи интерфейс на русский".
• Шаг 3: Смена моделей — Для простых правок используйте модель Claude 3.5 Sonnet (быстро и дешево), для сложной архитектуры — Claude 3 Opus.

Результат: Стабильная инфраструктура для множества ваших проектов.

FAQ

В: Можно ли использовать бесплатную версию Claude для этого?

О: Теоретически можно через API, но автор крайне рекомендует подписку Pro за $20. При работе с кодом контекст быстро растет, и в режиме API вы можете потратить $20 за один вечер, в то время как подписка дает фиксированный лимит.

В: Что делать, если Claude выдает ошибку в терминале при установке библиотек?

О: Ничего делать не нужно. В режиме "Bypass Permissions" агент сам видит ошибку в терминале, анализирует её и пробует другой способ установки или исправляет конфиг. Просто подождите.

В: Как добавить оплату (биллинг) в мой SaaS?

О: Вы можете попросить Claude интегрировать API Stripe или CryptoPay. Просто добавьте в промпт: "Добавь интеграцию с платежной системой [Название] и создай личный кабинет пользователя".

В: Безопасно ли давать root-пароль от сервера нейронке?

О: Для микро-проектов это допустимо. Однако для серьезных задач рекомендуется создавать отдельного пользователя с ограниченными sudo-правами. Но для быстрого старта "вайбкодинга" root — самый простой путь.

В: Что если лимиты Claude Pro закончатся в процессе деплоя?

О: Claude предложит "компактный" отчет (Compact). Скопируйте его, подождите обновления лимитов (обычно несколько часов), вставьте отчет в новый чат, и агент продолжит ровно с того места, где остановился.

Конспект создан на основе видео «Как создать свой Micro-SaaS за 20 минут с помощью Claude Code» канала Константин (SupaBots). Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/lobGelUy4r4