Памятка: Первые шаги в вайб-кодинге

1 Выбираем AI-ассистента

Начните с выбора подходящего AI-ассистента для генерации кода:

DeepSeek / DeepChat

Бесплатный, отлично понимает контекст, хорош для сложных задач

ChatGPT / Claude

Мощные модели, могут требовать подписку для полного доступа

Совет

Начните с бесплатных вариантов (DeepSeek). Если нужна более сложная логика — пробуйте ChatGPT.

2 Формулируем запрос правильно

Качество кода напрямую зависит от качества запроса. Используйте структуру:

Контекст: Объясните, что вы хотите создать
Технологии: Укажите языки, фреймворки
Требования: Опишите функционал подробно
Дизайн: Укажите цвета, шрифты, макет
Особенности: Отметьте важные нюансы

// Пример хорошего запроса:

"Создай код для диалогового тренажера для фармацевтов на HTML, CSS и JavaScript.

Требования:

- Интерактивный диалог клиент-фармацевт

- 5 шагов с выбором ответов

- Обратная связь после каждого ответа

- Цветовая палитра: #FF7142, белый, серые оттенки

- Шрифт: Montserrat

- Адаптивная верстка для мобильных"

Важно

Чем конкретнее запрос — тем лучше результат. Указывайте детали: цвета, размеры, поведение элементов, конкретные функции.

3 Превью кода

Перед сохранением проверьте, как будет выглядеть ваш код:

Локальный просмотр

Скопируйте весь код в файл с расширением .html и откройте в браузере

Онлайн-инструменты

Используйте CodePen, JSFiddle, Replit для быстрого просмотра

Быстрый способ

Самый простой вариант: Скопируйте весь код (от <!DOCTYPE html> до </html>) в текстовый редактор (Блокнот, VS Code), сохраните как index.html и откройте в браузере двойным кликом.

4 Сохранение кода

После проверки превью сохраните код правильно:

Выделите весь код в окне AI-ассистента (Ctrl+A)
Скопируйте (Ctrl+C)
Откройте текстовый редактор (VS Code, Sublime, Notepad++)
Вставьте код (Ctrl+V)
Сохраните файл с правильным расширением:
- HTML: .html
- CSS: .css
- JavaScript: .js

Профессиональный совет

Используйте VS Code — бесплатный редактор с подсветкой синтаксиса и автодополнением. Скачайте с официального сайта.

5 Размещение на GitHub

GitHub — платформа для хранения и демонстрации кода:

Зарегистрируйтесь на github.com
Создайте новый репозиторий (кнопка "+" в правом верхнем углу)
Дайте название репозиторию (например, "pharma-training")
Загрузите файлы:
- Нажмите "Add file" → "Upload files"
- Перетащите ваши файлы или выберите их
- Напишите комментарий (опционально)
- Нажмите "Commit changes"

Альтернатива

Для простых проектов можно использовать GitHub Gist — сервис для обмена кодом. Просто вставьте код и нажмите "Create secret gist".

6 Публикация проекта

Сделайте проект доступным по ссылке:

GitHub Pages (бесплатно)

В настройках репозитория → Pages → выберите ветку main → Save

Netlify / Vercel

Бесплатные платформы для хостинга с автоматическим деплоем из GitHub

GitHub Pages:
- В вашем репозитории на GitHub зайдите в Settings
- В левом меню выберите Pages
- В разделе Source выберите ветку main
- Нажмите Save
- Через 1-2 минута ваш проект будет доступен по адресу: https://вашлогин.github.io/название-репозитория

✓ Чек-лист для вайб-кодинга

Используйте этот чек-лист для каждого нового проекта:

Подготовка

✓ Выбрал AI-ассистента
✓ Определил цель проекта
✓ Подготовил детальное ТЗ
✓ Выбрал цветовую палитру
✓ Выбрал шрифты

Создание

✓ Сформулировал четкий запрос
✓ Проверил превью кода
✓ Протестировал функционал
✓ Сохранил файлы локально
✓ Проверил адаптивность

Публикация

✓ Создал репозиторий на GitHub
✓ Загрузил файлы
✓ Настроил GitHub Pages
✓ Проверил работу по ссылке
✓ Поделился результатом

Профессиональные советы

1. Итеративный подход: Не пытайтесь получить идеальный код с первого запроса. Делайте последовательные уточнения.

2. Разделяй и властвуй: Сложный проект разбивайте на части: сначала структура, потом стили, затем логика.

3. Сохраняйте промпты: Записывайте удачные формулировки запросов для повторного использования.