Почему программа для склада выглядит как стратегия, а ваша до сих пор как таблица?
Разработчик показал программу для сети складов, где грузовики ездят по карте, как юниты, а запасы висят сверху, как золото в игре. Разбираем, из каких приёмов собран эффект, и даём шесть промптов, чтобы ИИ так же переделал вашу таблицу, CRM или таск-трекер. Плюс установка Claude Code и честно о том, где игровой интерфейс мешает.
Что внутри
бесплатно, целикомОдин пост, одна строка о том, как собрано
просмотров у поста меньше чем за сутки
по данным X утром 4 октябрявидео без звука: запись экрана программы
без закадра и монтажао том, как это собрано: Built with Opus 5.5
стек и сроки автор не называетЧетыре приёма из стратегий, которые работают и в рабочей программе
Дилум Санджая, разработчик, который выкладывает демо, собранные с ИИ, показал программу для сети складов. Это изометрическая карта, как в градостроительной стратегии: склады, дороги, грузовики, жёлтые погрузчики и паллеты. Подпись к посту короткая: промышленный софт не обязан ощущаться промышленным, управляйте складами так, будто играете в стратегию. Эффект держится на четырёх приёмах.
Ресурсы сверху
Золото, дерево и население всегда на виду.
Запасы в паллетах, грузовики на площадке, доля доставок вовремя. У каждого числа стрелка: выросло или упало.
Юниты на карте
Отряды ходят по карте, и видно, кто чем занят.
Грузовики заезжают в доки, погрузчики возят паллеты, маршрут грузовика подсвечен линией.
Карточка по клику
Кликаешь по юниту и видишь здоровье, груз и задачу.
Клик по паллете, погрузчику или грузовику открывает карточку: количество, заряд батареи, время прибытия, загрузка.
Журнал и прогресс
Очередь строительства и лента событий.
Внизу трекинг отгрузки по шагам, от подтверждения до доставки, и вкладки доков, погрузчиков и грузовиков со статусами.
Перенесите на себя
Приём не про склады. Любая программа, где есть запасы, исполнители и статусы, раскладывается так же.
Склад
Ресурсы: остатки, свободные места, отгрузки на сегодня
Юниты: грузовики, погрузчики, паллеты
CRM
Ресурсы: сделки в работе, выручка месяца, конверсия
Юниты: сделки идут по карте воронки, менеджеры ведут их, как отряды
Таск-трекер
Ресурсы: задачи в спринте, дедлайны, загрузка команды
Юниты: задачи двигаются по полю от «к работе» до «готово»
Что понадобится
Хватит одного из трёх вариантов. Для первого прототипа подойдёт обычный чат, для программы, которую вы будете развивать, удобнее Claude Code.
Claude в чате
claude.ai или приложение. Один промпт, и через минуту в окне чата живой прототип (артефакт). Подходит, чтобы проверить идею на моковых данных.
Claude Code
Агент в терминале: сам создаёт файлы проекта, ставит библиотеки, запускает и проверяет. Нужен, когда прототип пора превращать в программу с настоящими данными.
Другие ИИ-редакторы
Cursor, Codex, Windsurf и похожие. Промпты ниже работают и там: они описывают задачу, а не конкретный инструмент.
Модель: старшая Opus для сложной сцены и архитектуры, Sonnet быстрее для правок. Дилум в посте указал Opus 5.5.
Установка Claude Code
macOS и Linux
- Откройте Терминал: Cmd + Пробел, наберите «Терминал».
- Вставьте команду установки ниже и нажмите Enter.
- Перейдите в папку проекта, например cd ~/Projects/my-app.
- Наберите claude и войдите через аккаунт Claude в браузере.
curl -fsSL https://claude.ai/install.sh | bashWindows
- Поставьте Git for Windows с git-scm.com: Claude Code пользуется его оболочкой.
- Откройте PowerShell и вставьте команду установки ниже.
- Перезапустите PowerShell и перейдите в папку проекта, например cd C:\Projects\my-app.
- Наберите claude и войдите через аккаунт Claude в браузере.
irm https://claude.ai/install.ps1 | iexКоманды установки иногда меняются, актуальная инструкция на docs.claude.com в разделе Claude Code. Если привычнее npm, подойдёт npm install -g @anthropic-ai/claude-code (нужен Node.js 18 или новее).
Сколько стоит
- Free: чат с небольшими лимитами, Claude Code не входит
- Pro ≈ $20/мес: чат и Claude Code
- Max от ≈ $100/мес: в разы больше лимитов
- другие ИИ-редакторы от ≈ $20/мес, у многих есть пробный период
Цены ориентировочные, на октябрь 2026. Тарифы, лимиты и версии моделей регулярно обновляются: проверяйте актуальные условия на сайте вендора.
Пять промптов от серой таблицы до стратегии
Идите по порядку и не склеивайте шаги: каждый следующий опирается на результат предыдущего. Замените то, что в квадратных скобках.
01.Концепт: опишите программу и попросите редизайн
Модель не видит вашу таблицу. Чем точнее вы опишете, кто ей пользуется и что там происходит, тем ближе концепт к делу.
Вот моя рабочая программа: [что это: склад / CRM / таск-трекер]. Ей каждый день пользуются [кто], чтобы [главная задача].
Сейчас это [таблица / список / дашборд] с колонками: [перечислить].
Чаще всего люди делают вот что: [3-5 действий, например «найти заказ», «сменить статус»].
Предложи редизайн в стиле изометрической стратегии:
1. Панель ресурсов сверху: 3-5 главных чисел, у каждого стрелка изменения.
2. Карта: что на ней будет местностью, а что юнитами.
3. Карточка юнита по клику: какие поля и какие 1-2 действия.
4. Лента событий: какие события в неё попадают.
Сначала дай описание экрана и список сущностей. Код пока не пиши.Последняя строка экономит время: ошибку в концепте дешевле поправить словами, чем в коде.
02.Модель данных и моковые данные
Игровой экран держится на данных. Сначала типы и правдоподобные моки, потом картинка.
Возьми концепт, который мы согласовали.
1. Опиши типы данных на TypeScript: ресурсы, юниты (у каждого тип, статус и координаты на карте), события.
2. Сгенерируй моковые данные: [20-40] юнитов, [3-5] локаций, [30] событий за день. Названия и числа правдоподобные. Людей не выдумывай, используй роли: «водитель 1», «менеджер 2».
3. Сделай функцию, которая раз в 2-3 секунды двигает данные: юнит меняет статус, ресурс растёт или падает, в ленту приходит событие.
Положи данные в отдельный модуль, чтобы потом подменить их настоящими без переписывания экрана.Последний абзац главный: из-за него четвёртый шаг не превратится в переписывание всего.
03.Изометрическая карта и анимация
Здесь легко утонуть. Просите простую версию: плоские тайлы-ромбы и иконки вместо 3D-моделей. Красоту добавите потом.
Собери экран на React + TypeScript.
- Карта: изометрическая сетка на [canvas или PixiJS]. Тайлы ромбами, юниты простыми фигурами или иконками, цвет по статусу. Без 3D-моделей.
- Камера: перетаскивание мышью, зум колесом, кнопка «вернуть вид».
- Юниты плавно переезжают между клетками, когда меняется их статус.
- Клик по юниту открывает карточку справа, клик мимо закрывает.
- Сверху панель ресурсов, снизу лента событий.
- Палитра светлая и спокойная, статус читается и по цвету, и по подписи.
Запусти и проверь, что при 40 юнитах экран не тормозит. Если тормозит, объясни почему и предложи упрощение.Хочется объёма, как у Дилума? Следующим шагом попросите версию на Three.js. Но сначала добейтесь, чтобы плоская версия работала.
К чему ведут промпты: так выглядят карточка юнита и маршрут у Дилума
Карточка по клику: зарядная станция и погрузчик
Видео: @DilumSanjaya в XГрузовик едет к своему доку по подсвеченному маршруту
Видео: @DilumSanjaya в X04.Настоящие данные: CSV, Google Таблицы или API
Подключайте источник, который у вас уже есть. Начните с чтения, запись добавите позже.
Замени моковые данные настоящими. Источник: [CSV-файл / Google Таблица по ссылке / API по адресу ...]. Вот пример строк: [вставить 5 строк без персональных данных].
1. Напиши адаптер, который превращает эти строки в наши типы ресурсов, юнитов и событий. Колонки, которые не ложатся в типы, перечисли мне.
2. Данные обновляются раз в [30] секунд без перезагрузки страницы.
3. Если источник недоступен, экран показывает последние данные и плашку «нет связи», а не падает.
4. Пока только чтение: ничего не записывай в источник.
Ключи и доступы читай из .env, в код их не вставляй.В пример строк не кладите имена, телефоны и адреса клиентов. Модели хватит структуры.
05.Полировка и доступность
Игровой экран красив, пока им не пользуется человек в спешке с ноутбуком на 13 дюймов. Этот промпт возвращает удобство.
Доведи экран до рабочего состояния:
1. Добавь переключатель «Карта / Таблица». Таблица показывает те же данные с сортировкой, фильтрами и поиском.
2. Все действия из карточки доступны с клавиатуры, фокус виден.
3. Статусы различимы без цвета: рядом подпись или иконка.
4. Если в системе включено уменьшение движения, анимации выключаются.
5. Контраст текста не ниже уровня AA. Проверь и перечисли, что поправил.
6. На экране шириной 1280 px ничего не перекрывается.Первый пункт не обсуждается. Почему, разобрано ниже в разделе про ограничения.
От чата до приложения: 3 способа поставить ИИ на работу
Промпты выше работают, если вы уже знаете, где запускать ИИ и что делать с файлами проекта. Курс ведёт с нуля: чат, браузер, терминал, а в финале вы своими руками собираете и публикуете своё приложение. Опыт в коде не нужен.
Что проверить, прежде чем показывать команде
Красивый экран легко принять за готовый. Пройдите по двум спискам, а последним промптом дайте модели проверить код.
Данные и безопасность
- Числа на панели ресурсов сходятся с исходной таблицей.
- В коде и в репозитории нет ключей и паролей, только в .env.
- Персональные данные не попадают в логи и не видны тем, кому не нужны.
- Программа только читает источник, пока вы явно не решили иначе.
- При обрыве связи экран честно пишет «нет связи».
- Есть копия исходной таблицы на случай ошибки.
Удобство
- Новый человек находит нужный заказ меньше чем за 10 секунд.
- Табличный вид на месте и умеет всё, что умела старая таблица.
- Экран работает на ноутбуке коллеги, а не только на вашем.
- Анимация не мешает читать, а при уменьшении движения выключается.
- Карточка юнита закрывается по Esc и кликом мимо.
- Два-три коллеги попробовали без подсказок, и вы записали, где они застряли.
06.Ревью перед показом
Проведи ревью проекта перед показом команде. Проверь:
1. Ключи, пароли и токены в коде и в истории git.
2. Что будет при пустых данных, при 10 000 строк и при обрыве связи.
3. Совпадают ли итоги на панели ресурсов с исходными данными: посчитай на примере.
4. Доступность: клавиатура, контраст, уменьшение движения.
Выдай список проблем по важности. Ничего не исправляй, пока я не выберу, что чинить.Запрет на исправления в конце нужен, чтобы вы увидели всю картину до того, как модель начнёт править код.
Где игровой интерфейс мешает
- 01
Плотный ввод данных. Набить 50 строк накладной быстрее в таблице, чем кликая по юнитам.
- 02
Массовые правки. Сменить статус сотне заказов удобнее фильтром и одной кнопкой.
- 03
Отчёты и сверки. Бухгалтеру и аудитору нужны строки, итоги и выгрузка, а не карта.
- 04
Слабые компьютеры и большие объёмы. Тысячи анимированных юнитов нагружают ноутбук, поэтому нужен лимит и упрощённый режим.
Поэтому таблица остаётся. Карта отвечает на вопрос «что происходит прямо сейчас», таблица на вопрос «что именно и сколько». Лучше всего работают оба вида над одними данными с переключателем между ними.
Шесть шагов от таблицы до карты
Порядок, в котором проще всего не застрять. Один шаг за вечер нормальный темп.
01.Выберите одну программу
Ту, которой пользуются каждый день и где есть исполнители и статусы: склад, заявки, доставка, задачи.
Это карта, а не инструкция. Пошаговая сборка своего приложения с ИИ с нуля разобрана в курсе «От чата до приложения».
Честно об источнике
Мы не знаем, как именно Дилум собирал свою программу: в посте нет ни стека, ни сроков, ни ответа, настоящий это продукт или концепт. Есть одна строка: Built with Opus 5.5. Промпты в этом гайде наш способ получить похожий результат, а не пересказ его процесса. Кадры и отрывки видео принадлежат автору и показаны со ссылкой на пост.
Пост автора в XНаучитесь собирать такие программы сами
Гайд даёт направление. В курсах вы проходите путь целиком: от первого промпта до опубликованного приложения, плюс агенты, автоматизация и работа в Claude Code.
Комментарии