Вайб кодинг: с чего начать, чтобы первый вечер не закончился пустым экраном
Вы описываете словами, что должно работать, — модель пишет код и отдаёт готовый файл. Разбираем старт по шагам: что сказать сначала, как формулировать правки и почему первый проект лучше делать крошечным.
Ссылку на установку присылает бот @get_ai_access_bot после слова «старт». Промпт лежит ниже на этой странице, копируется одной кнопкой.
Лист первого проектаvibe coding
01Опишите свою работу обычными словами
02Попросите 8–15 вопросов, чтобы модель не угадывала
03Один экран, одна задача, один HTML-файл
04Правки — по одной за раз, каждый раз полный файл
Ты — senior product designer и frontend-разработчик. Собери приложение «Трекер задач»
01
Что такое вайб кодинг простыми словами
Вайб кодинг — это когда программу собирают из описания. Человек формулирует задачу так, как рассказал бы её коллеге за кофе, а модель сама придумывает структуру, пишет разметку, стили и логику. Ваша роль — не помнить синтаксис, а ясно объяснять, что должно происходить на экране.
Код при этом настоящий: его можно открыть в блокноте, показать знакомому разработчику, положить в архив на диске. Меняется не результат, а способ разговора о нём — вы перестаёте переводить мысль на язык циклов и функций и говорите на языке своей работы.
Отсюда главная ловушка старта: кажется, что достаточно написать «сделай мне приложение для учёта» — и готово. На деле модель ответит чем-то средним, а вы получите чужое представление о вашей задаче. Поэтому первое, с чего стоит начать, — не промпт, а десять минут честного ответа на вопрос «что я делаю руками каждый день».
1
«Напиши мне приложение, которое всё умеет»
Через сорок минут в чате появляется универсальная доска с восемью кнопками, а вы не понимаете, зачем они. Лечится сужением: один экран, одна задача, один пользователь — вы сами.
2
«Сделай красиво и современно»
Слова о вкусе модель понимает по-своему. Покажи три варианта оформления списка работает лучше, чем десять прилагательных без примеров.
3
«Всё сломалось, переделывай»
Так теряется то, что уже нравилось. Сильнее другая формулировка: оставь всё как есть, поменяй только сортировку по сроку.
02
С чего начать: четыре правила первого проекта
Эти правила не про модель, а про вас. Они экономят первый вечер целиком.
Начните с одной повторяющейся мелочи
Не «система для команды», а «список задач с тремя статусами». Список вы сможете проверить за минуту: работает или нет. Большой замысел проверить нечем.
Опишите не экран, а рабочий день
Модель не знает, что вы открываете список в понедельник и первым делом смотрите просроченные. Скажите прямо: какие цифры нужны утром, что вы делаете после обеда, чего боитесь не заметить.
Просите вопросы, а не догадки
8–15 вопросов с вариантами ответов — самый дешёвый способ получить приложение под себя. Отвечать проще, чем писать техническое задание: почти всё сводится к «только я» или «вся команда».
Правьте по одному изменению
Если попросить переделать всё, вы не поймёте, что именно сработало. Одна правка — один результат — одна проверка. За вечер так набирается десяток улучшений.
03
Первый проект: трекер задач на четыре экрана
Почему именно он: данных мало, логика видна глазами, а приложение сразу приносит пользу. Ниже — что попросить у модели и что она вернёт.
экран 1
Список задач
Название, исполнитель, срок, статус цветной меткой. Сортировка по сроку и фильтр «только мои».
экран 2
Карточка задачи
Описание, приоритет, комментарии, кнопка «Готово». Правка описания прямо в карточке.
экран 3
Неделя
Что должно закрыться до пятницы. Просроченное вынесено отдельной строкой сверху.
экран 4
Люди
Короткий список участников с цветом и счётчиком открытых задач. Без паролей и ролей.
Промпттекст с описанием задачи: кто пользователь, что происходит на экране, какие правила соблюдать. Чем конкретнее, тем меньше кругов правок.
Итерацияодин круг «сказал — получил — проверил». Первый проект обычно укладывается в 5–8 итераций.
HTML-файлфайл, который открывается двойным кликом в браузере: внутри разметка, стили и логика. Ничего устанавливать не нужно.
Локальное хранилищепамять браузера: задачи остаются после перезагрузки страницы, сервер не нужен.
04
Сколько это стоит
Три пути к одному и тому же экрану со списком задач. Порядок величин, без конкретных прайсов и названий сервисов.
Сравнение способов получить своё приложение
Что сравниваем
Нанять разработчика
Купить подписку
Собрать самому
Деньги
десятки тысяч рублей за сайт и правки
ежемесячный платёж за доступ
0 ₽ за сборку и 5 000 000 токенов от бота
Срок
недели переписки и согласований
быстро, но по чужому сценарию
один разговор, обычно вечер
Правки
писать ТЗ, ждать окна в графике
просить в поддержке и ждать релиза
словами в чат: «сортировка по сроку»
Кому принадлежит результат
исполнителю до полной оплаты
сервису, пока действует тариф
вам: файл лежит на вашем диске
Подписка честно удобна, пока вы в неё помещаетесь. Лимиты появляются там, где вы выросли: второй проект, экспорт данных, ещё пять человек в команде. Свой файл про тарифы ничего не знает.
05
Пять причин собрать самому
ЭкономияВместо счёта за разработку и месячной подписки — бесплатная сборка на токенах от бота.
Приложение принадлежит вамОбычный файл на устройстве: доступ не отключат и не попросят продлить тариф.
Правки словами«Добавь фильтр по исполнителю» — и через минуту он на месте. Без задачи в трекере и ожидания спринта.
Не нужно ждать разработчикаЗахотелось поменять порядок экранов — поменяли. Никто не занят, очередь пуста.
Нет лимитов тарифа на функцииВторой отчёт, тёмная тема, экспорт в таблицу — не новый пакет услуг, а просто просьба в чате.
06
Семь шагов до первого приложения
Кнопки названы так же, как в интерфейсе, и подсвечены на скриншотах. Шаг 5 — единственный, где нужен текст: он лежит в следующем блоке.
01
Приложение установлено
Ссылку на установку бот @get_ai_access_bot присылает после слова «старт». Дальше работа идёт в приложении на компьютере.
Шаг 1 · установка
02
Нажмите «Открыть веб-интерфейс»
На стартовом экране есть кнопка «Открыть веб-интерфейс». Именно там живут проекты и чат с моделью — остальное окно можно закрыть.
Шаг 2 · веб-интерфейс
03
Нажмите «Создать проект»
В списке «Ваши проекты» нужна кнопка «Создать проект» справа вверху. Один проект — одна задача и своя папка с файлами.
Шаг 3 · новый проект
04
Впишите название и нажмите «Создать проект»
Для первого раза подойдёт «Трекер задач». Название потом меняется, так что выбирайте понятное вам, а не идеальное.
Шаг 4 · название
05
Вставьте промпт в поле сообщения
Скопируйте текст кнопкой в блоке ниже и вставьте в поле через Ctrl+V (на Mac — Cmd+V). Промпт длинный — так и задумано: в нём сразу и вопросы, и правила, и границы проекта.
Шаг 5 · промпт в поле
06
Нажмите «Отправить» ↑
Кнопка со стрелкой вверх справа от поля сообщения. Клавиша Enter делает то же самое.
Шаг 6 · отправка
07
Ответьте на 8–15 вопросов — и получите файл
Вопросы бытовые: кто будет пользоваться, что показывать сразу после открытия, нужны ли дедлайны. Отвечайте вариантами «только я», «вся команда» — этого достаточно. В конце бот отдаст готовый HTML-файл приложения: его открывают в браузере, и он работает.
Шаг 7 · вопросы и файл
07
Промпт для первого проекта
Промпт лежит здесь целиком: скопируйте, вставьте в поле сообщения и отправьте. Захотите другой первый проект — замените последнюю строку и сущности, остальное можно оставить.
Промпт · трекер задач
Ты — senior product designer и frontend-разработчик. Это мой первый проект в вайб-кодинге: я объясняю словами, код пишешь ты. Сначала задай мне 8–15 простых вопросов о моей работе, потом собери приложение «Трекер задач» одним HTML-файлом. Моя задача: трекер задач для команды.
Вопросы задавай про людей и процесс, а не про код: сколько нас в команде; кто ставит задачи; какие статусы проходит задача; нужны ли сроки, приоритеты и исполнители; как часто я смотрю список; что должно быть видно сразу после открытия; нужны ли комментарии; как я понимаю, что неделя прошла хорошо. К каждому вопросу — 2–4 варианта ответа, чтобы можно было нажать, а не писать. Про фреймворки, базы данных, хостинг и библиотеки не спрашивай. После ответов перескажи своими словами, что понял, и приступай.
Сущности: задача (название, описание, статус, приоритет, исполнитель, срок, теги, дата создания, дата закрытия), человек (имя, цвет, роль), комментарий (автор, текст, дата), направление (название, цвет). Связи — по стабильным ID, а не по именам: переименование человека не должно ломать задачи.
Статусы задачи: идея → в работе → на проверке → готово. Отдельная ветка — отменена. Переход кнопкой в карточке, у каждого перехода понятная подпись и возможность вернуть назад.
Экраны: «Список» — задачи строками, цветная метка статуса, исполнитель, срок, сортировка по сроку и приоритету, поиск по названию; «Карточка» — описание, комментарии, смена статуса, правка полей на месте; «Неделя» — что закрывается до пятницы, просроченное отдельной строкой сверху; «Люди» — участники с цветом и числом открытых задач. Навигация между экранами — простая, без вложенных меню.
Правила: пустой список показывает подсказку, а не пустоту; задача без срока не считается просроченной; удаление человека не удаляет его задачи, а переносит в «Без исполнителя»; счётчики на «Неделе» пересчитываются сразу после любого действия.
Дизайн выбери сам: спокойная типографика, читаемые размеры, аккуратные отступы, единые компоненты, состояния hover и focus, адаптив от 360 px. Главное действие экрана — без прокрутки. Никакого визуального шума и анимаций ради анимаций.
Технически: один HTML-файл, CSS и vanilla JavaScript внутри, localStorage как хранилище, без backend, сборщиков, npm и внешних библиотек. Внутри файла порядок слоёв: хранилище → сущности → правила → компоненты → экраны → навигация. После любого действия данные сохранены, интерфейс перерисован.
Добавь демо-данные (четыре человека, двенадцать задач в разных статусах, пара просроченных, несколько комментариев) и кнопку «Удалить тестовые данные» с подтверждением. Предусмотри пустые поля, длинные названия, удаление связанных записей, закрытие окон по Escape и по клику на фон. Сам пройди сценарии: создать задачу, перенести по статусам, отменить, вернуть в работу, добавить комментарий, обновить страницу, открыть с телефона.
Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент сюда». Правки присылай тоже полным файлом и меняй только то, о чём я попросил.
Моя задача: трекер задач для команды.
Готовый файл открывается двойным кликом в любом браузере. Задачи хранятся в самом файле, на вашем устройстве.
08
Вопросы, которые задают до старта
Вайб кодинг — это что, простыми словами?
Способ делать программы, объясняя задачу словами. Вы говорите, что должно быть на экране и как это должно себя вести, модель пишет код. Проверяете результат нажатиями, а не чтением кода.
Нужно ли знать синтаксис и термины?
Нет. Важнее описывать свою работу: кто пользуется, что смотрит первым, чего не должно случиться. Технические решения — на стороне модели, вам достаточно понимать, что вы видите на экране.
Что делать, если результат не понравился?
Сказать, что именно не так, и попросить поправить один пункт. После каждой правки вы получаете полный файл, поэтому можно сравнивать версии и откатываться к той, что была удобнее.
Почему промпт такой длинный?
В нём сразу три вещи: инструкция задать вопросы, описание сущностей и правила поведения. Развёрнутый старт экономит несколько кругов правок — модель не угадывает, а следует вашим правилам с самого начала.
Приложение работает без интернета?
Сеть нужна, чтобы получить ссылку, написать промпт и дождаться файла. Дальше страница открывается локально, данные лежат в памяти браузера и остаются при перезагрузке.
Что будет, когда закончатся токены?
Собранное приложение никуда не денется: файл у вас, он не связан с балансом. Токены нужны для новых шагов и правок, а не для работы готового файла.
Первый проект — сегодня вечером
Слова «старт» в боте достаточно, чтобы получить ссылку на установку и 5 000 000 токенов. Промпт уже лежит выше — останется вставить и ответить на вопросы.
