Objetivo da Aula
Ao concluir esta aula, você será capaz de:
Mapear as ferramentas de IA por etapa do processo de design (pesquisa, ideação, prototipação, desenvolvimento, testes)
Comparar os impactos reais: do que mudou no ciclo de produto com IA
Identificar quando cada ferramenta vence (v0 vs Firebase Studio vs Cursor vs Gemini CLI)
Analisar as novas funções profissionais criadas pela IA no design
Avaliar limitações reais: onde IA falha e onde o julgamento humano ainda domina
Por que isso importa
O ciclo de prototipação mudou de 2 semanas para 2 horas. Isso não é hype — é o que times como Vercel, Notion e Linear reportam em público.
O impacto real não é automação de design. É compressão de ciclos de feedback. Antes: designer fazia wireframe → dev estimava → semana de desenvolvimento → teste. Agora: prompt → Firebase Studio → app funcional → teste com usuário real → iterate.
Para desenvolvedores, a mudança mais profunda é a eliminação do handoff designer-dev em projetos pequenos. O “AI Design Engineer” é a pessoa que transita entre produto, design e código usando IA para mover rápido. Essa é a função mais valorizada em startups hoje.
Conceitos Fundamentais
O Ecossistema de IA para Design em 2025
Pesquisa e Análise - Claude/ChatGPT: síntese de dezenas de entrevistas de usuário em minutos. Input: transcrições brutas. Output: temas recorrentes, pain points, oportunidades. - Dovetail AI: análise qualitativa assistida — tag automático de trechos, busca semântica em notas de pesquisa. - Maze AI: análise de testes de usabilidade com métricas de task completion e análise de heatmap assistida por LLM.
Ideação e Wireframe - Figma AI: gera variações de layout a partir de seleção. Útil para exploração rápida de alternativas. - Uizard: converte sketches em papel ou screenshots em wireframes digitais editáveis. - Galileo AI: prompt → UI de alta fidelidade. Melhor para componentes isolados do que fluxos completos.
Prototipação e Código - Firebase Studio (Project IDX): prompt → app funcional com Next.js + Firestore + Auth. O salto mais impressionante em 2024. Melhor para MVPs e prova de conceito. - v0.dev (Vercel): prompt → componente React com shadcn/ui e Tailwind. Melhor para componentes isolados de qualidade de produção.
Desenvolvimento - Cursor: IDE com IA integrada. Composer = gerar código novo. Chat = entender código existente. Rules = padronizar comportamento da IA para o projeto. - Gemini CLI: ferramenta de terminal para scaffolding e refatoração via prompt. - GitHub Copilot: autocomplete com contexto de codebase. Melhor em JetBrains e VS Code.
Testes - Playwright + LLM: agente que escreve e executa testes E2E a partir de descrição em linguagem natural. - Percy AI: tira screenshots após cada build e detecta regressões visuais com IA.
O Novo Fluxo de Trabalho
Requisito → Firebase Studio (app base, 10 min)
→ v0.dev (componentes críticos, 2 min cada)
→ Cursor Composer (lógica de negócio, 30 min)
→ Playwright (testes E2E, 10 min)
→ Deploy automático (CI/CD)Comparado com o fluxo tradicional (1-3 semanas), esse ciclo leva 1-2 horas para um MVP funcional testável.
Onde a IA Falha (Limitações Reais)
Firebase Studio não é para sistemas complexos: funciona bem para MVPs com padrões convencionais. Para arquiteturas customizadas, multi-tenant, ou domínios muito específicos, o código gerado precisa de refatoração significativa.
v0.dev gera componentes, não arquitetura: os componentes são bons isoladamente, mas integrar muitos deles cria inconsistências de estado, props drilling e duplicação de lógica.
Cursor hallucina APIs: especialmente para versões recentes de libs. Sempre verifique a documentação oficial para APIs geradas pelo Cursor.
Sem julgamento de UX: a IA pode gerar uma interface funcionalmente correta mas com UX terrível. O julgamento sobre acessibilidade, hierarquia visual, fluxo de usuário ainda é humano.
Aprofundamento Técnico
Comparativo: Firebase Studio vs v0.dev vs Cursor
Dimensão | Firebase Studio | v0.dev | Cursor |
Escopo | App completo | Componente | Arquivo/função |
Stack | Next.js + Firebase | React + shadcn | Qualquer |
Melhor para | MVP rapidamente | UI de qualidade | Integrar e refinar |
Qualidade do código | Boa, refatorar | Produção-ready | Depende do prompt |
Conhecimento de negócio | Zero | Zero | Acumulado em .cursorrules |
Preço | Grátis (limites) | Grátis (limites) | $20/mês |
.cursorrules — Ensinando o Cursor o Seu Projeto
You are an expert TypeScript + React developer.
Project-specific rules:
- Use shadcn/ui components (never create custom UI from scratch)
- State management: Zustand for global, useState for local
- API calls: React Query (never raw fetch in components)
- Styling: Tailwind CSS utility-first (no inline styles)
- Testing: Vitest + Testing Library (not Jest)
- Always include aria-* attributes on interactive elements
- File naming: kebab-case for files, PascalCase for componentsEsse arquivo é o “manual do Cursor” para o projeto. Com boas rules, o Cursor gera código consistente com o resto da codebase.
Novos Papéis Profissionais
AI Design Engineer Combina design (Figma, user research) + engenharia (React, TypeScript) + IA (prompting, avaliação de outputs). É a posição mais valorizada em startups hoje. Não é um “designer que sabe código” — é um profissional que usa IA para produzir em ambas as dimensões rapidamente.
Prompt Designer Especialista em engenharia de prompts para ferramentas de geração de UI. Sabe quais termos produzem qual estética (ex: “monochromatic”, “glassmorphism”, “brutalist layout”), como usar imagens de referência como contexto visual.
Exemplos Anotados
Exemplo 1: Prompt Efetivo para Firebase Studio
Create a B2B SaaS dashboard for a customer support platform with:
- Authentication with Google OAuth
- Dashboard: ticket stats (open/closed/avg resolution time), recent tickets table
- Ticket detail page: conversation thread, priority badge, assignee dropdown
- Use Firestore for real-time updates
- Responsive: mobile-first layout
- Color scheme: blue (#2563eb) primary, neutral grays
Stack: Next.js 14 (App Router) + Firebase + Tailwind CSS + shadcn/uiO que faz esse prompt ser efetivo: - Especifica casos de uso de negócio, não só features técnicas - Lista a stack explicitamente (Firebase Studio pode escolher alternativas) - Inclui requisitos de UI (cor, responsividade) - Usa nomes específicos de componentes/páginas
Exemplo 2: Prompt para v0.dev — Componente de Alta Qualidade
Create a pricing table component with:
- 3 tiers: Free ($0), Pro ($29/mo), Enterprise (custom)
- Each tier: name, price, feature list with checkmarks/crosses
- Most popular badge on Pro tier
- Monthly/yearly toggle with 20% discount on yearly
- "Get Started" button (Pro: blue, others: outline)
- Responsive: stacked on mobile, 3 columns on desktop
- Use shadcn/ui Card, Badge, Button, Switch
- TypeScript with proper types for tiers dataPadrões e Armadilhas
Padrões
Padrão 1: Firebase Studio para estrutura, v0.dev para detalhes Firebase Studio gera a arquitetura e páginas. v0.dev refina componentes específicos com melhor qualidade visual. Combine os dois.
Padrão 2: Itere em cima do código gerado, não reescreva O código do Firebase Studio é “bom o suficiente” como base. Refatorar é mais rápido que reconstruir. Mude só o que precisa mudar.
Padrão 3: Avalie com usuários reais, não com achismo O ponto de usar Firebase Studio é chegar mais rápido ao teste com usuário. Se você gastar horas refinando sem testar, perdeu o benefício.
Armadilhas
⚠️ Armadilha 1: Usar Firebase Studio para sistemas de produção complexos Firebase Studio é para prototipagem e MVPs. Para sistemas com lógica de negócio complexa, autenticação multi-tenant, ou alta disponibilidade, comece com a arquitetura correta manualmente.
Decisão de Arquitetura: Política de Revisão de Código Gerado por IA
Código gerado por IA acelera scaffolding mas não substitui julgamento de segurança e arquitetura. Política de revisão em três níveis: Aceitar sem revisão obrigatória: estrutura de componentes de UI sem lógica de negócio, estilos CSS, configuração de build padrão, testes unitários de funções puras. Revisar antes de usar: qualquer código que toca autenticação, autorização, regras de acesso a dados (Firestore rules, IAM policies), validação de input, ou integração com sistemas externos — ferramentas de IA alucinam APIs e não têm julgamento de segurança. Reescrever: lógica de negócio crítica, algoritmos de precificação, cálculos financeiros. Defina essa política para times antes de habilitar copilots de código — sem política, cada desenvolvedor decide individualmente, e o risco é inconsistente.
⚠️ Armadilha 2: Não revisar código de segurança gerado por IA IA pode gerar vulnerabilidades: regras do Firestore permissivas, falta de validação de input, chaves hardcoded. Sempre revise regras de segurança antes de ir para produção.
⚠️ Armadilha 3: v0.dev sem shadcn instalado na codebase Os componentes do v0.dev pressupõem shadcn/ui. Se sua codebase usa outra lib de UI, adaptar é trabalho extra que pode superar o benefício.
Se não for realizar o laboratório, pule para o próximo capítulo.
Ponte para o Lab
Esta unidade é conceitual — não há código para implementar.
Atividade 1: Acesse e construa o componente de tabela de preços do Exemplo 2. Observe como o refinamento conversacional funciona: peça para “deixar o botão Enterprise cinza” e veja como mantém o contexto.
Atividade 2: Acesse Firebase Studio e use o prompt do Exemplo 1. Anote: quantos arquivos foram gerados? Quais partes precisariam de refatoração para produção?
Atividade 3: Identifique 1 projeto atual ou hipotético onde Firebase Studio + v0.dev acelerariam o ciclo de MVP. Quais seriam as limitações específicas para esse caso?
Agora você está pronto para o lab.