💡 O que e:
Analise de output e o processo de avaliar criticamente o resultado gerado pela IA antes de aceita-lo ou solicitar alteracoes. Envolve verificar se o design atende aos requisitos, identificar pontos fortes e fracos, e determinar o que precisa ser ajustado.
Checklist de analise:
🎯 Por que aprender:
- • IAs nem sempre acertam de primeira - analise critica e essencial
- • Identificar problemas cedo economiza tempo de iteracao
- • Melhora sua capacidade de dar feedback especifico
- • Desenvolve senso critico para design e usabilidade
🔑 Conceitos-chave:
Analise Estrutural
Verificar layout, grid, espacamentos e alinhamentos
Analise Visual
Avaliar cores, tipografia, imagens e iconografia
Analise Funcional
Testar interacoes, navegacao e responsividade
Analise de Contexto
Verificar adequacao ao publico e objetivo
💡 O que e:
Feedback especifico e a habilidade de comunicar exatamente o que precisa mudar no output da IA. Em vez de dizer "nao gostei", voce descreve precisamente o problema e, idealmente, sugere uma direcao para a solucao.
"O header esta feio, muda ai"
"Reduza o padding do header para 16px e alinhe o logo a esquerda"
🎯 Por que aprender:
- • Feedback vago resulta em mudancas imprevisiveis
- • Feedback preciso acelera o processo de iteracao
- • IAs entendem melhor instrucoes concretas e mensuraveis
- • Reduz frustracao de ambos os lados da conversa
🔑 Conceitos-chave:
Localizar o Elemento
"No botao principal do hero", "na terceira secao"
Descrever o Problema
"O contraste e baixo", "o espacamento e inconsistente"
Usar Valores Concretos
"Mude para 24px", "use #3B82F6", "border-radius de 8px"
Explicar o Motivo
"Para melhor hierarquia", "para manter consistencia"
💡 O que e:
Correcoes incrementais sao ajustes pequenos e focados feitos um de cada vez. Em vez de pedir uma reformulacao completa, voce faz mudancas pontuais que preservam o que esta funcionando enquanto melhora aspectos especificos do design.
Fluxo de correcao incremental:
🎯 Por que aprender:
- • Mudancas grandes podem quebrar o que ja funcionava
- • Ajustes pequenos sao mais faceis de reverter se necessario
- • Permite testar o impacto de cada mudanca isoladamente
- • Controle maior sobre o resultado final do design
🔑 Conceitos-chave:
Uma Mudanca por Vez
Ajuste cor OU tamanho OU posicao, nao tudo junto
Preservar o Bom
"Mantenha X, mas mude Y" protege o que funciona
Testar Apos Cada Mudanca
Verificar se a alteracao melhorou ou piorou
Saber Quando Parar
Reconhecer quando o design esta "bom o suficiente"
💡 O que e:
Versioning e o processo de salvar e organizar diferentes versoes do seu design durante o processo de criacao. Permite comparar opcoes, voltar a versoes anteriores e manter um historico do progresso do projeto.
Nomenclatura de versoes:
🎯 Por que aprender:
- • Evita perder trabalho quando uma mudanca nao funciona
- • Facilita comparacoes entre diferentes abordagens
- • Cliente pode escolher entre opcoes apresentadas
- • Documenta evolucao do projeto para referencia futura
🔑 Conceitos-chave:
Versionamento Semantico
Major.Minor.Patch (1.2.3) para clareza
Salvar Antes de Mudar
Sempre guardar versao atual antes de alteracoes
Notas de Versao
Documentar o que mudou em cada versao
Branches de Exploracao
Versoes alternativas para testar ideias
💡 O que e:
A/B Testing Visual e a pratica de criar e comparar duas ou mais versoes de um elemento de design para determinar qual funciona melhor. No contexto de vibe coding, significa pedir a IA para gerar alternativas e avaliar qual atende melhor aos objetivos.
Exemplo de A/B Testing:
🎯 Por que aprender:
- • Remove subjetividade de decisoes de design
- • IAs geram alternativas rapidamente para comparacao
- • Clientes apreciam ter opcoes para escolher
- • Descobrir solucoes que voce nao consideraria sozinho
🔑 Conceitos-chave:
Mudar Uma Variavel
Compare A vs B mudando apenas um elemento
Criterios Claros
Definir como avaliar qual versao e melhor
Testar com Usuarios
Feedback real supera opiniao pessoal
Documentar Resultados
Guardar aprendizados para projetos futuros
💡 O que e:
Documentacao de decisoes e o habito de registrar o raciocinio por tras de cada escolha de design. Nao apenas o que foi feito, mas por que foi feito dessa forma, quais alternativas foram consideradas e que restricoes influenciaram a decisao.
Exemplo de documentacao:
🎯 Por que aprender:
- • Facilita handoff para outros designers ou desenvolvedores
- • Justifica escolhas quando questionado por stakeholders
- • Evita refazer trabalho quando retornar ao projeto
- • Constroi base de conhecimento para projetos futuros
🔑 Conceitos-chave:
Design Rationale
O "porque" e mais importante que o "o que"
Decision Log
Registro cronologico de escolhas feitas
Trade-offs
Documentar o que foi sacrificado em cada escolha
Contexto de Restricoes
Prazo, orcamento, tecnologia que limitaram opcoes
🎯 Vocabulario para Prompts
Use estes termos ao iterar e refinar outputs com IAs:
Analise e Feedback
mantenha X, mas mude Y
ajuste apenas o [elemento]
refine a hierarquia visual
melhore o contraste do texto
Correcoes Especificas
aumente o padding para 24px
mude a cor para #3B82F6
reduza o font-size do subtitulo
alinhe os elementos a esquerda
Versoes e Alternativas
crie duas versoes alternativas
mostre opcao A e opcao B
volte a versao anterior do header
explore abordagem diferente
Refinamento Iterativo
itere sobre esta versao
faca ajuste fino nos espacamentos
polimento final do design
revisao de consistencia visual
Comparacao
compare com a versao X
qual versao tem melhor legibilidade
combine o melhor de A e B
mostre lado a lado
Documentacao
explique essa escolha de design
documente as mudancas feitas
liste as decisoes de design
quais alternativas foram descartadas
Exemplo de Prompt de Iteracao:
"Mantenha o layout atual, mas ajuste apenas a secao de depoimentos: aumente o padding interno para 32px, mude a cor de fundo para um roxo mais suave (#7C3AED com 10% de opacidade), e reduza o tamanho do texto de citacao para 18px. Crie tambem uma versao alternativa com cards individuais em vez de carrossel."
📝 Resumo do Modulo
Proximo Modulo:
3.7 - Otimizacao de Performance: Tecnicas para garantir velocidade e eficiencia