ВАЙБКОДИНГ ДЛЯ ЧАЙНИКОВ ОТ ЧАЙНИКА

Как я научилась создавать собственные сайты и платформы с помощью ИИ, не написав ни одной строчки кода

Начнём с того, что я не программист. Вообще.

Я SMM-специалист, и ещё недавно слова «деплой», «хостинг», «репозиторий» и «локальный сервер» не значили для меня примерно ничего.

Но мне очень хотелось сделать кое-что своё.

Сначала я создала платформу для учениц своего наставничества REELSON: с игровой картой, баллами, рейтингом участниц и магазином наград.

А потом решила сделать REELSON LAB — отдельную библиотеку, в которой собраны мои бесплатные уроки, гайды, шаблоны и другие материалы.

И всё это без разработчика.

Нет, нейросеть не прочитала мои мысли и не выдала идеальный сайт с первой попытки. Я много раз переделывала дизайн, переписывала задания и исправляла ошибки.

Но весь процесс можно повторить, даже если ты вообще не разбираешься в программировании.

Сейчас покажу, как именно я это делала.

Для начала: что такое вайбкодинг?

Вайбкодинг — это когда ты объясняешь искусственному интеллекту, что хочешь создать, а он пишет за тебя код.

Тебе не обязательно знать языки программирования, чтобы сделать первый сайт или небольшой сервис.

Зато нужно научиться внятно объяснять свои идеи, проверять результат и понимать, чего именно ты хочешь.

Я использовала два инструмента:

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

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

И вот здесь начинается инструкция.

ШАГ 1. Придумай, что именно хочешь создать

Не надо сразу замахиваться на новый Instagram.

Для первого проекта лучше выбрать что-нибудь небольшое, но реально полезное.

Например:

• Платформу с бесплатными материалами для подписчиков.
• Личный кабинет или трекер прогресса для учеников.
• Каталог услуг.
• Интерактивный чек-лист.
• Калькулятор стоимости услуг.
• Планировщик контента.

Я покажу весь процесс на примере платформы-библиотеки с бесплатными материалами, потому что её я сама недавно создала.

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

Вместо десятков разрозненных ссылок — одна библиотека.

Что я сделала

Я пришла в ChatGPT и начала рассказывать свою идею.

Не пыталась самостоятельно разобраться, как устроены сайты. Не искала, какие языки программирования мне понадобятся.

Просто объяснила, что хочу получить.

Я хочу создать собственную небольшую платформу с помощью Codex, но совершенно не разбираюсь в программировании.

Моя идея: [опиши, что хочешь создать].

Помоги мне продумать функциональность, структуру, дизайн и пользовательский путь.

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

Объясняй всё простыми словами. Не предлагай сложные функции, которые не нужны для первой версии.

Наша цель — создать рабочую платформу, которую потом можно будет опубликовать в интернете.

Дальше ChatGPT начал помогать мне разбирать идею на конкретные задачи.

И это, наверное, один из самых важных этапов.

Потому что если ты сама не понимаешь, как должна работать твоя платформа, нейросеть тоже не сможет угадать.

ШАГ 2. Продумай функциональность

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

Например, для REELSON LAB я решила:

1. На главной странице будет каталог материалов.
2. Пользователь сможет искать материалы по названиям.
3. Будут фильтры по категориям.
4. Материалы могут быть разных форматов: PDF, видео, статьи, таблицы.
5. При нажатии материал откроется в новой вкладке.
6. Регистрация для посетителей не нужна.
7. В конце сайта будет приглашение в моё наставничество.

А ещё сразу определила, чего не должно быть.

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

И это очень важный момент.

Нейросеть иногда пытается сделать больше, чем ты просишь. А тебе потом приходится убирать всё лишнее.

Поэтому лучше сразу сформулировать, что действительно необходимо.

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

Всё остальное можно добавить позже.

ШАГ 3. Собери референсы и материалы

Следующий этап — визуал.

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

Можно просто отправлять ChatGPT скриншоты сайтов, карточек, цветов, шрифтов и объяснять, что именно тебе нравится.

Не «сделай красиво», а конкретнее:

«Мне нравится, как здесь расположены карточки».

«Хочу такую же воздушную композицию».

«Нравится сочетание крупной типографики и небольших графических элементов».

«Цвета хочу свои — бордовый и кремовый».

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

Также собрала сами материалы: PDF-гайды, YouTube-уроки, статьи, Google Таблицы и ссылки на Telegram.

Важно: не обязательно сразу иметь весь контент. Можно сначала создать каркас сайта, а потом постепенно наполнять его.

Так мы и делали.

ШАГ 4. Преврати всё в техническое задание

Когда структура, функции и дизайн уже понятны, нужно превратить обсуждение в конкретную инструкцию.

Именно здесь ChatGPT особенно полезен.

Я не пыталась сама писать техническое задание с какими-то сложными терминами.

Вместо этого попросила его собрать все наши решения в один подробный запрос для Codex.

Теперь на основе всего, что мы обсудили, составь подробное техническое задание для Codex.

Оно должно включать:

