Vibe Coding: вы просто описываете идею - и Google создаёт продукт. (бесплатно!)

Забудьте о курсор, коex и даже Lavable. Новая вкладка Build в Google AI Studio позволяет вам создавать полное функциональное AI приложение с базой данных и API, просто описав его на естественном языке. Это называется кодинг. Это бесплатно, и это меняет правила игры. В этом видео мы проведём полный стратегический разбор Google AI Studio и превратим его из игрушки в настоящую фабрику для запуска AI-бизнеса. Во-первых, мы разберём саму концепцию кодинг. Во-вторых, мы создадим приложение, куда можно загрузить фото и редактировать его с помощью промтов к модели нанобана. В-третьих, мы перейдём от новичка к профессионалу. Я покажу вам, как правильно разговаривать с AI, чтобы добавлять новые функции, например, кнопки, фильтры и не ломать при этом всё приложение. И в финале мы разберём самый важный шаг. Путь к продакшену. Я наглядно покажу, как безопасно опубликовать ваше приложение в интернете, чтобы никто не украл ваш секретный ключ к нанобана и как сохранить код в GitHub для полного контроля. Перед просмотром ролика прошу вас подписаться на канал, поставить лайк этому видео и написать комментарии. Всем приятного прорыва. Итак, в чём же суть Google AI Studio? И, в частности, его новая вкладка Build. Это не просто ещё один-код конструктор, где вы часами таскаете кубики и блоки. Это принципиально новый подход, который они сами называют вайpкодинг. Вы больше не таскаете блоки. Вы разговариваете с искусственным интеллектом, который пишет за вас и лицевую часть, то, что видит пользователь, и серверную часть, то, что работает под капотом. Вы описываете свой вайб, своё настроение, свою идею, а AI превращает это в работающий код. Посмотрите, как это устроено. Всё очень просто и логично. У вас всего три главных окна. Окно промт, Vibe, это чат. Здесь вы как режиссёр или арт-директор описываете, что должно делать ваше приложение. Окно превна холст. Здесь приложение мгновенно оживает, и вы можете нажимать на кнопки и загружать картинки, которые только что придумали. И окно код - это закулисье. Здесь вы видите весь сгенерированный код. И самое главное, вы можете в любой момент вмешаться и поправить его вручную. Если AI сделает что-то не так. Это идеальный мост между простотой разговора и мощью настоящего кода. Давайте докажем, что это самый быстрый способ перейти от идеи к работающему MVP, то есть минимально жизнеспособному продукту. Мы создадим ядро настоящего САЗ бизнеса, нашего собственного AIфотошопа. Идея простая. создать веб-приложение, куда любой человек может загрузить свою фотографию, написать текстом, что он хочет изменить, и получить готовый результат. Шаг первый. Промт. Мы открываем вкладку Build VII Studio и в окне промта пишем наше первое описание. Мы начнём с самого простого внешнего вида. Шаг второй- генерация UI. Мы нажимаем generate, и через 15-20 секунд в окне Preview появляется именно то, что мы просили. Простой чистый интерфейс. Место для фото, строка для текста, кнопка. В окне код мы видим, что AI уже написал за нас весь код для этого интерфейса. Отлично, скелет у нас готов. Шаг третий. Промт. Теперь нам нужно оживить этот скелет. Нам нужно подключить мозг, саму модель нанобана, которая и будет творить магию. Мы пишем следующий промт. Шаг четвёртый. Тест. AI думает, и в окне превью наше приложение становится активным. Он пишет нам, что подключил нанобана. Давайте проверим. Я беру заранее заготовленную фотографию. Обычный городской парк, снятый днём. Зелёная трава, синее небо. Теперь я пишу в нашу новую строку промта преврати эту сцену в снежнюю зимнюю ночь. Добавь луну на небо. Нажимаю Generate. Ждём несколько секунд. И посмотрите, в окне появляется новое изображение. Тот же парк, те же деревья, но теперь всё покрыто снегом. На небе темнота и светит реалистичная луна. Подумайте об этом. 5

