КЕЙСВеб-разработка · ИИЗАВЕРШЁН

Duskroom

Бесплатный веб-сервис для улучшения фокуса: комнаты с бесконечным видео, pomodoro-таймер, заметки и микшер по каждому звуку. Spec, дизайн и код за один день.

Роль
Продукт, дизайн, разработка, деплой
Сроки
1 день на сборку, 4 дня целиком
Формат
Веб-приложение

Результаты

Инструмента заменяет одна вкладка
4 -> 1Инструмента заменяет одна вкладка
От пустой страницы до готового продукта
6-7 hОт пустой страницы до готового продукта
Шагов регистрации, чтобы начать пользоваться
0Шагов регистрации, чтобы начать пользоваться

Стек

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Vercel
  • Google Sheets
  • Zod

/01Задача

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

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

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

/02Подход

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

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

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

/03Результат

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

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

Галерея

Три комнаты - Neon Balcony, Rain in the Ruins и Reading Room - и то, для кого предназначена каждая из них.
Комната Neon Balcony с открытыми таймером фокуса, заметками и микшером звука.

FAQ

Что такое Duskroom?

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

Сколько времени занял Duskroom?

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

Почему просто не использовать эмбиент-видео на YouTube?

Потому что YouTube даёт тебе только звук и больше ничего. Там нет таймера для Pomodoro-сессий, негде записать заметку, не уходя со страницы с видео, и есть только один регулятор громкости, который меняет громкость всех звуков одновременно. Duskroom объединяет все три функции прямо внутри комнаты.

Duskroom бесплатный?

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