- назначение платформы;
- структуру страниц;
- функциональность;
- дизайн и визуальные референсы;
- поведение кнопок;
- мобильную версию;
- форматы материалов;
- ограничения и то, чего делать не нужно.

Напиши задание так, чтобы я могла просто скопировать его целиком и отправить в Codex.

Не придумывай новые функции без моего согласования.

Учитывай, что я не программист и хочу получить работающий сайт, который смогу дальше менять с помощью ИИ.

В результате у тебя получится большая инструкция.

Не пугайся её размера!

Чем конкретнее ты опишешь результат, тем меньше придётся исправлять.

Хотя исправлять всё равно придётся. Спойлер 😄

ШАГ 5. Переходим в Codex

Теперь самое интересное — собственно создание платформы.

Я открыла Codex и передала ему подготовленное техническое задание.

Если у тебя ещё нет проекта, нужно создать новый. Дальше в чат отправляется наша инструкция.

В самом начале рекомендую добавить:

Создай новый проект на основе технического задания ниже.

Я не программист, поэтому самостоятельно код писать не буду.

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

Проверь, что проект запускается без ошибок.

Пока не публикуй сайт в интернете.

После создания покажи результат и объясни, как мне открыть предпросмотр.

Далее я буду присылать правки обычным текстом.

Ниже вставляешь техническое задание, которое подготовил ChatGPT.

Codex создаёт файлы проекта, пишет код и запускает сайт.

У меня после этого появился предпросмотр в браузере.

Адрес выглядел примерно как 127.0.0.1:4321.

Если увидишь что-то подобное, не пугайся.

Это локальный адрес. Он нужен, чтобы посмотреть сайт на своём компьютере до публикации.

Другие люди пока по этой ссылке ничего не увидят.

ШАГ 6. Самое важное — не соглашайся на первый результат

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

Первый вариант почти никогда не бывает окончательным.

У меня тоже.

Сначала Codex создал библиотеку, где под каждой красивой обложкой находилась куча текста, а ещё повторялась кнопка с приглашением в моё наставничество.

Мне это не понравилось.

Я хотела минималистичные карточки — обложка, название и переход к материалу. Без огромных описаний.

Что я сделала?

Сделала скриншот, отправила ChatGPT и буквально написала, что мне не нравится.

Он подготовил новое задание, а я передала его Codex.

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

Снова скриншот → ChatGPT → новое задание → Codex.

Потом захотелось больше дизайнерской графики.

Снова тот же процесс.

В какой-то момент вместо аккуратных звёздочек и стрелочек на iPhone появились цветные эмодзи.

Да, зелёные звёзды и синие стрелки посреди красивого сайта. Спасибо, конечно 😭

Пришлось отдельно просить заменить их на SVG-иконки.

Именно так выглядит реальный вайбкодинг.

Не одна волшебная команда, а последовательная работа над результатом.

Как правильно давать правки

Сравни два запроса.

Плохо:

«Мне не нравится, переделай красиво».

Лучше:

«Сейчас карточки слишком вытянутые. Сделай их квадратными, сохрани по две в ряд на телефоне, увеличь заголовки, убери длинные описания и не меняй цветовую палитру».

Ещё лучше — приложить скриншот и показать, что именно хочется изменить.

И обязательно указывать:

«Не меняй остальную часть сайта».

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

ШАГ 7. Наполняем платформу настоящими материалами

Когда основа сайта была готова, я начала добавлять контент.

Здесь всё тоже довольно просто.

У меня были PDF-файлы, ссылки на YouTube, Telegram, Teletype и Google Таблицы.

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

Потом передавала готовые данные в Codex.

Например:

Добавь новый материал в существующую библиотеку.

Название: [название]

Категория: [категория]

Формат: [PDF / видео / статья / таблица]

Ссылка или файл: [ссылка / прикреплённый файл]

Создай для него карточку в уже существующем дизайне.

По нажатию материал должен открываться в новой вкладке.

Не изменяй существующие материалы, их ссылки и внешний вид.

Проверь работу новой карточки.

Если это PDF, прикрепляешь сам файл.

Если материал уже находится на другом сайте, можно просто дать ссылку.

Мне, например, не нужно было переносить YouTube-уроки внутрь библиотеки. Я сделала прямые переходы на видео.

И это удобно: не нужно усложнять платформу функциями, которые тебе не нужны.

ШАГ 8. Обязательно проверь мобильную версию

Очень важный этап, который легко забыть.

На компьютере сайт может выглядеть идеально, а на телефоне — совершенно иначе.

Особенно если у тебя длинные названия материалов, карточки в несколько колонок или нестандартные декоративные элементы.

Я проверяла, как REELSON LAB выглядит на iPhone, и именно там обнаружила проблемы с иконками.

Поэтому обязательно открой сайт на телефоне и посмотри:

• читаются ли заголовки;
• удобно ли нажимать на кнопки;
• ничего ли не обрезается;
• открываются ли материалы;
• работают ли поиск и фильтры;
• нет ли странных символов или эмодзи.

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

Можно попросить Codex самостоятельно проверить мобильную адаптацию, но я бы всё равно посмотрела результат своими глазами.

