Веб-разработкаОПУБЛИКОВАНО ОБНОВЛЕНО 5 МИН ЧТЕНИЯ

Я собрал сайт за один день на вайб-кодинге

Собрать рабочий сайт за один день на вайб-кодинге реально - Duskroom это доказывает: от случайной идеи до рабочих комнат с таймером, заметками и микшером звука за один выходной, примерно шесть-семь часов. Сработал именно порядок: сначала спека, потом дизайн, код в конце, а не наоборот. Пара часов ушла на дизайн в Claude Design, остальное - на сессию в Claude Code, которая прошла гладко только потому, что окружение было настроено до первого промпта про фичи: AGENTS.md, CLAUDE.md и copilot-instructions.md смотрят на один и тот же набор скиллов, всего затронуто около 42 файлов. Код вообще не был сложной частью. Сложной оказались фоновые видео - ещё два-три дня, потому что это единственный навык, которого у меня не было.

TL;DR

  • Duskroom - комнаты с таймером, заметками и микшером по каждому звуку поверх бесконечного фонового видео - спека, дизайн и код за один день, примерно шесть-семь часов.
  • День сработал только из-за порядка: вопросы про продукт, потом референсы, потом дизайн в Claude Design, потом настроенное окружение Claude Code и только потом фичи. До первого промпта про фичи затронуто около 42 файлов.
  • Видео заняли ещё два-три дня. Вайб-кодинг сжал всё, что я и так умею, и не сжал ничего из того, чего не умею.

Почему я перестал работать с открытой вкладкой YouTube

Я не могу сосредоточиться в тишине. Тишина не очищает голову, она наоборот забивает её мыслями, которые не имеют никакого отношения к текущей задаче. Фоновый звук это чинит, и годами таким фоном была вкладка YouTube: дождь, окно, луп, который идёт достаточно долго, чтобы про него забыть.

Работает ровно до момента, когда тебе от него что-то нужно. Я работаю по помодоро, значит нужен таймер - на YouTube его нет. Я по ходу работы делаю заметки, значит им нужно место, а не второе окно поверх видео. И микс никогда не тот: дождь слишком громкий на фоне остального, а убавить один звук отдельно от всех нельзя.

Поэтому Duskroom - это комнаты. Заходишь в одну и остаёшься в ней. В каждой комнате таймер с двумя режимами - часы и фокус-таймер, - заметки и микшер по каждому звуку. Фоновое видео крутится бесконечно, так что на сороковой минуте тебя ничто не выбьет. И любая комната разворачивается на весь экран, и это как раз суть: почти у всех, кого я знаю и кто целый день сидит за компьютером, второй монитор занят ничем. У меня на нём висит Reading Room.

Нужна ли вайб-кодингу спека?

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

Третий - это фильтр. Про продукт, который ещё никто не построил, легко быть честным. Три вопроса не остались тремя: из них вырос длинный список уточняющих, и именно ответы на этот список сформировали продукт. Комнаты, два режима таймера, микшер по каждому звуку, полноэкранный режим под второй монитор - ничего из этого не пришло из брейншторма по фичам. Это пришло из описания моего собственного неудачного вечера в достаточных деталях, чтобы фичи стали очевидными.

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

Где искать референсы для того, чего не существует?

Сначала я пошёл по очевидным местам: ютуб-каналы, форумы, сайты, которые делают что-то смежное. Для лендинга это сработало, и лендинг я собрал прямо из найденного. Для комнат - нет. Не нашлось ничего достаточно близкого, чтобы позаимствовать, а это либо плохой знак, либо повод строить. Я решил, что второе.

Дальше дизайн, в Claude Design. И тут я хочу сказать прямо про то, в чём люди чаще всего ошибаются с нейросетями: переменная - не модель, переменная - твой промпт. Можно дать самому сильному агенту, который сейчас существует, расплывчатый неструктурированный промпт и получить в ответ что-то, что забудешь через минуту. Вкус живёт в промпте: какие референсы ты называешь, какое настроение описываешь, какие ограничения ставишь, от чего явно отказываешься. Структурируй промпт - и модели будет в чём быть хорошей.

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

42 файла, к которым я прикоснулся до первой фичи

