Запрос в шесть строк: нейросеть собирает простое приложение

Обычно бывает так. Пишешь нейросети «сделай мне трекер воды». Она что-то делает, ты открываешь, а там кнопки на английском, всё серое, стаканы считаются как-то не так, и после перезагрузки всё обнулилось. Ты пишешь «не то», она переделывает, ломает то, что было нормально. Через час ты закрываешь вкладку и думаешь, что это всё не для тебя.

А дело почти всегда в запросе. Нейросеть не знает, что у тебя в голове. Ты видишь готовое приложение, а она видит четыре слова и додумывает остальное сама, как ей удобно.

Я пишу запрос в шесть строк. Каждая строка отвечает на один вопрос, который нейросеть всё равно задала бы, если бы умела спрашивать. Заполнила шесть строк, отправила, и первая версия выходит рабочая. Дальше её только допиливаешь по мелочи.

Что получишь

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

Чего в этом уроке нет

Магазина приложений. Мы собираем страницу, которая работает в браузере на телефоне и на компьютере. В App Store и Google Play её никто не кладёт, это отдельная история с аккаунтом разработчика и проверкой.

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

Обещаний заработка. Такие приложения потом можно собирать клиентам за деньги, но сколько это стоит и как найти заказчика, тут не разбираю.

Что нужно до старта

• Нейросеть. Из России без VPN и по-русски работают Алиса AI от Яндекса и ГигаЧат от Сбера, вход на официальных сайтах или в официальных приложениях. Код для простой страницы они тоже пишут. Claude и ChatGPT с кодом справляются лучше, но им нужен доступ из-за рубежа
• Компьютер или телефон, где можно сохранить файл и открыть его в браузере
• Одна идея. Не пять. Самая маленькая, какая есть

Шесть строк

Вот они, по порядку. Ниже разберу каждую.

1. Что это и для кого. Одной фразой: что за приложение и кто им будет пользоваться
2. Что видно на экране. Что человек видит, когда открыл, сверху вниз
3. Что происходит по нажатию. Какие кнопки есть и что делает каждая
4. Где хранятся данные. Что приложение запоминает и где
5. Как выглядит. Цвета, размер кнопок, настроение
6. Технические условия. Одним файлом, без чего обойтись, на каком языке надписи

1. Что это и для кого

Тут нейросеть решает, какое вообще приложение строить. «Трекер воды» это одно, а «трекер воды для женщины, которая весь день на работе и забывает пить» уже другое, там кнопка должна быть одна и огромная.

Пиши, кто откроет и в какой ситуации. Хоть «для меня, по утрам, пока пью кофе».

2. Что видно на экране

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

Если экранов несколько, опиши каждый отдельно. Но для первой версии лучше один.

3. Что происходит по нажатию

Самая недооценённая строка. Без неё нейросеть сама решает, что делает кнопка, и решает иногда странно.

На каждую кнопку одно предложение: «нажала плюс, цифра выросла на один, полоска за сегодня заполнилась». И про ошибки тоже: что будет, если нажать два раза подряд, если отменить, если день закончился.

4. Где хранятся данные

Тут обычно и ломается. Ты закрыла страницу, открыла завтра, а всё пусто.

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

Держи в голове, что эта память живёт в одном браузере на одном устройстве. Открыла на компьютере, там будет пусто. Почистила браузер, данные пропали. Для трекера себе это нормально. Если нужно, чтобы данные видели двое, это уже не про шесть строк.

5. Как выглядит

Два-три признака, не больше. «Светлый фон, тёмный текст, крупные кнопки, один яркий цвет для главной кнопки». Можно настроение: «спокойно, как блокнот», «ярко, как детская игра».

Если не напишешь, нейросеть сделает серо и мелко, почти всегда так и выходит.

6. Технические условия

Это строка, которая спасает от мучений. Пиши:

• одним файлом HTML, всё внутри, без внешних библиотек
• все надписи на русском
• нормально выглядит на телефоне
• в конце объясни простыми словами, что делать с файлом

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

