Архитектура приложения как здание: холл, кухня, кладовка, морозилка

Архитектура приложения как здание: холл, кухня, кладовка, морозилка

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

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


Коротко, если нет времени

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

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

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

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

Схема закрывает три ситуации в разговоре с заказчиком — оценка сроков, объяснение цены и разговор о доработках.

У вайбкодинга есть честная граница, и она проходит там, где перестаёшь понимать собственное здание.

Перед сдачей — четыре теста, по одному на помещение. Тема самая востребованная: 53,2% опроса, первое место.


Собрали и не понимаете, что собрали

Вайбкодинг — самая востребованная тема в моём опросе: 53,2%, первое место.

И самая частая жалоба у тех, кто попробовал: работает, но непонятно как. Внутри что-то происходит, где-то лежат данные, что-то куда-то отправляется. Открыть и разобраться страшно, показать клиенту — ещё страшнее.

Продавать то, чего не понимаешь, действительно нельзя. Заказчик задаст один уточняющий вопрос — и разговор кончится.

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

Здание с четырьмя помещениями

Любое приложение, сайт или бот устроены одинаково. Четыре зоны, у каждой своя работа.

Холл — то, что видит посетитель

Экран, кнопки, формы, тексты. Всё, с чем человек взаимодействует.

Что здесь важно: холл не хранит ничего и не решает ничего. Он показывает и передаёт дальше. Красивый холл при пустой кухне — это макет, а не продукт.

Что сюда относится в вашем проекте: страница, интерфейс, чат бота.

Вопрос заказчика, на который вы теперь отвечаете: «а как это будет выглядеть на телефоне?» — это вопрос про холл, и решается он в холле, ничего внутри не трогая.

Кухня — где происходит работа

Логика. Что случается, когда человек нажал кнопку: куда уходят данные, что проверяется, что считается, что отправляется.

Что здесь важно: кухня — единственное место, где принимаются решения. Если приложение ведёт себя неправильно, чинить надо здесь, а не в холле.

Вопрос заказчика: «а можно, чтобы при заказе больше трёх штук давалась скидка?» — это кухня.

Кладовка — где лежат данные

База: заявки, пользователи, товары, история. Всё, что должно сохраниться после того, как человек закрыл вкладку.

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

Вопрос заказчика: «а куда падают заявки и не потеряются ли они?» — кладовка. И это тот вопрос, на который надо уметь отвечать точно, потому что за ним стоит его реальный страх.

Морозилка — то, что редко меняется, но нужно

Настройки, ключи доступа, справочники, статичные материалы. Лежит и ждёт, трогают редко.

Что здесь важно: сюда попадает то, что нельзя показывать наружу, — доступы и ключи. Их место не в холле и не на кухне.

Метод бирки

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

Каждый кусок проекта подписывается: к какому помещению он относится. Буквально комментарием в файле или строкой в вашем описании.

Зачем это нужно, когда код пишет модель:

Вы можете вернуться. Через месяц открываете проект и за минуту понимаете, где что, вместо получаса чтения.

Вы можете объяснить. Заказчику, подрядчику, следующему исполнителю.

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

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

Как этим пользоваться в разговоре с заказчиком

Три ситуации, в которых схема закрывает вопрос.

«А сколько будет стоить доработка?» Спросите, что именно менять, и определите помещение. Правка в холле — часы. Изменение логики на кухне — дни. Перестройка кладовки — отдельный проект. Теперь у вас есть основание для вилки.

«А это надёжно?» Вопрос почти всегда про кладовку и морозилку: не потеряются ли данные и не утечёт ли доступ. Отвечайте про эти две зоны конкретно, а не «всё безопасно».

«А если я потом захочу добавить оплату?» Это кухня плюс морозилка. Скажите честно: добавляется, но это отдельная работа, потому что затрагивает две зоны и требует проверки.

Человек, который отвечает адресно, читается как тот, кто понимает свой продукт — даже если код за него написала модель. И это правда: понимать устройство и уметь писать синтаксис — разные вещи.

Где заканчивается вайбкодинг

Честная граница, чтобы не браться за то, что не сдадите.

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

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

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

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

Что проверять перед сдачей

Четыре теста, каждый по помещениям.

Холл: как выглядит на телефоне, что происходит при пустой форме, читается ли текст.

Кухня: что будет при неверных данных, при отправке дважды, при отсутствии связи.

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

Морозилка: не лежат ли ключи доступа там, где их видно.

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

Что для архитектуры приложения есть на платформе

Шаблоны сайтов — 343 готовых промпта для генерации анимированных сайтов. Каждая карточка — детально проработанное ТЗ: структура, типографика, цвета, поведение анимации при наведении и прокрутке. В среднем около 10 000 знаков, самые проработанные — до 75 000.

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

Тариф Plus.

Скиллы для Claude Code — более 10 000. Не промпты, а цепочки агентов, где задача разбита на части. Каталог открыт всем, файлы с Basic, продвинутые — Creator+.

Ассистенты категории «Инженеры» — девять штук, включая архитектора ботов и наставника по программированию. С Basic.

Регистрация бесплатная и открывает три дня доступа к Basic целиком.

С чего начать сегодня

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

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

С этого момента вы не «непонятно что собрали». Вы понимаете устройство — а этого достаточно, чтобы продавать.


Как понять устройство, не читая код

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

Скилл «Анализ архитектурных диаграмм» (продвинутый: Creator и выше, либо разово $9, либо 1000 XP): загружаете картинку блок-схемы или архитектурного чертежа, получаете структурированный разбор — компоненты, связи, направления потоков.

Это работает в обе стороны: чужую схему вы читаете как набор объектов, а свою архитектуру можете нарисовать от руки и превратить в данные.

Где это изучается

Экспресс-курс «Claude: от первой подсказки до собственной библиотеки мега-способностей», $9, тариф Creator и выше — структурные промпты с XML-тегами как каркас задачи, под бизнес-задачи.

Курс «VIBE CODING», тариф Creator — сборка приложения без ручного написания кода, но с пониманием, где что лежит.

Раздел Интерфейсы приложений, тариф Plus — готовые промпты под UI: дашборды, личные кабинеты, мобильные экраны. Это тот же принцип «холл, кухня, кладовка», только уже разложенный кем-то: видно, из каких комнат обычно состоит приложение.

Ассистенты, тариф Basic: Инженер-программист, Наставник по программированию — разбор решений и объяснение, почему так, а не иначе. Архитектор ботов — если приложение диалоговое.

И следующий шаг, если хотите глубже

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

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

Оба скилла продвинутые: Creator и выше, либо разово $9, либо 1000 XP.


Что взять на платформе под эту задачу

Что почитать дальше

От прототипа к продукту — что добавляется, когда приходят пользователи.

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

Что такое вайбкодинг — общая картина и границы.

Что из собранного продаётся — восемь форматов с ценами.

Skills для Claude Code — гид по скиллам целиком.


Смотрите также на AI SKILLS