Сессия в Claude Code началась не с фичи. Она началась с окружения: скиллы, инструкции, промпты, контекст проекта. К моменту, когда настройка была закончена, создано или обновлено было около 42 файлов.

Суть в том, что AGENTS.md, CLAUDE.md и copilot-instructions.md должны описывать один и тот же проект. Я работаю с Claude и Copilot параллельно, и если каждый читает свою личную версию правил, ты весь день работаешь третейским судьёй между двумя ассистентами с разными мнениями о твоей кодовой базе. Один источник правды, на который ссылаются все. Вкладываться в эти общие инструкции вместо того, чтобы объяснять проект заново каждую сессию, - одно из 4 правил ИИ, которые я понял через боль.

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

Шесть часов от идеи до рабочих комнат

Планировалось два выходных дня. Один съели личные дела, так что на всю сборку остался один день, примерно шесть-семь часов, и это ограничение дало проекту больше, чем дал бы лишний день.

Внутри этого дня сам кодинг был спокойной частью. Тяжёлое тянули на себе markdown-файлы и план, так что сессия свелась к тому, что я читаю вывод и подтверждаю направление, а не объясняю продукт по десятому кругу. Комнаты, оба режима таймера, заметки, микшер, полноэкранный режим - всё уместилось в день.

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

Видео заняли больше, чем весь сайт

Стеной оказалось наполнение комнат. Duskroom нужны фоновые видео, а видео - ниша, в которой я никогда не работал. Я не знал, какие инструменты стоит пробовать, как ими пользоваться и как написать промпт, который даст то, что ты реально захочешь два часа держать в фоне за работой.

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

Три дня на три видео против одного дня на рабочий продукт. Именно это соотношение - главный урок сборки, и это не тот урок, который обычно подразумевают под словом «вайб-кодинг». Нейросеть не убрала работу. Она убрала ту работу, которую я делал уже сто раз, и после этого единственным, что осталось стоять, оказалась незнакомая работа - и теперь она и была всем проектом.

Что даёт один день вайб-кодинга и чего он стоит

Что даёт

Чего стоит

Рабочий продукт, пока идея ещё горит

Ты выпускаешь свои дефолты - знакомый стек, знакомые паттерны, ноль исследования

Дизайн решён за часы, а не за неделю накопления вкладок

Дизайн ровно настолько хорош, насколько хорош промпт, и ленивый промпт видно

Сессия кодинга без трения

Трение переехало раньше, в спеку и конфиг, и оно не опционально

Доказательство, что вещь стоит продолжения

Всё, чего ты никогда не делал, всё равно займёт свои дни

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

Duskroom работает, и я сам сижу в нём почти каждый рабочий день. Комнаты, которые пока пустые, ждут видео, а не кода - и это довольно точно говорит, какой навык мне качать следующим.

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

Октай Искендеров

Дизайнер и фулстек-разработчик, веду klauzzdcode - студию одного человека в Баку. На фрилансе с 2023 года: выкатываю продукты от Figma до деплоя и записываю то, что переживает контакт с продакшеном.

ИСТОРИЯ →

FAQ

Что такое вайб-кодинг на практике?

На практике это когда ты описываешь агенту, что нужно, и проверяешь то, что он собрал, вместо того чтобы набивать каждую строку руками. Но думать за тебя это не отменяет. В моём дне до первого промпта про фичи были написанная спека, решённый дизайн и настроенное окружение - «вайб» остался только на последнем отрезке.

Реально ли собрать полноценный сайт за один день?

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

Какие файлы настроить до начала сессии с ИИ?

AGENTS.md, CLAUDE.md и copilot-instructions.md, и все они должны описывать один проект и ссылаться на один набор скиллов. Если у тебя больше одного ассистента, разъехавшиеся файлы правил - это два ассистента с разными мнениями о твоём коде. У меня настройка затронула около 42 файлов до первой фичи.

Что именно делает Duskroom?

Даёт комнаты, в которых можно работать: бесконечное фоновое видео плюс таймер, заметки и микшер по каждому звуку. У таймера два режима - часы и фокус под помодоро, - а любая комната разворачивается на весь экран, чтобы жить на втором мониторе.