Шаблон для копирования

Собери мне приложение.

1. Что это и для кого: [одна фраза, кто откроет и когда]
2. Что видно на экране: [сверху вниз, что человек видит]
3. Что происходит по нажатию: [каждая кнопка и что она делает, что будет при ошибке]
4. Где хранятся данные: [например: всё в памяти браузера на этом телефоне, без сервера и регистрации]
5. Как выглядит: [фон, текст, кнопки, один акцентный цвет]
6. Технические условия: один HTML-файл, всё внутри, без внешних библиотек, все надписи на русском, удобно на телефоне.

Если в моём описании чего-то не хватает, сначала задай мне вопросы, потом пиши код. В конце объясни простыми словами, что мне сделать с файлом.

Последний абзац тоже часть запроса. «Сначала задай вопросы» часто ловит то, о чём ты не подумала.

Три примера, уже заполненных

Для себя: дневник сна

Собери мне приложение.

1. Что это и для кого: дневник сна для меня, заполняю утром за минуту.
2. Что видно на экране: сверху сегодняшняя дата. Ниже три вопроса: во сколько легла, во сколько встала, как спала по шкале от 1 до 5. Под ними кнопка «сохранить». Внизу список последних семи дней: дата, сколько часов спала, оценка.
3. Что происходит по нажатию: «сохранить» записывает сегодняшний день и он появляется в списке. Если сегодня уже сохраняла, запись заменяется, второй строки за день не будет. Если не заполнено время, кнопка не срабатывает и подсвечивает пустое поле.
4. Где хранятся данные: всё в памяти браузера на этом телефоне, без сервера и регистрации.
5. Как выглядит: тёмно-синий фон, светлый текст, крупные поля, спокойно, без ярких цветов.
6. Технические условия: один HTML-файл, всё внутри, без внешних библиотек, все надписи на русском, удобно на телефоне.

Если в моём описании чего-то не хватает, сначала задай мне вопросы, потом пиши код. В конце объясни простыми словами, что мне сделать с файлом.

Для клиентов эксперта: чек-лист к консультации

Собери мне приложение.

1. Что это и для кого: чек-лист для моих клиенток перед первой консультацией с нутрициологом, открывают по ссылке с телефона.
2. Что видно на экране: сверху заголовок «Подготовка к консультации». Ниже восемь пунктов с галочками: [впиши свои пункты]. Внизу полоска, сколько пунктов готово из восьми, и кнопка «скопировать список».
3. Что происходит по нажатию: галочка ставится и снимается нажатием на пункт. Полоска сразу меняется. «Скопировать список» копирует отмеченные пункты текстом, чтобы клиентка могла вставить их мне в чат.
4. Где хранятся данные: отметки сохраняются в памяти браузера на телефоне клиентки, без сервера и регистрации. Мне ничего не отправляется.
5. Как выглядит: белый фон, тёмный текст, зелёный цвет для отмеченного, крупные пункты, чтобы легко попасть пальцем.
6. Технические условия: один HTML-файл, всё внутри, без внешних библиотек, все надписи на русском, удобно на телефоне.

Если в моём описании чего-то не хватает, сначала задай мне вопросы, потом пиши код. В конце объясни простыми словами, что мне сделать с файлом.

Для маленького дела: калькулятор стоимости

Собери мне приложение.

1. Что это и для кого: калькулятор стоимости торта для моих покупателей, чтобы они сами прикинули цену до того, как писать мне.
2. Что видно на экране: сверху название «Сколько будет стоить торт». Ниже выбор веса: [впиши варианты]. Выбор начинки: [впиши начинки и цену за кило]. Галочки дополнений: [впиши дополнения и цены]. Внизу крупно итоговая сумма и подпись «точную цену назову в переписке».
3. Что происходит по нажатию: любой выбор сразу пересчитывает сумму. Если ничего не выбрано, вместо суммы написано «выберите вес и начинку».
4. Где хранятся данные: ничего не сохраняется, всё считается на месте.
5. Как выглядит: кремовый фон, шоколадный текст, кнопки с закруглёнными углами, тепло и по-домашнему.
6. Технические условия: один HTML-файл, всё внутри, без внешних библиотек, все надписи на русском, удобно на телефоне.

