Киловаттик 👉👈 🙄

или как я за-вайб-кодил приложение для ЖКХ за неделю (Часть 1)

К моему удивлению, первая статья об эксперименте с вайб-кодингом всколыхнула пространство и у кого-то нашла отклик. Вкратце напомню идею: создать MVP проект исключительно при помощи ИИ агента без открытия IDE.

MVP — minimum viable product (англ). В переводе: минимально жизнеспособный продукт

IDE — Integrated Development Environment (англ). Среда разработки, a.k.a. программа, где программисты "творят".

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

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

В прошлый раз я просто проверял на что способен ИИ без прямого вмешательства разработчика. Сейчас же подойдем к делу более осознанно. Начнем с изучения рынка конкурентов: просто вобъю аббревиатуру "ЖКХ" в поисковик апп-стора. Дабы не показалось рекламой, названий не будет.

Что предлагает (взято со странички в магазине приложений):

квитанции по всем видам ЖКХ
оплата картой
передача показаний
история начисления и оплат
передача заявок в АДС (что бы это ни значило)
система пропусков
новости ЖКХ
отправка сообщений в УК
карта с УК и ТСЖ

На бумаге, функционал богатый, но складывается ощущение, что это одновременно про всё и ни о чём одновременно. Кроме того, нельзя получить представление о том, как работает каждый из пунктов (кроме разве что оплаты и карты ТСЖ — тут все очевидно).

Также есть вопросики к UI (пользовательский интерфейс). Складывается впечатление, словно его делали под мобильные телефоны, а потом решили растянуть х3 до размеров планшета. Выглядит он одновременно и монструозно, и карликово.

Disclaimer: Это не подробный гайд, поэтому совсем закапываться в разбор интерфейса я не буду — просто пройдемся по верхам и вайбам. Если кому-то интересно более глубокое погружение и разборы, пишите в комментариях.

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

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

Что предлагает:

трекинг всех расходов ЖКХ
напоминание о подаче
статистика расходов (как ресурсов, так и в денежном выражении)
новости ЖКХ для конкретной локации
можно вести несколько локаций

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

1. Нет демонстрации экрана, где показатели непосредственно вводятся (подозреваю, что ручками, иначе это был бы selling point)

2. Интерфейс перегружен, он пытается показать сразу всё. А когда дело доходит до экрана статистики, то он становится нечитаемым.

это не я жадный - это на страничке приложения всего 3 скришнота

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

Оставлю этот сегмент без комментариев, просто как референс.

1. У большинства предложений на рынке размытая идентичность. Тема ЖКХ слишком обширна, надо ограничиться одним понятным действием для пользователя и явным последствием этого действия.

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

3. Нет киллер-фичи, чего-то выделяющегося на фоне конкурентов — это однотипные приложения ЖКХ.

Приступим ко всеми любимому "систем дезигне", который обожают спрашивать на интервью для Senior позиций. Что скрывается под этим термином? Это проработка архитектуры проекта. Если еще проще: определение сущностей, описание их взаимодействий и выбор наиболее подходящего инструмента для решения задачи.

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

Аналитика явно показывает на какие цифры можно ориентироваться.

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

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

Нам нужно разработать MVP приложения в сфере ЖКХ, а именно, позволяющее удобно снимать показания с электросчетчиков, понимать как из этих показаний формируются счета на оплату ЖКХ.
Промпт для ИИ агента

После ответов на наводящие вопросы ИИ предложил такую схему (да, это не архитектура в классическом понимании):

## Tech Stack - **Framework:** Next.js 16+ (App Router) - **Styling:** Tailwind CSS v4 - **Database:** Yandex Cloud Managed PostgreSQL (RU data residency) - **ORM:** Drizzle ORM - **OCR:** Tesseract.js (client-side, privacy-preserving) - **Camera:** react-camera-pro - **Notifications:** Telegram Bot (node-telegram-bot-api) - **Deployment:** Vercel --- ## Project Structure kilovattik/ ├── app/ │ ├── page.tsx # Landing + dashboard │ ├── layout.tsx # Russian layout │ ├── globals.css │ ├── location/[id]/page.tsx # Location detail + meters + QR │ ├── read/page.tsx # Mobile OCR camera │ ├── qr/[token]/page.tsx # QR landing │ ├── history/[meterId]/page.tsx # Reading history │ └── api/ │ ├── locations/route.ts │ ├── meters/route.ts │ ├── readings/route.ts │ ├── qr/generate/route.ts │ ├── qr/validate/[token]/route.ts │ ├── telegram/auth/route.ts │ └── cron/reminders/route.ts ├── components/ │ ├── AddLocationForm.tsx │ ├── LocationCard.tsx │ ├── LocationList.tsx │ ├── MeterCard.tsx │ ├── AddMeterForm.tsx │ ├── ReadingForm.tsx │ ├── CameraCapture.tsx │ ├── OCRProcessor.tsx │ ├── QRCodeDisplay.tsx │ ├── TelegramLoginButton.tsx │ ├── ReminderSettings.tsx │ ├── ConsumptionChart.tsx │ └── DonationButton.tsx ├── lib/ │ ├── db.ts # Drizzle client │ ├── tracking.ts # Platform metrics │ ├── ocr.ts # Tesseract.js wrapper │ ├── telegram.ts # Bot API helpers │ └── calculations.ts # Bill calculation ├── db/ │ └── schema.ts # Drizzle schema ├── drizzle/ # Generated migrations ├── vercel.json # Cron job config ├── drizzle.config.ts └── package.json ```

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

