Вступление
Привет! Опять я со своим "а что если попросить artificial intelligence...". В этот раз попросил сразу две — одна нарисовала интерфейс, вторая написала код. Получилось настолько рабочее, что сам теперь пользуюсь. Исходники на GitHub, демо живое — все ссылки в конце, но сначала расскажу, как это было.
20 мая прошла 18-ая конференция Google I/O 2025, на которой показали довольно много всего интересного. И меня, как дизайнера, очень сильно заинтересовал новый сервис stitch.withgoogle.com. Суть сервиса в том, что там Gemini 2.5 Flash и 2.5 Pro соревнуются в создании интерфейса (и это не генерация картинок, а именно код, что очень круто). Flash умеет экспортировать готовый "дизайн" в Figma, но я выбрал Pro т.к. ей можно показывать ещё и свои картинки в отличае от Flash.
Проблема
Давно у меня была идея сделать список продуктов, но только удобный. Мы с женой обычно пользуемся совместными заметками в keep.google.com — она создаёт список, я его в магазине правлю. Вот что-то подобное и хотелось, только чуть визуальнее, чтобы на ходу считывать здоровенный список быстрее и, по возможности, редактировать не глядя или с пакетами в руках.
Раньше не хотел браться за этот проект, т.к. в нём слишком много "интерфейса", а вайбкодинг только сейчас подбирается к красивому интерфейсу без знания верстки. Пару недель назад Figma презентовала свой Make (но там кроме промпта желателен ещё и готовый макет в Фигме который ещё нужно нарисовать). А в Stitch только промпт и картинку.
Эксперимент с Google Stitch
Открываю Stitch и пробую такой запрос (честно, я не сильно-то надеялся на что-то интересное, не знаю откуда такая предвзятость)):
"Давай сделаем мобильное веб приложение для покупки продуктов в магазине, сверху 2–3 кнопки для быстрого выбора магазина и кнопка «Редактировать» как меню, ниже список, но не списком, а типа карточками по 3 штуки в ряд, здоровенная иконка (эмоджи) продукта и ниже текст, что именно и сколько. Нажимая на эмоджи продукта, он зачёркивается типа купил и улетает вниз списка. Когда нажимаю «Редактировать» сверху, там есть кнопка голосового ввода, просто говорю, что купить, и нейронка составляет из этого список продуктов и подбирает нужные иконки, и я могу стрелочками, нажимая, отредактировать количество и в каком магазине что покупать, просто перетаскивая драгендропом из магазина в магазин. Когда я зачеркнул эмоджи, нажимая на зачёркнутый эмоджи, он возвращается назад. В зачёркнутых эмоджи есть кнопка «Очистить покупки», которая очищает только зачёркнутые"
30 секунд и я получил вот такой результат с первой попытки:
Шок, удивление, и ещё кучка эмоций. Радовался еще минут 10. И раз уже готов такой результат, то грех не добавить этому всему функционала, подумал я. Взял код и пошел с ним в aistudio.google.com там нет лимитов для 2.5 Pro (или они сильно мягче чем в оригинальном Gemini).
От прототипа к рабочему приложению
Сначала собрал сайт (2 штуки .html) http://vetaone.site/Pocupochki с экраном редактирования edit.html и главным экраном index.html. Проверил, удобны ли будут свайпы, нормальные ли кнопки, и вообще — самое то, чтобы быстро оценить функционал, посмотреть всего ли хватает, всё ли понятно, потыкать анимации и т.п.
Кайф! Подумал я, 30 минут прошло с момента написания первого промпта в Stitch, а я уже сижу на телефоне, карточки удаляю и добавляю обратно, и экраны свайпаю туда-сюда )))
Но было очень интересно, насколько жизнеспособна идея составлять такой "визуальный" список продуктов, используя только лишь голос. Я хотел оставить возможность редактирования, чтобы можно было что-то в моменте поправить, но вводить добавление карточек текстом я не планировал, т.к. это бы потребовало ещё больше решений. Например, подсказывать ранее введенные покупки для удобного выбора вместо ввода. Может быть, в будущем это добавлю.
Но раз уже готова вся основа, глупо не прикрутить всю остальную логику. Интересно же посмотреть, что получится, подумал я. И понеслась:
-
SPA на чистом JavaScript (без фреймворков!)
-
WebSocket для синхронизации между устройствами
-
Интеграция с Gemini API для обработки голоса
-
Drag & Drop товаров между магазинами (работает криво а
-
История действий с отменой
Технические детали
Архитектура
-
Frontend: Vanilla JS + модульная архитектура
-
Backend: Node.js + Express + WebSocket
-
AI: Gemini 2.0 Flash для обработки аудио
-
Дизайн: Полностью сгенерирован Google Stitch
Обработка голоса
Gemini умеет работать с аудио напрямую! Не нужно сначала транскрибировать, потом обрабатывать текст. Просто отправляешь base64 аудио и получаешь структурированный JSON:
const result = await geminiModel.generateContent([
prompt,
{ inlineData: { data: base64Audio, mimeType: 'audio/webm' } }
]);Примеры того, что понимает нейронка
Реальный пример голосовой команды:
"Молоко закончилось, возьми 2 литра, яйца тоже, штук 30 наверное, они в Пятерочке дешевле обычно. А, и сметану, только пожирнее, процентов 20. Творог если будет со скидкой — бери побольше, а то дорогой стал. Еще на салат нужно — помидоры, огурцы, перец... перец красный именно, не зеленый! В Магните овощи обычно свежее..."
И Gemini из этой каши делает:
Особенности реализации
1. Все эмодзи подбираются автоматически
Gemini сама решает, какой эмодзи подходит к продукту. Причем делает это как правило очень точно — для "перца красного" ставит 🌶️, а для "болгарского перца" — 🫑.
2. Drag & Drop на мобилках
Пока единственная проблема, с которой столкнулся и не решил, — это возможность перемещать магазины драг-энд-дропом (идея такая, что если ты наговорил список, не указав явно магазин, то все продукты падают в самый первый магазин, и их можно менять местами). И так же не реализовал ещё драг-энд-дроп товаров между магазинами, чтобы удобно перекидывать товары из одного магазина в другой
3. Синхронизация через WebSocket
Жена дома редактирует список — я в магазине вижу изменения мгновенно.
4. HTTPS обязателен
Без него микрофон не работает. Сделал самописный сертификат.
Результаты
-
Время разработки: вечер на готовый и рабочий прототип + одна суббота на допиливание
-
Строк кода: ~3000
Что дальше?
Проект выложил на GitHub: github.com/Veta-one/pocupochki
Можете форкнуть и допилить под себя.
API ключ Gemini бесплатный (1500 запросов в день). Получать тут https://makersuite.google.com/app/apikey
Реальный пример работы можно посмотреть вот тут, но есть пару нюансов:
-
API-ключ у меня бесплатный — 1500 запросов в день. Мне одному хватает за глаза, но на всех желающих потыкать может не хватить. Если увидите ошибку — значит, лимит кончился, приходите позже.
-
Приложение создавалось для семьи из двух человек, поэтому вместо нормальной базы данных — JSON файлик. И да, это один общий список на всех (!), кто зайдет на демо. Будьте вежливы друг к другу, не создавайте то, что вашей маме было бы стыдно увидеть. Хотя я понимаю, что это скорее звучит как вызов.
-
Сервер маленький, наплыва не жду. Но если ляжет — подниму. Если увижу треш в списке — откачу базу к исходному состоянию. Отнеситесь с пониманием, это же просто демка для статьи.
-
Важно: все, кто зайдет, будут редактировать ОДИН И ТОТ ЖЕ список в реальном времени. Это фича для синхронизации между устройствами, но в данном случае получается эдакий "чат через список покупок". Постарайтесь не устроить там полный хаос, хотя кого я обманываю — конечно устроите ))
P.S. Если хотите нормально потестить без чужих правок — форкните с GitHub и запустите локально. Инструкция в README.
Я создал свой Telegram-канал, где я продолжу делиться ходом этого и других своих проектов, своими идеями и подобными нейропроектами: https://t.me/Veta14
TL;DR
Google Stitch генерит дизайн → Gemini пишет код →
за субботу готово приложение с голосовым вводом.
Демо или реальный сервис лучше смотреть с телефона, обе ссылки ниже
Демо | GitHub | Попробовать | Мой telegram
Автор: VetaOne
