1
Приложение установлено
Ссылку на установку бот присылает после слова «старт». Откройте ярлык AI DIY на компьютере.
01 / Что происходит
Модель не догадывается — она собирает по описанию
Нейросеть, которая пишет код, обучена на миллионах примеров программ. Она не знает ваш бизнес, но умеет превращать слова в разметку, стили и логику — если слова точные.
01
Вы описываете процесс
Кто пользуется приложением, какие записи ведёт, что нажимает и что должно произойти после. Словами, как объяснили бы новому сотруднику.
02
Модель задаёт вопросы
Восемь–пятнадцать уточнений про поля, статусы и экраны. Они закрывают пробелы, которые легко не заметить в первом описании.
03
Вы проверяете результат
Открываете файл, проходите сценарии и просите правки. Не «переделай всё», а «после сохранения запись появляется в списке сверху».
Что на выходе
Один HTML-файл: внутри разметка, стили и скрипт, данные лежат в браузере. Его можно открыть двойным кликом, переслать коллеге и хранить на диске. Ни сервера, ни установки, ни ежемесячного платежа.
Где модель ошибается
Она может придумать лишнее поле, перепутать статус или сломать старую логику при правке. Проверка — часть работы, а не недоверие к технологии: вы знаете процесс, она знает синтаксис.
02 / Практика
Как выглядит работа: четыре сообщения до результата
Сценарий одинаковый для склада, записи клиентов, бота и калькулятора. Меняется только предмет разговора.
-
Вы
«Нужен учёт заявок: клиенты, статусы, суммы, поиск. Хочу открывать список и сразу видеть, что горит».
-
Бот
«Кто будет пользоваться? Что показывать сразу после открытия? Нужны ли фильтры и отчёты?»
-
Вы
«Пользуюсь я и помощник. Сразу — список новых заявок и суммы за неделю. Фильтр по статусу нужен».
-
Результат
Готовый HTML-файл с демо-данными и кнопкой очистки. Дальше — правки словами: «добавь колонку суммы», «сделай фильтр по дате».
Каждый ответ сужает неопределённость. Чем меньше в описании «сделай красиво» и больше «после сохранения запись появляется в списке сверху», тем ближе первая версия к тому, чем действительно хочется пользоваться.
03 / Стоимость
Смета, подписка или свой файл
Сравниваем не прайсы, а то, что останется у вас после проекта — и сколько будет стоить следующая правка.
| Критерий | Нанять разработчика | Купить подписку | Собрать самому |
|---|---|---|---|
| Деньги | Смета на первую версию — десятки тысяч рублей. | Ежемесячный платёж, пока сервис нужен. | 5 млн токенов на сборку бесплатно. |
| Срок | Недели на согласование и разработку. | Быстро, но только в рамках готовых экранов. | Один вечер и семь шагов. |
| Правки | Новое техническое задание и новая смета. | Ждать обновления сервиса или писать в поддержку. | Одна фраза в чате — модель обновит файл. |
| Владение | Зависит от договора и условий передачи прав. | Сервису: с окончанием подписки доступ закроется. | Вам: файл лежит на вашем диске. |
| Зависимость | От исполнителя и его загрузки. | От тарифа и правил площадки. | Только от браузера. |
Точные цены у подрядчиков и сервисов разные, поэтому здесь нет цифр — только структура расходов. Важнее, где останется инструмент после сборки.
04 / Аргументы
Пять причин собрать самому
Это не про экономию ради экономии, а про контроль: вы меняете правило — приложение меняется вместе с ним.
-
Экономия
Нет сметы за разработку и ежемесячной подписки: 5 млн токенов на первую сборку бот выдаёт бесплатно.
-
Приложение принадлежит вам
Готовый файл хранится на диске: открывайте дома, на работе или с флешки — доступ не привязан к чужому кабинету.
-
Правки словами
Новое поле, фильтр или отчёт — это сообщение в чате, а не новый спринт и не переговоры о бюджете.
-
Не нужно ждать разработчика
Сегодня описали задачу — сегодня проверили. Сезон, акция или новый сотрудник не упираются в очередь исполнителя.
-
Все экраны сразу
Без тарифа «функции за доплату»: список, карточка, форма и сводка появляются в одном файле.
05 / Инструкция
Семь шагов: от «старт» до готового файла
Кнопки называем так же, как на экране. Промпт копируется прямо со страницы — скачивать ничего не нужно.
2
Откройте веб-интерфейс
Нажмите Открыть веб-интерфейс. Дальше работа идёт в браузере: там удобнее читать файлы и сообщения.
3
Создайте проект
В списке проектов нажмите Создать проект. Каждый проект — отдельная папка под одну задачу.
4
Назовите проект
Впишите понятное название, например «Мини-приложение: учёт», и нажмите Создать проект.
5
Вставьте промпт
Скопируйте промпт с этой страницы и вставьте в поле сообщения через Ctrl+V.
6
Отправьте сообщение
Нажмите Отправить ↑ или Enter. Промпт длинный — это нормально, отправляйте целиком.
7
Ответьте на 8–15 вопросов
Бот спросит про пользователей, поля и экраны — отвечайте обычными словами. После ответов он отдаст готовый HTML-файл приложения.
06 / Промпт
Промпт, который запускает сборку
Копируется целиком. В последней строке замените задачу на свою — остальное оставьте как есть: именно вопросы и требования к файлу дают предсказуемый результат.
Стартовый промпт для нейросети
Задаёт вопросы, собирает один HTML-файл и проверяет сценарии.
Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без технических знаний собрать приложение «Мини-приложение: учёт».
Сначала задай 8–15 простых вопросов: кто пользуется приложением, какие записи ведутся, какие поля важны, какие статусы, что показывать сразу после открытия, какие действия нужны чаще всего, нужны ли поиск, фильтры и отчёты, как хранить данные. Не спрашивай про фреймворки, сервер и базу данных — объясняй только то, что влияет на экраны.
Собери приложение как один HTML-файл: разметка, CSS и vanilla JS внутри, данные в localStorage, без backend, npm и внешних библиотек. Экраны: список записей с поиском и фильтром, карточка записи, форма добавления и редактирования, сводка. Статусы — понятными словами, пустые состояния — с подсказкой, что сделать.
Данные не теряются при перезагрузке. Удаление — с подтверждением. Валидация — на форме: пустые поля и неверные числа не сохраняются. Кнопка «Удалить тестовые данные» очищает демо.
Сделай адаптив от 360 px, читаемые подписи, управление с клавиатуры и закрытие окон по Escape.
Перед финалом проверь сценарии: добавить запись, отредактировать, найти, отфильтровать, удалить, перезагрузить страницу. Ответ — готовый HTML-файл целиком, без пояснений вокруг.
Моя задача: мини-приложение для учёта заявок и клиентов.Вставляйте в поле сообщения нового проекта. Если задача другая, поменяйте только последнюю строку.
07 / Вопросы
Что обычно спрашивают про нейросеть и код
Нейросеть правда пишет код без ошибок?
Нет. Типовые экраны она собирает уверенно, но может перепутать поле или сломать старую логику при правке. Поэтому файл проверяют по сценариям, а замечания формулируют словами.
Нужно ли уметь программировать?
Нет, но нужно уметь описать процесс. Чем конкретнее расскажете, кто пользуется приложением и что происходит после нажатия кнопки, тем меньше правок потребуется.
Где хранятся данные приложения?
В localStorage браузера, внутри файла. Пока открываете тот же файл в том же браузере, записи на месте. Для резерва попросите добавить выгрузку в CSV.
Что будет, если приложение перестанет открываться?
Файл не зависит от сервера и подписки: его открывает любой современный браузер. Перед крупными правками сохраняйте копию — так всегда можно вернуться назад.
Можно ли добавить функции позже?
Да. Правки идут в том же проекте: «добавь фильтр по статусу», «сделай колонку с суммой». Модель обновит файл, а вы снова проверите сценарии.
Сколько времени занимает сборка?
Обычно один вечер: минуты на установку и проект, 10–20 минут на ответы, остальное — проверка и правки. Скорость зависит от подробности описания.
Это бесплатно?
В боте на сборку даётся 5 млн токенов бесплатно — хватает на первое приложение и несколько правок. Подписка и оплата за разработку не нужны.