Как создать приложение с помощью ИИ: учебный MVP от сценария до проверки

Как создать приложение с помощью ИИ: начните с одного законченного сценария

Чтобы создать приложение с помощью ИИ, сначала определите действие, которое человек сможет закончить без вашего объяснения. Для первого MVP возьмём личный журнал входящих запросов: фрилансер записывает короткую заявку, видит её в списке и отмечает, что ответил. Проверяемая польза здесь — не забыть обращение и отличить новые запросы от обработанных. Не нужны регистрация, платежи и автоматическая отправка сообщений.

MVP — минимальная версия для проверки полезности решения. Демо показывает, как мог бы выглядеть экран; MVP позволяет пройти выбранный сценарий и наблюдать, где он помогает или мешает. Это не означает, что минимальная версия уже подходит для клиентской базы или работы команды. Маленький объём функций сокращает число предположений, но не отменяет проверку ошибок и сохранения.

Ниже — учебная спецификация, данные и критерии приёмки для такого журнала. Это не отчёт о запуске готового приложения: код здесь не опубликован и не проверен в вашем браузере. По этой спецификации можно попросить AI подготовить проект, открыть его в предпросмотре и пройти одинаковые проверки. Все имена и запросы в примере вымышлены; реальные контакты для первого опыта не нужны.

С помощью какого ИИ можно создать приложение

Ищите среду по рабочему маршруту: она должна дать вам файлы проекта, способ запустить его и возможность вернуться к предыдущей версии. Обычный чат способен предложить код, но перенос файлов и запуск останутся отдельными действиями. Если вы не умеете запускать проект, начните со среды с предпросмотром и попросите показать, где находятся исходники и инструкция запуска. Убедительный ответ в чате не заменяет открытый экран.

В официальной документации Cursor Agent описан как помощник, который редактирует код и выполняет команды. Это подход для работы с проектом в редакторе: возможность создать файлы сама по себе не подтверждает правильность приложения. Другой маршрут — онлайн-среда Replit Agent, описанная в её официальной документации. Перед выбором проверьте доступ к нужному режиму, ограничения аккаунта и возможность забрать проект. Здесь нет обещания бесплатного тарифа или одинаковых возможностей у всех пользователей.

Создать приложение с помощью ИИ онлайн — значит использовать доступную среду разработки в браузере; это не делает результат автоматически размещённым для клиентов. Предпросмотр, адрес опубликованного сайта и установленное приложение — разные результаты. Если нужен небольшой браузерный инструмент, пока достаточно первого. Для Android, iOS и магазинов приложений понадобятся отдельные требования и проверки, которых в этом примере нет.

Опишите данные и экран раньше, чем просить код

Первый экран должен отвечать на три вопроса: куда записать запрос, какие обращения ещё ждут ответа и как отметить завершение. Вверху расположите поле «Запрос» и кнопку «Добавить». Ниже — фильтр «Все / Новые / Отвечено», число новых записей и список. У каждой записи показывайте текст, дату добавления и статус. Кнопка «Ответил» меняет только статус; приложение не отправляет ответ клиенту.

Для учебной версии договоримся о длине текста от 1 до 300 символов после удаления пробелов по краям. Один пользователь работает в одной вкладке, в одном профиле браузера. Новая запись получает отдельный идентификатор и статус new. Содержимое поля очищается только после успешного сохранения. Удаление, вложения, импорт и синхронизация не входят в первую версию: эти возможности увеличат число случаев, которые придётся проверять.

Два одинаковых текста могут быть разными обращениями. Поэтому не удаляйте запись автоматически только из-за совпадения текста. А вот двойное нажатие на кнопку не должно создавать две записи из одного действия. Попросите AI предложить явную защиту повторного сохранения и объяснить её поведение; затем проверьте быстрый двойной клик. Это небольшая, но важная разница между совпадением данных и повтором действия.

Первое задание нейросети и порядок сборки

Передайте модели спецификацию целиком, а не пожелание «сделай красивый CRM». Можно начать так: «Подготовь учебное однопользовательское браузерное приложение “Журнал запросов”. Нужны поле текста, добавление записи, список, фильтр статуса и кнопка “Ответил”. Используй только вымышленные данные. Не добавляй сервер, аккаунты, аналитику, AI-вызовы внутри приложения или отправку сообщений. Сначала предложи файлы и способ запуска, затем реализацию и таблицу проверок».

Следующим сообщением задайте правила ошибки: «После пробелов по краям текст должен быть непустым и не длиннее 300 символов. При неуспешном сохранении введённый текст остаётся в форме. Не показывай успех до записи данных. При повреждённом хранилище не перезаписывай его пустым списком без решения пользователя. Выводи пользовательский текст безопасно, без интерпретации HTML». Попросите назвать все допущения, особенно относительно хранения.