ШАГ 9. Публикуем платформу в интернете

До этого момента сайт существует только локально.

Чтобы его могли открывать другие люди, нужен хостинг.

И здесь я сначала тоже запуталась.

Когда попросила подготовить REELSON LAB к публикации, Codex предложил мне создать аккаунт GitHub, установить GitHub Desktop, сохранить репозиторий, затем подключить Netlify…

В общем, я прочитала инструкцию и поняла, что не хочу делать ничего из этого 😅

Я уже создавала платформу REELSON с баллами учениц и знала, что её можно опубликовать проще.

Поэтому попросила использовать тот же способ — Cloudflare Workers.

Cloudflare Workers — сервис, через который можно разместить сайт в интернете. Он умеет выдавать адрес с окончанием workers.dev.

То есть собственный домен для первого запуска покупать необязательно.

Что я написала Codex

Я хочу опубликовать готовый сайт в интернете.

Я не программист и не хочу самостоятельно разбираться с GitHub, Netlify и настройкой собственного домена.

Проверь возможность публикации через Cloudflare Workers с использованием адреса workers.dev.

Подготовь проект и выполни технические действия самостоятельно, насколько позволяет текущее окружение.

Если потребуется авторизация или подтверждение доступа к Cloudflare, объясни мне только этот конкретный шаг.

Перед публикацией проверь сборку, работу кнопок, PDF и мобильную версию.

После успешной публикации дай мне публичную ссылку на сайт.

Не изменяй другие мои проекты.

Codex подготовил сайт к публикации.

В зависимости от доступов тебе может понадобиться самостоятельно войти в Cloudflare или подтвердить действие. Это нормально.

В моём случае итоговая библиотека получила адрес:

reelson-lab.reelson-izmlv.workers.dev

И всё — это уже не локальный предпросмотр, а сайт, который можно открыть по ссылке.

Важный момент про деньги: у Cloudflare Workers есть бесплатный тариф, но у него существуют лимиты. А использование самого Codex зависит от доступного тебе тарифа и ограничений. Поэтому обещать, что абсолютно любой проект всегда будет бесплатным, неправильно.

ШАГ 10. Проверь уже опубликованный сайт

Казалось бы, всё готово.

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

Открой её как обычный посетитель.

Лучше и с компьютера, и с телефона.

Попробуй найти материал, воспользоваться фильтром, открыть PDF, перейти по внешней ссылке.

Убедись, что всё работает именно на публичном сайте, а не только в предпросмотре Codex.

Если сайт содержит личные кабинеты, данные клиентов или учеников, обязательно проверь авторизацию и то, что чужие данные недоступны посторонним.

И ещё: перед тем как распространять ссылку, убедись, что в проекте нет тестовых данных, личных документов или секретных ключей.

ШАГ 11. А что делать, если потом захочешь что-то изменить?

Вот здесь, пожалуй, самая приятная часть.

Не нужно создавать новый сайт каждый раз, когда у тебя появляется новая идея.

Я, например, решила добавить в REELSON LAB новые материалы.

Снова пришла в ChatGPT, подготовила задание, передала его Codex.

И попросила обновить уже существующий сайт.

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

Главное — каждый раз уточнять, что работаешь с существующим проектом.

Мне нужно обновить уже существующий сайт.

Вот какие изменения нужно внести: [опиши изменения].

Не создавай новый проект.

Сохрани существующий дизайн и все работающие функции.

Не удаляй данные и материалы.

После изменений проверь, что всё работает.

Обнови существующий сайт по прежнему публичному адресу и сообщи о результате.

Именно поэтому я рекомендую не удалять папку проекта и сохранять исходные файлы.

Твоя платформа может постепенно развиваться вместе с твоими задачами.

5 вещей, которые я поняла за время вайбкодинга

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

Но нужно хорошо понимать, какую задачу ты решаешь и для кого создаёшь платформу.

2. ChatGPT и Codex — это не одно и то же в моём рабочем процессе.

Первому я объясняю идеи и прошу составить подробные задания. Второй непосредственно работает с сайтом.

3. Скриншоты — твои лучшие друзья.

Показать конкретную проблему зачастую проще, чем пытаться описать её десятью абзацами.

4. Чем конкретнее задача, тем лучше результат.

«Сделай красивее» работает гораздо хуже, чем «замени прямоугольные карточки на квадратные, сохрани цвета и добавь тематическую графику».

5. Нейросеть не обязана сделать всё правильно с первой попытки.

И это нормально. Твоя задача — направлять её и проверять работу.

Что я советую сделать прямо сейчас

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

Возьми одну идею.

Открой ChatGPT.

Напиши первый промпт из этой инструкции.

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

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

Я тоже начинала с идеи в голове и абсолютно не понимала, как превратить её в работающую платформу.

А теперь у меня есть свои инструменты, которыми я пользуюсь в работе и обучении.

И больше всего меня радует даже не сам факт, что нейросеть написала код.

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

Для человека, который ещё недавно вообще не понимал, что такое хостинг, это довольно офигенное ощущение.

Так что если давно хотелось сделать что-то своё — попробуй. Возможно, тебя тоже затянет. ❤️