Три версии одного файла
На ноутбуке — свежая таблица, на телефоне — присланная себе копия, на флешке — та, что отдавали помощнику. Правки разошлись, и никто не помнит, где настоящая.
Гайд · чтение 11 минут
Не «конструктор с тарифами» и не курс на полгода: приложение описывается словами, собирается в один HTML-файл и остаётся у вас на диске. Ниже — честный разбор границ этого способа, таблица расходов и инструкция, которая занимает один вечер.
Пока дел немного, блокнот и Excel справляются. Проблемы начинаются не от объёма, а от количества мест, где лежит одна и та же информация.
На ноутбуке — свежая таблица, на телефоне — присланная себе копия, на флешке — та, что отдавали помощнику. Правки разошлись, и никто не помнит, где настоящая.
Клиент написал в мессенджер, детали обсудили голосом, сроки — в другом чате. Через неделю приходится листать историю, чтобы вспомнить, что именно обещали.
Подписка на готовую программу берёт деньги за десятки функций, а вы пользуетесь тремя. Убрать лишнее нельзя, выгрузить всё в свой файл — тоже.
Способ простой: вы формулируете задачу человеческим языком, модель задаёт уточняющие вопросы и выдаёт готовый файл. Работает не магия, а точная постановка задачи.
Границы, о которых лучше знать заранее. В таком приложении нет сервера и базы: записи живут в локальном хранилище браузера на вашем устройстве, поэтому синхронизация между телефоном и ноутбуком сама не появится, а онлайн-оплату и рассылки настраивают отдельно. Зато нет регистрации, ежемесячного платежа и чужого сервиса, который может закрыться.
Даже если задачи не похожи — записи на массаж, заказы на мебель, учёт расходов — внутреннее устройство получается одинаковым. Эти блоки и просите собрать.
Главный экран: строки с именем, датой и суммой. Сортировка по свежести, поиск по первым буквам, ничего лишнего.
Одна запись целиком: контакты, договорённости, заметки и история изменений. Сюда же — быстрые действия.
Новая, в работе, выполнена, отменена. Статус меняется одним нажатием и виден в списке цветной меткой.
Отбор по дате, статусу и сумме. Это то, что заменяет прокрутку таблицы на тысячу строк.
Три числа сверху: сколько пришло, сколько в работе, сколько закрыто. Без графиков ради графиков.
Спокойные цвета, крупные кнопки, читаемость на телефоне. Приложение открывается там, где вы и так работаете.
Три пути к одному и тому же экрану. Разница не только в деньгах, но и в том, кто распоряжается результатом.
Сравнение без точных цен: суммы зависят от задачи и города.Таблицу можно листать вбок →
| Что сравниваем | Нанять разработчика | Купить подписку | Собрать самому |
|---|---|---|---|
| Деньги | Смета на десятки тысяч рублей, обычно несколькими платежами | Ежемесячный платёж за доступ к чужому сервису, дороже с каждым новым местом | Старт бесплатный: бот даёт 5 000 000 токенов |
| Срок | Недели, иногда месяцы, с этапами и согласованиями | День на настройку, но под чужую логику | Один вечер до первой рабочей версии |
| Правки | Новая смета, новая очередь, снова ждать | Только то, что предусмотрел тариф | Фразой в чат: «добавь фильтр по дате» |
| Кому принадлежит результат | Исполнителю: доступ к исходникам у него | Сервису: файл не забрать с собой | Вам: HTML-файл лежит на вашем диске |
Если задача живёт месяц-два, подписка может оказаться дешевле. Если вы ведёте дело годами и обрастаете своими правилами — файл, который можно править словами, обычно выгоднее.
Не нужно платить за разработку и не нужно ежемесячно отдавать деньги за доступ. Стартовые 5 000 000 токенов покрывают сборку и несколько кругов правок.
Это обычный файл: его можно скопировать на флешку, отправить себе в чат, открыть без интернета. Сервис не может отключить вам доступ или поменять тариф.
Не нужно описывать задачу на языке программистов и ждать, пока её поймут. «Сделай отмену с причиной» — достаточная формулировка, чтобы получить результат.
Заметили, что колонка не влезает на телефон, — поправили в тот же вечер. Никакой очереди, согласований и переноса на следующий месяц.
В подписках часть кнопок закрыта до следующего уровня. Здесь уровней нет: любую функцию обсуждаете напрямую, а не ищете её в тарифной сетке.
Инструкция одинаковая для любой задачи. Кнопки называются так же, как в интерфейсе, — ориентируйтесь по скриншотам.
1 установка
Ссылку на установку присылает бот после слова «старт». Когда ярлык появился на рабочем столе, шаг закрыт: никакие архивы распаковывать не нужно.
Внутри — рабочее окно и счётчик токенов внизу.
2 переход
В окне появится вопрос «С чего начнём?». Нужна зелёная кнопка «Открыть веб-интерфейс» — она открывает браузерную версию.
Работать в браузере удобнее: шире поле ввода, видно весь ответ, вкладка не перекрывает чат.
3 проект
Откроется страница «Ваши проекты» — список прошлых папок. Справа сверху кнопка «Создать проект»: у каждой задачи своя папка, поэтому файлы не перемешиваются.
Один проект — одно приложение. Если задумали второе, лучше не смешивать их в одной переписке.
4 название
В поле «Название проекта» напишите то, что поймёте через месяц: «Заказы на мебель», «Записи клиентов», «Расходы по бригаде». Имя можно менять, это не код.
После этого нажмите одноимённую кнопку под полем.
5 промпт
Промпт — прямо на этой странице, ниже. Нажмите «Скопировать промпт», затем поставьте курсор в поле сообщения и вставьте текст через Ctrl + V.
Длинный текст — это нормально. Вставляйте целиком, ничего не сокращая.
6 отправка
Кнопка со стрелкой справа от поля. То же самое делает клавиша Enter.
Если случайно закрыли вкладку — не беда: вернитесь в проект, текст можно вставить заново.
7 вопросы
Бот спросит, кто будет пользоваться приложением, что показывать сразу после открытия, какие статусы нужны. Отвечайте коротко и по делу: «только я», «список и статусы».
В конце он отдаст готовый HTML-файл приложения. Сохраните его — это и есть ваша программа.
Скопируйте целиком и вставьте в поле сообщения нового проекта.
Ты — senior product designer и frontend-разработчик. Помоги мне собрать рабочее приложение под мою задачу, хотя я не умею программировать. Все решения объясняй простыми словами, без терминов.
Сначала задай мне 8–15 коротких вопросов о моей работе, с вариантами ответов, по одному экрану за раз:
кто будет пользоваться приложением и сколько таких людей;
что я учитываю сейчас — клиентов, заказы, записи, деньги, товары;
из каких шагов состоит работа и чем она заканчивается;
какие статусы мне важно различать;
что я хочу видеть сразу после открытия;
какие поля обязательны, а какие можно оставить пустыми;
как я ищу нужную запись — по имени, дате или сумме;
что должно происходить при удалении и отмене;
нужны ли счётчики и какие именно;
на каких устройствах буду открывать приложение.
Не спрашивай про фреймворки, базы данных и архитектуру. После моих ответов коротко перескажи, что понял, и переходи к сборке.
Собери приложение «Моё приложение» одним HTML-файлом: разметка, стили и логика внутри, без backend, сборщиков, npm и внешних библиотек. Данные храни в localStorage, после каждого действия сохраняй и сразу перерисовывай интерфейс без перезагрузки страницы.
Что должно быть внутри:
1. Главный экран: список записей с датой, названием, суммой и цветной меткой статуса; поиск и фильтры по статусу и периоду.
2. Карточка записи: все поля, заметка, история изменений, кнопки смены статуса и удаления с подтверждением.
3. Форма добавления: понятные подписи, подсказки в пустых полях, проверка обязательных значений, сохранение без перезагрузки.
4. Счётчики сверху: сколько записей всего, сколько в работе, сколько закрыто.
5. Пустые состояния с объяснением, что сделать дальше, и понятные сообщения об ошибках.
Оформление выбери сам, но сделай его цельным: спокойная палитра, крупные кнопки, читаемая типографика, адаптив от 360 px, заметные состояния наведения и фокуса, закрытие окон по Escape. Никаких декоративных цифр и графиков ради украшения.
Добавь 5–7 реалистичных демонстрационных записей и кнопку «Удалить тестовые данные» с подтверждением. Предусмотри пустые поля, повреждённые данные в хранилище и удаление связанных записей.
Перед выдачей сам пройди сценарии: добавить запись, отредактировать, сменить статус, найти через поиск, удалить, перезагрузить страницу, открыть на узком экране. Найденное исправь сам.
Ответ — полный готовый HTML-файл целиком, без фрагментов вида «вставьте этот кусок». Все дальнейшие правки присылай тоже полным файлом.
Моя задача: приложение для моего бизнеса (замените эту фразу на свою задачу).
Откройте файл на реальном экране и добавьте одну запись пальцем. Мелкие кнопки и тесные отступы видно только там, а не в широком окне.
Заведите реальные записи, а не тестовые. Через день станет понятно, каких полей не хватает и какие статусы вы не используете.
Записывайте неудобства фразами: «хочу видеть сумму за неделю», «нужен фильтр по мастеру». Отправляйте пачкой — так правки не растянутся на месяц.
Нет. Вы описываете задачу словами, бот уточняет детали и сам собирает разметку, стили и логику в один файл. Вся ваша работа — отвечать на вопросы и говорить, что поправить.
Внутри файла нет сервера: записи лежат в хранилище браузера на вашем устройстве. Приложение открывается без интернета, но само по себе не переносит данные на другой телефон или ноутбук.
Только само приложение — ссылку присылает бот после слова «старт». Дальше вы нажимаете «Открыть веб-интерфейс» и работаете в браузере. Редактор кода, Node.js и командная строка не нужны.
Обычно вечер. Минуты уходят на установку и ответы, остальное — на проверку и правки. Чем конкретнее ответы о вашей работе, тем меньше переделок на втором круге.
Да, интерфейс подстраивается под узкий экран, а открывать файл удобно прямо в Telegram. Проверяйте на своём телефоне: эмулятор в браузере не покажет, как кнопка ощущается под палец.
Вернуться в тот же проект и попросить изменение словами. Вам отдадут новый полный файл; предыдущую версию сохраните отдельно — на случай, если новая покажется неудобной.
Напишите боту «старт», заберите ссылку на установку и 5 000 000 токенов, вернитесь на эту страницу за промптом — и соберите приложение под свою задачу.