Я даже не читал его — просто Ctrl-C -> Ctrl-V, чтобы оставалась интрига.

Create a mobile-first web app design for "Киловаттик" (Kilovattik) - an electric meter reading assistant for young Russian renters (18-30 years old). The app helps users track meter readings, calculate bills, and get Telegram reminders. ## Design Philosophy - Clean, modern, friendly - not intimidating or "government-like" - Approachable for people who find utility bills confusing - Electric/energy theme with warm yellow/amber accents - Russian language UI throughout - Mobile-first but works well on desktop ## Color Palette - Primary: Warm amber/yellow (#F59E0B or similar) - represents electricity - Background: Off-white/cream (#FAFAF9) for light mode - Text: Dark gray (#1F2937) for readability - Success: Green (#10B981) for completed readings - Accent: Electric blue (#3B82F6) for interactive elements - Cards: White with subtle shadows ## Typography - Clean sans-serif (Inter or similar) - Russian language support required - Large, readable numbers for meter values - Friendly, not corporate ## Screens to Design ### 1. Landing/Onboarding (first-time user) - Hero section with friendly illustration of a person easily reading their meter - Value proposition in Russian: "Забудьте о головной боли с показаниями счётчиков" - Three benefit cards: - "Сканируйте камерой" (OCR feature) - "Считайте автоматически" (auto calculation) - "Напоминания в Telegram" (reminders) - CTA button: "Начать бесплатно" - No login required - anonymous start ### 2. Dashboard (returning user with locations) - Header with app logo (stylized lightning bolt or meter icon) - "Ваши объекты" section - Floating "+" button to add new location - Bottom: "Поддержать проект" donation link (subtle) ### 3. Add Location Form - Simple form with: - Name input: "Название" (placeholder: "Квартира", "Дача") - Address input (optional): "Адрес (необязательно)" - "Добавить" primary button - Back navigation ### 4. Location Detail Page - Location header with name and address - Meters section - "Добавить счётчик" button - QR code section (desktop only): ### 5. Add Meter Form - Meter name input: "Название счётчика" - Tariff rate input: "Тариф (₽/кВт·ч)" with numeric keyboard - Meter type selector: - Initial reading input (optional): "Начальные показания" - "Добавить счётчик" button ### 6. Manual Reading Entry - Large meter display visualization at top - Previous reading shown: "Предыдущие: 12,345" - Large numeric input field: "Текущие показания" - Real-time calculation below: - "Сохранить" primary button - Alternative: "Сканировать камерой" secondary button ### 7. Camera OCR Screen TBD ### 8. OCR Result Confirmation TBD ### 9. Reading History - Month selector at top - Simple line chart showing consumption trend - Total for period: "Итого за месяц: 1,234.56 ₽" ### 10. Telegram Integration TBD ### 11. QR Code Display TBD .. Generate a complete design system with all screens, showing both mobile and desktop variants where different.

И вот такой дизайн мы получили.

Вспоминаю, как сегодня на работе прорабатывали UI для небольшого приложения из трех экранов. Мы два часа только делали наброски пользовательских историй и делали зарисовки (wireframes) экранных форм.
После этого специально обученный человек будет трансформировать наш поток мыслей в формализованный документ в Confluence. Затем дизайнер будет на основе этого делать макет в Figma около недели. И только потом уже я буду реализовывать воплощать в жизнь всю эту радость.
Правда там функционал более существенный, чем в "Киловаттике"

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

Самый волнительный момент, что же получится

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

Поэтому "чудеса монтажа" и мы получили работающий прототип сайта.

По традиции, для всех интересующихся, потыкать можно тут:

kilovattik.boroda.studio

Киловаттик — помощник учёта электроэнергии

Что важно отметить: это только первая часть. Как вы могли заметить, ни OCR снятия показаний счетчика, ни интеграции с телеграмм-ботом, ни статистики — всего этого еще нет.

Так же у меня есть ряд претензий к UX | UI, который предложил ИИ: