Objetivo da Aula
Ao concluir esta aula, você será capaz de:
Construir um app funcional em Firebase Studio a partir de um prompt estruturado
Gerar componentes React de qualidade de produção com v0.dev
Iterar com refinamento conversacional em ambas as ferramentas
Avaliar código gerado por IA: o que aceitar, o que revisar, o que reescrever
Combinar Firebase Studio (estrutura) + v0.dev (componentes) + Cursor (refinamento)
Por que isso importa
O prompt certo no Firebase Studio entrega em 5 minutos o que levaria 1 semana de desenvolvimento convencional: autenticação, banco de dados, UI responsiva, deploy. Isso não elimina a necessidade de desenvolvedor — elimina a necessidade de codificar o scaffolding básico.
v0.dev resolve um problema diferente: como ter componentes React de alta qualidade sem gastar dias configurando shadcn/ui, ajustando Tailwind e escrevendo TypeScript boilerplate. O output do v0 é código de produção, não protótipo descartável.
Esta unidade é completamente prática — o “starter.md” é um guia de exercícios.
Conceitos Fundamentais
Firebase Studio: Anatomia de um Prompt Efetivo
Um prompt ruim gera um app genérico. Um prompt efetivo especifica:
Tipo de aplicação: “B2B SaaS dashboard”, “e-commerce MVP”, “app de agendamento”
Features principais: listadas de forma concisa, com nomes específicos de telas/componentes
Stack preferida: Next.js + Firebase + Tailwind + shadcn/ui (Firebase Studio pode escolher alternativas se você não especificar)
Dados de exemplo: nomes reais de campos, estrutura do banco
Requisitos de UI: esquema de cores, responsividade, modo escuro
Create a Kanban board project management app with:
- Google OAuth + email authentication
- Board with 4 columns: Backlog, In Progress, Review, Done
- Cards with: title, assignee (avatar), priority badge (low/medium/high/urgent), due date
- Drag and drop between columns (@dnd-kit)
- Firebase Firestore: cards collection, real-time updates
- Create/edit card modal with form validation (react-hook-form + zod)
- Responsive: horizontal scroll on mobile, full board on desktop
- Dark mode with toggle in header
Stack: Next.js 14 App Router + Firebase v10 + Tailwind + shadcn/uiv0.dev: Tipos de Componentes que Geram Melhor
v0 performa melhor em componentes de UI isolados com padrões estabelecidos:
Tipo | Qualidade | Notas |
Tabelas com sorting/filter | Excelente | shadcn/ui Table + ColumnDef |
Formulários com validação | Muito boa | react-hook-form + zod automático |
Cards e painéis de dashboard | Excelente | KPI cards, charts com recharts |
Modais e drawers | Muito boa | shadcn Dialog/Sheet |
Layouts de página | Boa | Sidebar + main content |
Fluxos multi-step | Regular | Precisa refinamento |
Lógica de negócio complexa | Fraco | Não é o papel do v0 |
Refinamento Conversacional
Tanto Firebase Studio quanto v0 suportam refinamento incremental:
Prompt inicial:
"Create a data table for products with sorting and pagination"
Refinamentos:
→ "Add a search bar that filters by product name and category"
→ "Add column for stock status: green badge if > 10, red if <= 10"
→ "Export button that downloads CSV with current filtered data"
→ "Make it responsive: cards on mobile, table on desktop"Cada refinamento mantém o contexto do prompt anterior. O modelo entende “o botão de status” sem precisar re-descrever o componente inteiro.
Avaliação de Código Gerado
Aceitar sem revisão: - Estrutura de pastas e arquivos - Configuração de Tailwind, shadcn, TypeScript - Componentes de UI puros (sem lógica de negócio) - Tipos TypeScript básicos - Layout e responsividade
Revisar antes de usar: - Regras de segurança do Firestore - Lógica de autenticação (verificar se handleError é adequado) - Validação de formulários (verificar se cobre casos de edge) - Queries ao banco de dados (verificar índices, otimização)
Reescrever: - Lógica de negócio crítica (cálculos de preço, permissões) - Integração com sistemas externos - Lógica de estado complexa com muitos efeitos colaterais
Aprofundamento Técnico
Estrutura Gerada pelo Firebase Studio
Para o prompt de Kanban acima, Firebase Studio tipicamente gera:
projeto/
├── app/
│ ├── layout.tsx (providers: auth, theme)
│ ├── page.tsx (redirect para /dashboard ou /login)
│ ├── login/page.tsx (formulário + Google OAuth)
│ └── board/
│ └── page.tsx (board component com drag-and-drop)
├── components/
│ ├── KanbanBoard.tsx
│ ├── KanbanColumn.tsx
│ ├── KanbanCard.tsx
│ └── CreateCardModal.tsx
├── lib/
│ ├── firebase.ts (inicialização Firebase)
│ └── firestore.ts (funções de CRUD)
├── hooks/
│ └── useCards.ts (React Query + Firestore listener)
└── types/
└── index.ts (Card, Column, User types)São ~15-20 arquivos funcionais gerados automaticamente. Sem IA, esse scaffolding levaria 2-3 dias.
Integrar Componente do v0 no Projeto Firebase Studio
O v0 gera componentes como arquivos .tsx standalone. Para integrar:
# 1. v0 gera: components/KanbanCard.tsx (versão melhorada)
# 2. Substituir na pasta components/
cp ~/Downloads/KanbanCard.tsx src/components/KanbanCard.tsx
# 3. Verificar imports — v0 usa shadcn/ui que já está instalado pelo Firebase Studio
# 4. Verificar props — adaptar à interface TypeScript do projetov0 com Screenshot de Referência
v0 aceita imagens como referência. Para replicar um design existente:
[Upload screenshot do Figma]
Recrie este componente como React/TSX com shadcn/ui e Tailwind.
Mantenha fielmente: cores, espaçamento, tipografia.
Adicione: TypeScript types, responsive mobile, dark mode.Isso é especialmente útil para converter designs do Figma em código sem o handoff manual.
Exemplos Anotados
Exemplo 1: Dashboard de Analytics — Prompt para Firebase Studio
Create a SaaS analytics dashboard with:
PAGES:
- /login: email/password + Google OAuth
- /dashboard: KPI cards + chart + recent activity table
- /reports: filterable data table with export
DASHBOARD PAGE:
- 4 KPI cards: Total Revenue (R$ formatted), Active Users, Conversion Rate (%), Churn Rate (%)
- Bar chart: revenue by month (last 6 months) using recharts
- Recent activity table: timestamp, user email, action, status badge
DATA:
- Firestore collection: events {userId, type, timestamp, metadata}
- Real-time listener for last 50 events
- Aggregations calculated client-side (or Cloud Functions for production)
UI:
- Sidebar navigation: Dashboard, Reports, Settings
- Header: user avatar + dropdown (profile, logout)
- Color: #7c3aed (purple) primary
- shadcn/ui components throughout
Stack: Next.js 14 + Firebase v10 + Tailwind + shadcn/ui + rechartsExemplo 2: Sequência de Refinamento no v0
Prompt 1: "Create a product pricing table with Free, Pro, Enterprise tiers"
Refinamento 1: "Add yearly/monthly toggle with 20% discount on yearly pricing"
Refinamento 2: "Highlight Pro tier with 'Most Popular' badge and blue border"
Refinamento 3: "Make Free button gray (ghost variant), Pro button blue (default), Enterprise button 'Contact Sales' outline"
Refinamento 4: "Add feature list with ✓ for included and × for not included. Free: 3 projects, 1GB. Pro: unlimited, 50GB. Enterprise: unlimited, custom"
Refinamento 5: "Make responsive: stack vertically on mobile with Pro tier first"5 refinamentos conversacionais produzem um componente de pricing completo em ~10 minutos.
Padrões e Armadilhas
Padrões
Padrão 1: Prompt em inglês para Firebase Studio e v0 Ambas as ferramentas performam melhor em inglês — o corpus de treinamento é majoritariamente em inglês. Use inglês nos prompts mesmo que o produto final seja em português.
Padrão 2: Especifique shadcn/ui explicitamente
"Use shadcn/ui Card component for the container, Button for actions, Badge for status indicators"v0 conhece as APIs do shadcn profundamente — especificar os componentes melhora a qualidade.
Padrão 3: Itere em componentes, não no app inteiro Para Firebase Studio: gere o app base completo, depois itere em páginas individuais. Para v0: um componente por conversa. Múltiplos componentes numa conversa = qualidade cai.
Armadilhas
⚠️ Armadilha 1: Copiar componente do v0 sem adaptar os tipos
// v0 gera com interface genérica
interface Product { id: string; name: string; price: number }
// Seu projeto tem
interface Produto { id: string; nome: string; preco: number; estoque: number }
// Adaptar antes de integrar⚠️ Armadilha 2: Firebase Studio usa versão antiga de dependências Verifique package.json após a geração. Se firebase: "^9.0.0" mas você precisa da v10, atualize manualmente.
⚠️ Armadilha 3: Refinamentos demais no mesmo contexto do v0 Após ~10 refinamentos, o componente gerado começa a ter inconsistências. Comece uma nova conversa se o componente estiver muito complexo.
Se não for realizar o laboratório, pule para o próximo capítulo.
Ponte para o Lab
O lab desta unidade é guiado — o starter.md contém os prompts e exercícios.
Exercício 1 (20 min): Execute os prompts de Firebase Studio do starter. Observe quantos arquivos são gerados e qual a estrutura.
Exercício 2 (10 min): Use o prompt de v0 do starter para o componente de card de produto. Faça pelo menos 3 refinamentos conversacionais.
Exercício 3 (30 min): Integre o componente gerado pelo v0 no app do Firebase Studio.
Exercício 4 (avançado): Adapte o componente DataTable do starter da Unidade 03 (com sorting e paginação) para usar dentro do app Firebase Studio.
Agora você está pronto para o lab.