минут назад у нас была просто идея в голове. Теперь у нас работающий прототип AIфотошопа. Мы можем прямо сейчас нажать деплой, получить публичную ссылку и отправить её первым 100 пользователям, чтобы собрать обратную связь. Это невероятная скорость. А теперь самое важное, то, на чём спотыкаются 99% пользователей. Если вы будете пользоваться этим как новичок, вы очень быстро разочаруетесь. Вы попадаете в так называемую петлю ошибок. Как делает новичок? Он получил первый результат и решает улучшить приложение одним махом. Он пишет гигантский промт. А теперь добавь мне 10 кнопок с фильтрами. Инструмент для обрезки фото, инструмент для добавления текста, слои как в фотошопе, и возможность поделиться в соцсетях. Что делает AI? Он честно пытается это сделать. Он генерирует 2.000 строк нового кода. В процессе он полностью ломает ту рабочую связь с нанобана, которую мы только что настроили. Забывает про кнопку Generate, и всё приложение превращается в кашу из ошибок. Вы в ярости. Профессионал никогда так не делает. Он мыслит как инженер. Он использует модульный подход. Он не просит построить дом сразу. Он просит сначала добавить одну новую комнату. Давайте на примере нашего AI Photo Studio добавим новую функцию правильно. Мы хотим добавить несколько кнопок с готовыми фильтрами, чтобы пользователю не приходилось самому придумывать промты. Про стратегия один. Модульное проектирование. Мы строим наше приложение по частям, как инженеры. Мы не просим всё сразу. AI генерирует 50-60 строк кода в новом отдельном файле. Мы проверяем и отлично, файл создан. AI вносит одно небольшое изменение в главный файл. В preview появляются наши три кнопки. Супер. Пока они ничего не делают, но интерфейс уже готов. Посмотрите, мы нажимаем кнопку, и промт появляется. Теперь пользователь может загрузить фото, нажать киношный и затем Generate. Мы создали сложную функцию за три простых контролируемых шага. Мы не сломали приложение, а дополнили его. Про стратегия вторая, контекстуальный инженеринг. Есть вторая, ещё более серьёзная проблема. Амнезия. Вы поработали час, создали наше приложение, добавили фильтры, закрыли браузер, открыли его завтра. AI забыл всё, что вы строили. Он не помнит, что у вас есть вот это. Новичок будет в ярости. Профессионал знает, что AI нужно напомнить. Мы создадим для него внешнюю память в виде простого текстового файла. Теперь, когда мы начинаем новый сеанс работы, наш первый пром всегда один и тот же. Привет. Прежде чем мы начнём, внимательно прочитай файл Redmy, чтобы вспомнить наш проект. AI читает этот файл и мгновенно вспоминает весь контекст. Теперь его изменения будут точными. Это простые трюки, которые отделяют профессиональную разработку от любительской. Вам даже не нужно быть гением дизайна, чтобы создать красивые приложения. И я из Studio - это, по сути, огромная сокровищница готовых приложений. с открытым исходным кодом, которые можно легально, скажем так, заимствовать и использовать в своих проектах. Давайте вернёмся в наш AIфотостудию. Он функциональный, но вот это последнее поле для загрузки фото, оно простое, немного скучное. Я хочу, чтобы, как в современных сервисах, красивое поле, куда можно перетащить файл, и он сразу отобразится. Мы идём во вкладку Gallery. Это как в App Store, только все приложения бесплатны и с открытым кодом. Листаем, видим подходящее нам приложение. Я его открываю, и у нас как раз невероятный плавный и интуитивный интерфейс для перетаскивания изображений. Шаг второй. Допрос кода. Нам не нужно воровать всё приложение. Нам нужно только один этот компонент. Мы просто открываем это приложение в режиме build и в чате допрашиваем сам и привет. Мне очень понравился этот компонент для плавной загрузки и перетаскивания изображений. Можешь показать мне, какой файл, какие строки кода за него отвечают? A отвечает, что это описано в этом файле. Шаг третий, интеграция. AI буквально отдал нам готовый компонент. Мы копируем весь код из этого файла, возвращаемся в наше приложение AI Photo Studio и делаем новый, очень

