Понятная инструкция для тех, кто никогда не писал код. Вы узнаете, как с помощью искусственного интеллекта создать работающее браузерное приложение за один вечер.
Какие нейросети подойдут новичку в России
Cursor — редактор кода со встроенным ИИ. Бесплатный тариф работает в России, VPN не требуется. Для Pro-версии понадобится иностранная банковская карта, но для первого приложения хватит бесплатного функционала.
GigaIDE Cloud — российская среда разработки от Сбера. В феврале 2025 года компания открыла доступ к раннему тестированию. Работает через браузер, интегрирована с нейросетью GigaCode. Данные хранятся в России, зарубежные карты не нужны.
YandexGPT — API от Яндекса для генерации текста, ответов на вопросы, подсказок. Для получения ключа нужна регистрация в Yandex Cloud, есть бесплатный ознакомительный тариф.
Локальные варианты — на GitHub есть сторонние open-source проекты (например, репозиторий «lovable-ai-platform» от пользователя Yakupovildar). Они позволяют запустить среду с поддержкой YandexGPT и GigaChat на своём компьютере. Это неофициальные сборки, не связанные с зарубежным сервисом Lovable. Для запуска нужно установить Python.
Важно: нейросети могут ошибаться. Для простых проектов это не критично, но если приложение будет хранить личные данные — покажите код знакомому разработчику.
Пошаговая инструкция
Шаг 1. Выберите инструмент
Для первого раза проще всего Cursor:
1. Скачайте с официального сайта (бесплатно).
2. Установите как обычную программу.
3. При запуске выберите бесплатный тариф.
Альтернатива без установки — GigaIDE Cloud:
1. Зайдите на платформу через браузер.
2. Авторизуйтесь (достаточно учётной записи).
3. Создайте новый проект.
Шаг 2. Попросите нейросеть написать идеальный промт
Вы знаете, что хотите, но не знаете, как правильно об этом попросить нейросеть. Короткий запрос («сделай список дел») даст сырой код.
Сначала попросите нейросеть подготовить для вас идеальный промт.
В Cursor или GigaIDE откройте окно общения с ИИ и напишите:
«Я хочу создать браузерное приложение — список дел. Напиши для меня подробный промт, который я потом отправлю нейросети, чтобы получить качественный, полностью рабочий код. Промт должен включать: функциональность (добавление, отметка выполнения, удаление), требования к дизайну, структуру кода (HTML/CSS/JS в одном файле), обработку ошибок и сохранение данных после перезагрузки страницы».
Нейросеть вернёт развёрнутый промт. Вот пример:
«Создай одностраничное браузерное приложение "Список дел".
Функциональность. Поле ввода и кнопка "Добавить" — новая задача появляется в списке. Пустое поле — кнопка неактивна. У каждой задачи: чекбокс для отметки выполнения (зачёркнутый текст), кнопка "Удалить". Сохранение в localStorage — после закрытия браузера задачи остаются. Счётчик активных задач. Кнопка "Очистить все".
Дизайн. Светлая тема, мягкие тени, скруглённые углы, адаптация под мобильные экраны.
Технически. HTML, CSS, JavaScript в одном файле, без внешних зависимостей. Добавь комментарии в коде».
Шаг 3. Отправьте промт и получите код
Скопируйте сгенерированный промт и отправьте его в новом диалоге той же нейросети. Результат будет качественнее, чем по короткому запросу — потому что в промте прописаны все сценарии, дизайн, обработка ошибок и сохранение данных.
Нейросеть выдаст готовый код. Скопируйте его.
Шаг 4. Запустите приложение
Создайте на рабочем столе текстовый файл, назовите его app.html. Вставьте скопированный код, сохраните. Откройте файл любым браузером — двойным щелчком мыши. Приложение работает.
О браузерах. Большинство современных браузеров (Chrome, Яндекс Браузер, Firefox, Safari) работают одинаково. Но для надёжности проверьте приложение хотя бы в Chrome и Firefox.
Если что-то пошло не так:
- Приложение не открывается — проверьте, что файл имеет расширение .html, а не .txt.
- Кнопки не работают — вернитесь к нейросети: «Функция добавления задачи не срабатывает, исправь код».
- Дизайн не нравится — уточните: «Сделай кнопки круглыми, добавь анимацию».
Типичные ошибки новичков
«Нейросеть выдаёт код, но я ничего не понимаю» — это нормально. Вам не нужно понимать каждую строчку. Достаточно видеть результат в браузере.
«После перезагрузки данные пропадают» — скажите нейросети: «Добавь сохранение в localStorage».
«Приложение выглядит не так» — уточняйте запрос: «сделай фон градиентным», «добавь тени», «сделай кнопки больше».
«Не знаю, как правильно попросить нейросеть» — используйте приём из Шага 2. Попросите нейросеть написать промт для вас.
Рекомендации перед стартом
1. Начните с малого. Первое приложение пусть решает одну простую задачу. Добавлять новые функции проще, когда основа работает.
2. Сначала попросите промт, потом — код. Это главный лайфхак. Нейросеть сама напишет чёткое техническое задание, а по нему — качественный код.
3. Сохраняйте промежуточные версии. Каждый раз, когда приложение работает, сохраните копию файла под новым именем. Если следующие изменения всё сломают — вы вернётесь к рабочей версии.
4. Не загружайте личные данные в непроверенные приложения. Если создаёте приложение для учёта паролей или финансов — покажите код знакомому разработчику.