AI для разработчика

Введение

Даже если вы не программист, AI позволяет создавать простые приложения, автоматизации и веб-страницы. Концепция «Vibe Coding» — создание программ через описание на естественном языке — стала реальностью в 2025-2026 годах. В этом уроке вы создадите своё первое приложение без опыта программирования.

---

Vibe Coding: новая парадигма

Что это такое

Vibe Coding — подход к разработке, где вы описываете, что нужно создать, а AI пишет код. Вы направляете, AI реализует.

Было раньше:

Изучить язык программирования (месяцы)

Понять алгоритмы

Написать код

Отладить ошибки

Стало сейчас:

Описать, что нужно создать

AI генерирует код

Вы тестируете и уточняете

Готовый результат за часы

---

Инструменты для AI-кодинга

Cursor

Сайт: cursor.com Что это: AI-IDE (среда разработки) на базе VS Code

Возможности:

• Генерация кода по описанию
• Автодополнение с AI
• Объяснение существующего кода
• Рефакторинг и исправление ошибок

Подходит для: Любого уровня, от новичков до профи

---

Claude Code

Что это: AI-ассистент для терминала и файлов

Возможности:

• Работа с существующими проектами
• Редактирование файлов
• Выполнение команд
• Понимание контекста проекта

---

GitHub Copilot

Что это: AI-ассистент от GitHub, интегрированный в IDE

Где работает: VS Code, JetBrains IDEs, и др.

Особенности:

• Автодополнение кода в реальном времени
• Подсказки на основе контекста
• Генерация функций по комментариям

---

ChatGPT / Claude (в браузере)

Для новичков — достаточно обычного чата:

• Опишите, что нужно создать
• Получите код
• Скопируйте и запустите

---

Что можно создать без опыта

Примеры проектов

| Проект | Сложность | Время | |--------|-----------|-------| | Простая веб-страница | Легко | 15 мин | | Калькулятор | Легко | 20 мин | | To-Do приложение | Средне | 1 час | | Landing page | Средне | 30-60 мин | | Простой Telegram-бот | Средне | 1-2 часа | | Конвертер файлов | Средне | 30 мин | | Автоматизация Excel | Легко | 15 мин |

---

Создание простой веб-страницы

Пример промпта

` Создай простую HTML-страницу:

Тема: [ваша тема] Содержание:

• Заголовок
• Описание (3 абзаца)
• Список преимуществ (5 пунктов)
• Кнопка "Связаться"
• Футер с контактами

Стиль: современный, минималистичный Цвета: синий и белый Адаптивный дизайн для мобильных

Дай полный код HTML + CSS. `

Результат

AI создаст полный код, который можно:

Сохранить как index.html

Открыть в браузере

Увидеть готовую страницу

---

Создание интерактивного приложения

Калькулятор

` Создай веб-калькулятор на HTML/CSS/JavaScript.

Функции:

• Сложение, вычитание, умножение, деление
• Очистка
• Красивый дизайн

Стиль: как на iPhone `

To-Do приложение

` Создай приложение для списка задач.

Функции:

• Добавление задачи
• Отметка как выполнено
• Удаление задачи
• Сохранение в localStorage (чтобы не терялось)

Технологии: HTML, CSS, JavaScript (vanilla) Стиль: минималистичный, тёмная тема `

---

Автоматизация рутины

Скрипты для Excel/Google Sheets

` Напиши скрипт для Google Sheets (Apps Script).

Задача: Автоматически выделять красным ячейки, где значение меньше 0.

Объясни, как его установить. `

Обработка файлов

` Напиши Python-скрипт:

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

Формат: YYYY-MM-DD_filename.ext `

---

MCP: подключение AI к инструментам

Что такое MCP

Model Context Protocol (MCP) — стандарт, позволяющий AI подключаться к внешним инструментам:

• Файловая система
• Базы данных
• API сервисов
• Браузер

Зачем это нужно

Без MCP: AI только отвечает на вопросы С MCP: AI может действовать — читать файлы, запускать код, управлять сервисами

Пример

` (Через Claude с MCP)

Прочитай все CSV-файлы в папке /data, объедини их в один файл и посчитай общую сумму в столбце "Amount". `

AI реально выполнит эту задачу с файлами.

---

Code Review с AI

Проверка кода

` Проверь этот код на ошибки и предложи улучшения:

[код]

Обрати внимание на:

• Ошибки и баги
• Безопасность
• Производительность
• Читаемость
• Лучшие практики

`

Объяснение кода

` Объясни, что делает этот код:

[код]

Объясни:

• Пошагово, что происходит
• Зачем нужна каждая часть
• Простыми словами для новичка

`

---

Документирование кода

` Добавь документацию к этому коду:

[код]

Добавь:

• Описание функций
• Параметры и возвращаемые значения
• Примеры использования
• Комментарии к сложным местам

Формат: JSDoc / docstring (в зависимости от языка) `

---

Практическое задание

Цель

Создать простое веб-приложение без опыта программирования.

Вариант 1: Калькулятор

` Создай веб-калькулятор с красивым дизайном. Функции: +, -, *, /, очистка. HTML + CSS + JavaScript в одном файле. `

Вариант 2: To-Do список

` Создай список дел. Функции: добавить, отметить, удалить. Сохранение в браузере. `

Вариант 3: Landing Page

` Создай landing page для [ваш продукт/услуга]. Секции: герой, преимущества, отзывы, CTA. Адаптивный дизайн. `

Шаги выполнения

Выберите проект из вариантов выше

Отправьте промпт в ChatGPT или Claude (или [@gptmug_bot](https://t.me/gptmug_bot) в Telegram)

Сохраните код:

- Создайте файл index.html - Вставьте код - Сохраните

Откройте в браузере:

- Двойной клик по файлу - Или: правый клик → Открыть с помощью → Chrome/Firefox

Улучшайте:

- Попросите AI исправить ошибки - Добавить функции - Изменить дизайн

Результат

Работающее веб-приложение, которое вы создали.

---

Домашнее задание

Создайте полезный инструмент для своих задач:

Определите проблему, которую хотите решить

Опишите решение для AI

Получите код

Протестируйте и улучшите

Идеи:

• Конвертер единиц измерения
• Генератор случайных паролей
• Таймер/секундомер
• Счётчик калорий
• Калькулятор ипотеки

---