Найти в Дзене
Data Insights

Программируем с GPT (Vibe coding)

В процессе разработки своего сервиса AI Тьютор мне приходилось делать как Backend, который мне знаком, так и Frontend, который я знаю на уровне базового html + css, ну может еще немного понимаю в Bootstrap. Я не писал на JS ни разу, то есть сделать какие-то допы на страницу для меня проблема. Тут то на помощь и приходят всякие GPT сервисы. Практически весь фронт в моём случае был реализован с помощью GPT. Я набрасывал базовую структуру страницы, а затем формулировал задачу для нейросети, чтобы получить нужный результат. Такой подход оказался куда эффективнее, чем просто просить сгенерировать что-то "с нуля". Даже для нейросети важно дать чёткое техническое задание с примерами — только тогда можно рассчитывать на внятный и полезный результат. Например, возьмём страницу, на которой пользователь выбирает тип курса, который хочет создать. Что мы видим на странице? Сначала — заголовок, затем div, внутри которого расположены ещё два div: один содержит текст, второй — кнопку-ссылку. После это

В процессе разработки своего сервиса AI Тьютор мне приходилось делать как Backend, который мне знаком, так и Frontend, который я знаю на уровне базового html + css, ну может еще немного понимаю в Bootstrap. Я не писал на JS ни разу, то есть сделать какие-то допы на страницу для меня проблема. Тут то на помощь и приходят всякие GPT сервисы.

Практически весь фронт в моём случае был реализован с помощью GPT. Я набрасывал базовую структуру страницы, а затем формулировал задачу для нейросети, чтобы получить нужный результат. Такой подход оказался куда эффективнее, чем просто просить сгенерировать что-то "с нуля". Даже для нейросети важно дать чёткое техническое задание с примерами — только тогда можно рассчитывать на внятный и полезный результат.

Например, возьмём страницу, на которой пользователь выбирает тип курса, который хочет создать.

Что мы видим на странице? Сначала — заголовок, затем div, внутри которого расположены ещё два div: один содержит текст, второй — кнопку-ссылку. После этого идёт ещё один div с таблицей.

Как я это делал? Просто писал «голый» HTML — без классов Bootstrap, без стилей, без лишней обёртки. Обычная вложенная структура на чистом HTML.

<div class="main">
<div><h3>Заголовок</h3></div>
<div class="cards">
<div class="card"><h5>Карточка 1</h5>
<p>Какой-то текст</p>
<button>Кнопка</button>
</div>
<div class="card"><h5>Карточка 2</h5>
<p>Какой-то текст2</p>
<button>Кнопка2</button>
</div>
</div>

<div class="table">
<table>
<thead>заголовки</thead>
<tbody>тело таблицы</tbody>
</table>
</div>
</div>

На выходе мы имеем вот такое

-2

Теперь идем в GPT и формируем задачу

-3

Не забываем приложить свой черновик кода к запросу. В ответ получаем такое

-4

Ну и при загрузке этого html видим результат

-5

Стоит отметить, что в моём аккаунте у GPT уже был контекст, поэтому мне не пришлось каждый раз заново описывать примеры текстов для генерации страницы. Это действительно удобно — нейросеть помнит предыдущие запросы, и не нужно тратить время на повторное объяснение всех смыслов с нуля.

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

-6
-7

Таким образом можно собрать все необходимые страницы. А если вы, как и я, ведёте разработку на Django, то достаточно прямо в промпте указать нужные {% url 'ваш_эндпоинт' %} для кнопок и ссылок — и всё автоматически свяжется с вашими вьюхами.

Окей, с фронтом всё понятно. А что насчёт бэкенда? Тут тоже можно ускорить разработку — особенно в муторной части, связанной с созданием моделей, то есть описанием всех классов и полей вручную. Достаточно описать свои пожелания: например, «создай модель курса, модуля и урока с такими-то атрибутами и такими-то связями» — и на выходе вы получите готовый код моделей.

-8
-9
-10

Собственно, дальше уже можно запрашивать и вьюхи, и всё остальное. Главное — чтобы вы сами точно понимали, что хотите получить, могли проверить результат и имели хотя бы базовый черновик своих требований. Это серьёзно снижает риск получения чего-то ненужного. В противном случае придётся делать уточняющие запросы, а это не только растягивает контекстное окно нейросети, но и может привести к появлению лишней или некорректной логики в коде.

Пробуйте! Могу с уверенностью сказать: создать небольшой веб-сервис можно практически полностью с помощью GPT. Представьте, что вы — и продакт-менеджер, и тимлид в одном лице, а GPT — команда мидлов и джунов. Ваша задача — чётко и полно сформулировать техническое задание, а потом провести код-ревью и протестировать результат.

Главное — не пушьте код от нейросети сразу в прод без проверки!