🎯 О чём этот конспект: Разбор нового инструмента Firebase Studio от Google — прямого конкурента Bolt, Cursor и Lovable. В видео демонстрируется процесс создания Full-stack приложения с использованием ИИ-агентов, интегрированных напрямую в экосистему Firebase.

👤 Кому будет полезно: Вайбкодерам, разработчикам на Next.js и всем, кто хочет быстро собирать масштабируемые AI-приложения с готовой инфраструктурой (Auth, DB, Hosting) от Google.

✨ Что получите: Пошаговый алгоритм создания приложения «с нуля до деплоя», список из 9 ключевых фишек Firebase Studio и инструкции по подключению продвинутых моделей Gemini 1.5 Pro для улучшения качества кодинга.

1. Blueprint приложения: Планирование перед генерацией

Контекст: В отличие от других инструментов, которые сразу начинают писать код, Firebase Studio сначала создает «чертеж» (Blueprint). Это позволяет избежать хаоса в структуре проекта. Вы видите список компонентов, логику работы AI-функций и стилевой гайд еще до того, как будет потрачен первый токен на генерацию файлов. Это критически важно для контроля архитектуры.

Выгода: Экономия времени на исправление фундаментальных ошибок в структуре приложения.

Как применить:

• Шаг 1: Опишите идею — Введите промпт и прикрепите скриншот/набросок интерфейса (Vision-способности позволяют ИИ понять макет).
• Шаг 2: Редактирование плана — Нажмите иконку карандаша в блоке Blueprint. Вы можете вручную поправить описание компонентов или добавить новые требования через чат.
• Шаг 3: Уточнение стилей — Используйте промпт для настройки дизайн-системы:

Update the color scheme to only use a vibrant light blue for the primary color. 
The website should have a modern look and style. All other colors should be black, gray, and white. 
Make sure the application is built for dark mode. 
The only other colors should be red, green, and orange for task difficulty.

Результат: Согласованный план приложения с готовой цветовой схемой и списком логических модулей.

2. Интерактивный редактор и визуальный выбор (Select & Edit)

Контекст: Firebase Studio позволяет редактировать элементы интерфейса, просто кликая по ним. Это избавляет от необходимости искать нужный div или компонент в дереве файлов. Вы выбираете кнопку или текстовое поле, и ИИ понимает контекст именно этого элемента.

Выгода: Быстрый UI-тюнинг без копания в коде CSS/Tailwind.

Как применить:

• Шаг 1: Активация инструмента — Нажмите кнопку Select в верхней панели.
• Шаг 2: Выбор элемента — Кликните на нужный объект (например, кнопку "Submit").
• Шаг 3: Промпт для правки — В появившемся окне введите команду:

All buttons inside the application should use the primary blue color specified.

Результат: ИИ автоматически найдет соответствующие стили или компоненты и применит изменения глобально или локально.

3. Аннотации и «Скриббл» (Scribble Mode)

Контекст: Иногда проще нарисовать, чем объяснить текстом. Встроенный инструмент аннотаций (похожий на Excalidraw) позволяет рисовать прямо поверх интерфейса приложения, указывая ИИ, где и что добавить.

Выгода: Точное позиционирование элементов и визуальная передача идей.

Как применить:

• Шаг 1: Вход в режим — Нажмите кнопку Annotate.
• Шаг 2: Рисование — Нарисуйте прямоугольник (например, для футера) и добавьте текстовую заметку прямо на макете.
• Шаг 3: Команда на выполнение — Подтвердите действие промптом:

Please add a footer like the one in the image. 
Make the text centered and make sure the footer is sticky to the bottom.

Результат: ИИ анализирует ваш рисунок и генерирует код на основе визуального расположения элементов.

4. Переход в режим Code View и использование Терминала

Контекст: Для серьезной разработки нужен доступ к коду. Firebase Studio предоставляет полноценную IDE в браузере с терминалом, где можно устанавливать любые npm-пакеты. Это превращает «игрушку» в профессиональный инструмент.

Выгода: Возможность расширять приложение любыми библиотеками (Axios, Lucide-react и т.д.).

Как применить:

• Шаг 1: Переключение — Нажмите кнопку Code в правом верхнем углу.
• Шаг 2: Работа с терминалом — В нижней части экрана откройте терминал и введите команду:

npm install axios

• Шаг 3: Редактирование через Gemini — Используйте боковую панель Gemini Coder для внесения изменений в конкретные файлы (аналог Cursor).

Результат: Полный контроль над зависимостями и исходным кодом проекта.

5. Апгрейд «мозгов»: Подключение Gemini 1.5 Pro

Контекст: Стандартная модель в студии может ошибаться. Для сложных задач (логика БД, сложные вычисления) автор рекомендует переключиться на Gemini 1.5 Pro через собственный API Key.

Выгода: Значительное повышение точности кодинга и понимания сложных инструкций.

Как применить:

• Шаг 1: Получение ключа — Перейдите в Google AI Studio, выберите ваш проект и нажмите Create API Key.
• Шаг 2: Настройка модели — В Firebase Studio в настройках чата выберите модель Gemini 1.5 Pro.
• Шаг 3: Вставка ключа — Вставьте скопированный ключ в поле API Key.
• Шаг 4: Сложный запрос — Теперь можно давать более комплексные задачи:

Please update page.tsx to include a new difficulty level 'Ultra Hard' with black color, 
and ensure the AI ranker logic is updated to support this new category.

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

FAQ

В: Firebase Studio платный инструмент? О: На текущий момент создание и прототипирование бесплатно. При деплое (Rollout) предлагается план "Pay as you go", но для небольших приложений и тестов затраты обычно составляют $0 благодаря щедрым лимитам бесплатного яруса Firebase.

В: Можно ли смотреть превью приложения на телефоне во время разработки? О: Да, в верхней панели есть кнопка с иконкой ссылки/QR-кода. Отсканируйте его смартфоном, и вы получите живое превью, которое обновляется в реальном времени вместе с вашими правками.

В: Что делать, если ИИ сломал код и приложение не запускается? О: Используйте функцию Rollback (кнопка Restore). Она позволяет мгновенно откатить последние изменения до рабочего состояния. Это одна из самых полезных фишек для вайбкодинга.

В: Как происходит деплой? О: Через вкладку Rollouts. Нажмите "Create Rollout", выберите план. Процесс первой публикации занимает около 10 минут, после чего вы получаете реальный URL-адрес вашего приложения.

В: Насколько Gemini хорош в кодинге по сравнению с Claude 3.5 Sonnet? О: Автор ставит Firebase Studio оценку "B-". Gemini может быть менее точным, чем Claude в Cursor, но интеграция с инфраструктурой Firebase (ключи, база, хостинг в одном окне) дает огромное преимущество в скорости запуска.

Конспект создан на основе видео «Google's NEW Firebase Studio is INSANE (Vibe Coding)» канала Brandon Hancock. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=-A3QkftCCPw