• Сначала получите структуру проекта и инструкцию запуска. Не меняйте одновременно стек и пользовательский сценарий.
• Проверьте добавление одной записи без фильтров и украшений. Сравните результат с ожидаемым экраном.
• Добавьте изменение статуса и фильтр. Проверьте, что счётчик новых записей пересчитывается.
• Подключите сохранение и восстановление. После этого проверьте ошибки записи и чтения.
• В конце проверьте длинный текст, клавиатуру и узкий экран. Сохраните проверенную версию отдельно.

Если что-то не работает, отправьте точный вход, шаги и отличие от ожидания. Например: «Добавил запись, отметил answered, перезагрузил вкладку — она снова new; ожидаю сохранённый статус». Такой запрос задаёт причинную проверку. После исправления повторите и этот случай, и обычное добавление. Не принимайте сообщение модели «исправлено» за результат проверки.

Хранение в браузере: удобное ограничение учебной версии

Для этого маленького примера можно выбрать localStorage: записи остаются в браузерном хранилище для соответствующего адреса сайта между обычными сеансами. По документации MDN хранилище связано с origin; смена адреса, протокола или порта может дать другое пространство. Поэтому тест сохранения выполняйте на одном стабильном адресе предпросмотра. Открытие HTML через file: не даёт надёжного одинакового поведения хранения во всех браузерах.

localStorage не является аккаунтом, синхронизацией или резервной копией. Очистка данных браузера может удалить записи; приватный режим имеет отдельные ограничения. Для учебного журнала используйте вымышленные запросы. Не храните здесь пароли, ключи доступа и чувствительную клиентскую информацию. На другом устройстве тот же список сам собой не появится. Эти границы объясните прямо возле списка, а не только в техническом описании.

Определите один ключ, например incoming-demo-v1, и структуру с номером версии схемы и массивом записей. При чтении сначала разберите JSON, затем проверьте типы полей и допустимые статусы. Если данные повреждены, покажите сообщение и оставьте исходное содержимое нетронутым до явного решения о сбросе. Запись тоже может закончиться ошибкой, в том числе из-за ограничений хранения. Тогда сохраните ввод в форме и предложите повторить действие, не объявляя запись успешно добавленной.

Web Storage работает синхронно, поэтому этот подход выбран для небольшого учебного списка, а не большого потока данных. Работа в нескольких вкладках тоже остаётся за границей первой версии: без согласования изменений одна вкладка может затереть более новую запись другой. Когда появляются несколько пользователей, общая база, права доступа и резервное восстановление, потребуется пересмотреть архитектуру, а не просто добавить ещё одну кнопку.

Таблица приёмки: вход → действие → ожидаемый результат

Перед первой проверкой очистите только хранилище учебного проекта и запишите адрес, браузер и версию файлов. Таблица ниже задаёт ожидаемое поведение, а не подтверждает пройденные тесты. В своём журнале отметьте результат каждого случая и приложите описание ошибки. Для начала используйте две записи: «Нужна обложка для учебной презентации» и «Уточнить формат учебного лендинга». Здесь нет реальных клиентов или обещаний сроков.

Ошибка хранения требует отдельного тестового способа, а не догадки. Попросите AI добавить в учебную проверку замену операции записи функцией, которая выбрасывает исключение, и объяснить, как вернуть обычное поведение. Не переполняйте рабочий браузер чужими данными ради эксперимента. Для повреждённого JSON меняйте только ключ incoming-demo-v1 в учебном проекте. После теста восстановите исходное содержимое или явно сбросьте учебные данные.

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

Что считать готовым MVP и что делать дальше

Первая версия готова к ограниченному учебному использованию, когда обычный сценарий и негативные проверки проходят на указанной версии, исходники сохранены, а границы хранения понятны. Затем попросите одного человека выполнить три действия по инструкции: добавить запрос, найти новые записи и отметить ответ. Наблюдайте, где он останавливается. Не подсказывайте заранее, иначе проверите собственное объяснение вместо интерфейса.

Пользу измеряйте отдельно от технической исправности. Например, в течение нескольких учебных сессий отмечайте, сколько записей забыли внести, сколько раз искали нужную запись и сколько действий потребовалось для обработки. Такие наблюдения подскажут следующую функцию: поиск, редактирование текста или резервный экспорт. Не добавляйте всё сразу. Для каждой функции запишите новое действие, ожидаемый результат и случай ошибки.

Если журнал нужен команде, потребуется разделение пользователей и прав, серверное хранение, защита данных и проверка восстановления. Если нужны реальные обращения, сначала решите, какие данные можно собирать и кто имеет к ним доступ. Это отдельный этап, который нельзя заменить обещанием нейросети «готово к запуску». В Sinqly можно оформить найденную ошибку задачей с входом и критерием приёмки: так маленький MVP развивается через проверяемые изменения.

Источники

• Cursor: возможности Agent в проекте
• Replit: официальная документация Agent
• MDN: localStorage и ограничения адреса/режима браузера
• MDN: ошибки записи в Storage.setItem
• MDN: Web Storage и синхронные операции
• Читайте также: Вайбкодинг: что это и как сделать первый полезный прототип
• Читайте также: Как создать ИИ-агента: первый сценарий, инструменты и проверка

Частые вопросы