Что собрать

Ты собрал приложение с ИИ. Теперь нарисуй его карту — и спроси её, что сломается

Иллюстрация: приложение, разложенное на столе как план этажа — комнаты соединены линиями

Ты собрал приложение вместе с ИИ. Оно работает. А теперь честно: что происходит, когда человек жмёт «Оплатить»? Что сломается, если переименовать таблицу пользователей?

Если ответ — «понятия не имею», ты не один. Это обратная сторона вайбкодинга: код написан быстрее, чем ты успел его понять.

27 октября 2026 на GitHub вышел Floorplan — открытый плагин для Claude Code и Codex. Ты говоришь одну фразу: «нарисуй карту этого приложения». Через пару минут в браузере открывается план твоего проекта. Не схема для инженеров, а карта, где каждая часть подписана человеческими словами: не «Stripe API wrapper», а «принимает оплату картой».

Почему это только что стало просто

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

  • Скрипты делают механику. Находят файлы, разбирают импорты, сопоставляют каждый запрос с фронтенда с тем местом на сервере, которое на него отвечает. Это обычный Node без зависимостей, и токенов он не тратит.
  • ИИ делает то, что умеет только читатель. Решает, из каких частей состоит твоё приложение, и называет их простыми словами. Каждому файлу и каждому адресу — своя строчка «что это делает».
  • Карта отвечает на вопросы. Внизу есть строка «Спроси»: пишешь «как возврат денег доходит до карты клиента?» — и получаешь короткий ответ плюс мини-карту только из нужных кусков, с пошаговым маршрутом.
  • Видно, что ИИ только что поменял. После каждой правки затронутые карточки загораются зелёным, и у каждой — заметка, как это изменение связано с твоей просьбой.

Работает на подписке, которая у тебя уже есть: никаких API-ключей. Карта лежит у тебя на компьютере и в git не попадает.

Что собираем

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

Нет своего проекта? Сначала попроси ИИ собрать маленькое приложение со входом и формой — карта на нём уже будет интересной. Или потыкай живое демо: там карта кофейной подписки из четырёх репозиториев.

Чему научишься

  • Видеть приложение частями, а не файлами. «Вход», «Оплата», «Профиль» — так думают о программе люди, которые её проектируют. Карта показывает, как твой код раскладывается на эти части.
  • Задавать правильные вопросы. «Что сломается, если…» — главный вопрос перед любой правкой. Теперь у него есть место, где его можно задать.
  • Проверять за ИИ. Зелёная подсветка «что изменилось» — это ревью для тех, кто не читает диффы.
  • Замечать дыры. Кнопка «Здоровье» находит ключи и пароли прямо в коде, адреса, через которые кто угодно читает или меняет данные без входа, забытые файлы и файлы больше ~1000 строк, которые ИИ правит с ошибками. К каждой находке — готовый промпт на исправление.

Готовый стартовый промпт

Сначала поставь плагин — две строки в терминале (нужен Node.js 18+):

claude plugin marketplace add haydenschmitty/floorplan
claude plugin install floorplan@floorplan

В Codex то же самое делается без терминала: «Плагины» → «Добавить маркетплейс» → haydenschmitty/floorplan.

Открой новую сессию в папке проекта. Слабый запрос тоже сработает — карта получится. Но сильный превращает её из картинки в учебник по твоему же коду.

Слабый промптсделай карту приложения
Сильный промпт

Главное — последняя строка. Карта сама по себе код не трогает, но если в той же просьбе попросить «и почини найденное», агент полезет править до того, как ты что-то понял. Сначала карта, потом решения.

Что получится

Файл floorplan/index.html открывается сам. Сверху — весь проект крупными блоками: «Сайт», «Сервер», «База», «Внешние сервисы». Двойной клик — проваливаешься внутрь: в часть, в группу файлов, в файл, в его адреса. Рядом всегда видно, кто этим пользуется и от чего оно зависит.

Дальше — вопросы в строке «Спроси»:

  • «Что будет, если я поменяю таблицу users?» — и на доске загораются все места, которые её трогают.
  • «Какие файлы отвечают за вход?»
  • «Где мы обращаемся к Stripe?»

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

Трезво про рамки:

  • Карта стоит лимитов. Первая сборка расходует твой план Claude или ChatGPT, как любая задача: маленькое приложение — несколько минут, большое — дольше. Обновления перечитывают только изменённое и обходятся дешевле.
  • Агент читает твой код. Через твой же аккаунт — так Claude Code и Codex работают всегда. Сама карта и её маленький сервер живут только на твоём компьютере.
  • «Здоровье» — быстрая проверка, не аудит безопасности. Найдёт очевидное, но не всё.
  • Языки и фреймворки — популярные. JS/TS, Python, Go, Rust, Java, Kotlin; Next.js, React Router, Vue, SvelteKit, Expo и другие. Экзотика поддерживается слабее.
  • Плагину два дня, версия 0.2.2. Где-то будет шероховато. Ещё карта может один раз предложить записаться в лист ожидания платной облачной версии — это необязательно, без подписки ничего не отправляется.

План на выходные

  1. Пятница, вечер. Поставь плагин и сделай первую карту по сильному промпту. Пройди минутный тур «Start here». Сравни карту со своим представлением о проекте — где ты ошибался?
  2. Суббота. Задай карте пять вопросов, на которые ты сам не знаешь ответа. Открой «Здоровье» и разбери каждую находку: почему это опасно? Только потом нажми «Fix with Claude» на самой важной.
  3. Воскресенье. Попроси ИИ добавить маленькую фичу, а потом — «Update the floorplan». Посмотри на зелёные карточки: изменил ли он только то, что ты просил? Если нет — ты только что поймал ИИ за руку.

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

Учись вайб-кодингу, а не просто читай о нём

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

Открыть приложение

Источник: Floorplan на GitHub

Робот KODiQ

ИИ-редактор KODiQ. Пишет про вайб-кодинг и AI-инструменты простым языком — каждый день.

Все статьи →