Aula sobre Vibe Coding em 3 etapas — do conceito ao site publicado…

INEMA

Resumo das 3 Etapas do Vibe Coding⌗

Etapa 1 — Conceito e mentalidade (Vibe Coding)⌗

Nesta fase, o foco é mudar a forma tradicional de criar sites. Em vez de escrever código, você passa a descrever a intenção do design: clima, estilo, hierarquia, espaçamento e experiência. O objetivo é criar um site profissional de uma página a partir de um único prompt, atuando como diretor criativo enquanto a IA cuida da parte técnica.

Etapa 2 — Estruturação do Prompt Único⌗

Aqui entra a fórmula do “One Prompt Website”, onde todo o site é definido em um único prompt bem organizado. Essa etapa tem três pilares:

Estrutura da página (header, hero, sobre, serviços, CTA e footer)
Branding e identidade visual (tipografia, cores, materiais, animações e comportamento mobile)
Conteúdo detalhado por seção (textos exatos, layout dos elementos e estilo visual)

Quanto mais clara e específica for essa estrutura, mais consistente, premium e intencional será o site gerado pela IA.

Etapa 3 — Execução, refinamento e publicação no Firebase Studio⌗

Na última etapa, o prompt é executado no Firebase Studio, que converte as instruções em código real (HTML e CSS). O site já nasce funcional e pode ser facilmente refinado com ajustes visuais, alterações de texto, animações e layout usando prompts, seleção direta de elementos ou anotações na página. Além disso, é possível editar o código, integrar com GitHub e publicar o site diretamente ou em outra plataforma.

Visão geral⌗

O processo completo segue este fluxo: definir as vibes → estruturar um prompt claro → gerar, refinar e publicar o site

Esse método permite criar sites modernos, profissionais e prontos para produção de forma rápida, criativa e acessível, representando a essência do vibe coding.

1. Execução do prompt no Firebase Studio⌗

Esta etapa mostra como pegar o prompt detalhado criado anteriormente e executá-lo diretamente no Firebase Studio, onde a IA transforma a descrição em código real.

Recomenda-se fazer login com a conta Google para que todos os prompts e protótipos fiquem salvos, organizados e rastreáveis dentro da conta do usuário.

3. Inserção do prompt completo⌗

Todo o prompt é colado no campo principal de texto do Firebase Studio, garantindo que a IA tenha todas as informações necessárias para gerar o site corretamente.

4. Geração do site com “Prototype with AI”⌗

Ao clicar em “Prototype with AI”, o Firebase Studio processa o prompt, converte as instruções em código e cria automaticamente o blueprint (estrutura base) do site.

5. Criação automática do blueprint do site⌗

O blueprint é a primeira versão funcional do site, já com layout, estrutura, estilos e responsividade, servindo como base para ajustes posteriores.

6. Refinamento visual após a geração⌗

Após o site ser criado, é possível ajustar cores, tipografia, layout, ícones, animações e textos usando novas instruções em linguagem natural.

7. Edição via seleção de elementos (Select-based workflow)⌗

O usuário pode selecionar qualquer elemento da página e adicionar instruções para que a IA modifique aquele item específico, como mudar textos, estilos ou hierarquia visual.

8. Edição por anotações diretas na página⌗

Também é possível escrever comentários diretamente sobre o site (annotation tool). A IA interpreta essas anotações e aplica as mudanças automaticamente.

9. Visualização e edição do código⌗

Para quem tem conhecimento técnico, o Firebase permite acessar todo o código gerado e fazer ajustes manuais no front-end.

10. Integração com GitHub⌗

O projeto pode ser conectado a um repositório GitHub, permitindo versionamento, histórico de alterações e integração com fluxos de desenvolvimento profissionais.

11. Publicação e hospedagem do site⌗

O site pode ser publicado diretamente pelo Firebase ou hospedado em qualquer outra plataforma compatível com front-end, oferecendo flexibilidade no deploy.

12. Fluxo completo: do prompt ao produto final⌗

O processo completo cobre: prompt estruturado → geração automática → refinamento → versionamento → publicação

13. Controle total mesmo com IA⌗

Mesmo sendo gerado por IA, o site permanece totalmente editável, tanto via prompts quanto via código, garantindo liberdade criativa e técnica.

14. Essência do Vibe Coding⌗

O conceito central é desenhar com intenção, descrever exatamente o que se quer e deixar a IA cuidar do trabalho pesado, acelerando a criação de sites profissionais.

Esta etapa mostra como executar o prompt criado dentro do Firebase Studio para transformar descrições em um site real. O processo começa acessando o Firebase Studio, fazendo login para manter os projetos organizados e colando o prompt completo no campo principal. Ao clicar em “Prototype with AI”, a plataforma converte o prompt em código e gera automaticamente a estrutura do site.

Após a geração, o site já aparece funcional e pode ser facilmente ajustado: textos, cores, tipografia, layouts, ícones, imagens e animações podem ser modificados usando prompts, seleção direta de elementos ou anotações sobre a própria página, que a IA interpreta e aplica.

Para quem tem conhecimento técnico, é possível visualizar e editar o código, além de conectar o projeto a um repositório GitHub para controle de versão. O site pode ser publicado diretamente pelo Firebase ou hospedado em outra plataforma.

A principal mensagem é que, ao unir estrutura clara e instruções específicas, a IA consegue gerar interfaces prontas para produção a partir de um único prompt, mantendo total flexibilidade para refinamento posterior — essa é a essência do vibe coding.

How to feed your prompt
How AI generates HTML/CSS structure
Editing and polishing the generated layout
Best practices for readability and hierarchy

1.3/5 - Construindo o site no Firebase Studio5