конкретный промт. Посмотрите, теперь наше приложение выглядит и ощущается намного приятнее. У него профессиональный плавный интерфейс. Мы только что создали мегаприложение, объединив лучшую функцию нанобана из нашего приложения с лучшим дизайном из чужого. Это ускоряет разработку в десятки раз. Это позволяет нам создавать продукты, которые выглядят потрясающе, даже если вы не дизайнер. Итак, у нас есть рабочий MVP. Он красивый и функциональный. Как превратить его в реальный бизнес? И самое главное не облажаться с безопасностью. Наше приложение используют Nan Banana API. Это платный сервис, за каждый вызов которого Google будет брать с нас деньги. Если кто-то украдёт наш секретный ключ к этому API, мы можем проснуться с огромным счётом. В AI Studio есть волшебная кнопка Deploy App, то есть опубликовать со значком ракеты. Это самый быстрый способ показать ваше приложение миру. Вы нажимаете её, выбираете свой проект Google Cloud. Если его нет, он поможет вам его создать. Ждёте 3-4 минуты и всё. У вас есть публичная ссылка, которую можно отправить инвесторам, первым клиентом, повесить в своих соцсетях. Но теперь критическая деталь безопасность. Почему это самый безопасный способ для новичка? Если бы вы делали это вручную, вы бы, скорее всего, просто вставили свой секретный ключ от нанобана, который стоит денег, прямо в лицевой код. И первый же хакер, который открыл бы код вашей страницы, украл бы этот ключ и начал бы генерировать миллионы картинок за ваш счёт. A Studio так не делает. Когда вы нажимаете деплой, он автоматически создаёт для вас не только лицевую часть, но и защищённую серверную часть. Ваш секретный ключ нанобана никогда не попадает в браузер пользователя. Он надёжно спрятан на этапе защиты серверов Гугла. Все запросы KI идут через этот безопасный шлюз. Это лучшая практика безопасности, встроенная по умолчанию. Но что, если вы не хотите привязываться к Google? Что если вы хотите иметь полный контроль над своим кодом и завтра, например, перенести его на свои серверы? Для этого есть опция экспорт в Zipрхив или, что чаще, ещё лучше, прямая синхронизация с GitHub. Это ваш страховой полис, это ваш аварийный выход. Вы нажимаете и весь исходный код вашего AI Photo Studio, весь код, все компоненты, все стили отправляются в ваш личный GitHub аккаунт. Зачем это нужно? Теперь вы владеете 100% кода. Google вам больше не нужен. Вы можете отдать этот проект команде профессиональных разработчиков, например. Они возьмут этот код, подключат его к любому другому хостингу, настроят приём платежей, базы данных пользователей и превратят ваш прототип в полноценный масштабируемый САС бизнес. Итак, что мы сегодня поняли? Кодинг, как мы его знали, это больше не про то, чтобы помнить синтаксис и точки с запятой. Это про то, чтобы вести разговор, про то, чтобы быть архитектором и ардиректором, а не просто исполнителем. AI Studio и Vibeкодинг - это не просто инструмент. Это ваш новый сооснователь инженер, который готов работать 24x7, не просит зарплату и помогает вам тестировать идеи с молниеносной скоростью. А теперь домашнее задание. Мы с вами создали AI Photostudio на базе Nнобана, но у Google есть и другие мощные модели. Подумайте, какой AI-редактор или AI Studio вы бы создали в первую очередь? AI Video Studio на базе модели Veo для создания коротких роликов. AI интерьердизайнер, куда можно загрузить фотокомнаты и менять дизайн. AI lлоogenerator для стартапов. Опишите идею этого микробизнеса или внутреннего инструмента в комментариях. Давайте обсудим, как это можно было бы реализовать с помощью AA Studio. Спасибо за ваше время. Начните строить. Yeah.