🔑 Acesso ao Firebase Studio
O Firebase Studio e a plataforma do Google para criar sites com IA. E a ferramenta central do metodo Vibe Coding - sem ela, nao ha como executar os prompts.
🌐 Como Acessar
Acesse a URL
studio.firebase.google.com
Faca login com Google
Recomendado para salvar projetos e manter organizados
Crie um novo projeto
Ou abra um projeto existente para continuar
💡 Dica Importante
Fazer login garante que todos os seus prompts e prototipos fiquem salvos, organizados e rastreaveis dentro da sua conta.
🖥️ Interface da Plataforma
Conhecer a interface do Firebase Studio acelera o workflow e evita confusao. A plataforma e dividida em areas bem definidas.
Campo de Prompt
Area principal onde voce cola seu prompt completo. Aceita texto longo e estruturado.
Area de Preview
Visualizacao em tempo real do site gerado em diferentes tamanhos de tela.
Editor de Codigo
Acesso ao codigo HTML, CSS e JavaScript gerado para ajustes manuais.
Painel Lateral
Configuracoes, historico de versoes e opcoes de exportacao.
⚡ Prototype with AI
O botao "Prototype with AI" e o momento magico onde texto vira site. E o core do Vibe Coding.
Cole o prompt completo
Todo o prompt estruturado vai no campo principal de texto
Clique em "Prototype with AI"
A IA processa o prompt e converte em codigo
Blueprint gerado automaticamente
O site ja nasce responsivo, estruturado e visualmente consistente
✨ O que a IA gera automaticamente
- • Codigo HTML semantico e limpo
- • CSS responsivo para todos os dispositivos
- • Estrutura visual consistente
- • Animacoes e transicoes basicas
👀 Visualizacao e Preview
A area de preview permite validar rapidamente se o resultado atende as expectativas em diferentes tamanhos de tela.
Modos de Visualizacao
Mobile
375px
Tablet
768px
Desktop
1280px+
💡 Dica
Sempre teste em mobile primeiro! A maioria dos usuarios acessa sites pelo celular.
🔧 Ajustes e Refinamento
Apos a geracao, e possivel ajustar e refinar o site de varias formas. Ajustes pos-geracao sao essenciais para atingir perfeicao.
🎯 Selecao de Elementos
Selecione qualquer elemento da pagina e adicione instrucoes para que a IA modifique aquele item especifico.
📝 Anotacoes na Pagina
Escreva comentarios diretamente sobre o site (annotation tool). A IA interpreta e aplica as mudancas automaticamente.
💬 Novos Prompts
Peca ajustes via prompt adicional: "Mude a cor do botao para verde" ou "Aumente o tamanho do titulo".
Textos
Cores
Tipografia
Layout
Animacoes
Imagens
📤 Exportacao e Publicacao
Apos finalizar, voce pode exportar o codigo ou publicar diretamente. O site permanece totalmente editavel.
Download de Arquivos
Baixe HTML, CSS e JS para hospedar em qualquer lugar.
RecomendadoIntegracao GitHub
Conecte a um repositorio para versionamento profissional.
AvancadoDeploy Direto
Publique diretamente pelo Firebase Hosting.
RapidoEditar Codigo
Acesse e edite o codigo manualmente se necessario.
Tecnico"Mesmo sendo gerado por IA, o site permanece totalmente editavel, tanto via prompts quanto via codigo, garantindo liberdade criativa e tecnica."
— Controle total com IA
📋 Resumo do Modulo
Proximo Modulo:
1.4 - Arquitetura de Sites