Если в моём описании чего-то не хватает, сначала задай мне вопросы, потом пиши код. В конце объясни простыми словами, что мне сделать с файлом.

Цены в калькулятор вписываешь свои, нейросеть их не знает и придумывать не должна. Если она сама поставила какие-то цифры, проверь и замени.

Что делать с файлом

Нейросеть выдаст код. Дальше так.

1. Скопируй весь код целиком, от первой строки до последней
2. Создай на компьютере текстовый файл, вставь туда код, сохрани с именем, например, son.html. Расширение .html обязательно, не .txt
3. Открой файл двойным щелчком. Он откроется в браузере

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

Чтобы открыть на телефоне, проще всего отправить файл себе в Телеграм в «Избранное» и открыть оттуда. А чтобы дать ссылку клиентам, страницу надо положить в интернет, это разобрано в уроке по слову САЙТ. Если хочешь, чтобы приложение открывалось прямо внутри Телеграма из твоего бота, это урок по слову КАТАЛОГ.

Проверь, прежде чем показывать людям

Открой на телефоне и пройди сама, как в первый раз.

• нажми каждую кнопку, делает ли она то, что ты написала в строке 3
• закрой страницу и открой заново, на месте ли данные (если в строке 4 просила их сохранять)
• нажми что-нибудь не по порядку, два раза подряд, оставь поле пустым
• влезает ли всё на экран без прокрутки вбок
• нет ли где-то английских слов или чужих цифр, которые нейросеть подставила сама

Всё, что не так, пиши ей словами, как видишь: «после перезагрузки список пустой», «на телефоне кнопка уезжает за край». Одну правку за раз. Если просить пять сразу, она что-нибудь сломает по дороге.

Где обычно ломается

Пропущена строка 3. Кнопки есть, а что делают, нейросеть решила сама. Чаще всего это видно, когда нажимаешь два раза или отменяешь.

Пропущена строка 4. Всё работает, пока не закроешь. Потом пусто.

Запрос на три приложения сразу. Дневник сна, плюс трекер воды, плюс заметки, плюс календарь. Выходит каша. Одно приложение, одно главное действие. Остальное вторым запросом, когда первое заработало.

Правки целиком заново. Не нравится цвет, и ты пишешь весь запрос по новой. Нейросеть перепишет всё и потеряет то, что уже было хорошо. Пиши только правку: «поменяй фон на светло-серый, остальное не трогай».

Личные данные клиентов. Если твоё приложение спрашивает имя, телефон, здоровье и куда-то это отправляет, это уже персональные данные, и клиенту надо видеть, кто ты и что с ними делаешь. В шести строках выше данные остаются на телефоне человека и никуда не уходят. Если нужно, чтобы уходили к тебе, это урок по слову КАТАЛОГ и шаг про данные в уроке по слову МАГАЗИН.

Если хочется готовое

Шесть строк дают рабочую первую версию своими руками, это правда можно сделать за вечер. Потом к ней добавляешь по одному куску, когда первая заработала.

А можно отдать сборку нам. Мы с дочерью Анастасией делаем сайты, приложения и ботов под ключ: я веду заказ от первого сообщения до сдачи, бриф, тексты и боты на мне, Анастасия рисует и собирает. На странице услуг есть живые демо под ниши, фирмы в демо вымышленные. Работаем в переписке, рассказываешь задачу боту, можно голосовым.

Посмотреть услуги и демо: https://ии-вайбкодинг.рф/uslugi/ . Рассказать про своё приложение: https://t.me/ketrin_priyom_bot?start=app

Источники

1. https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage

Ещё уроки