Por que isso é importante

IA escreve código mas ignora arquitetura. 87% dos projetos falham por má estrutura, não por bugs.Ferramentas como Lovable admitem: "Foi decisão de conveniência que comprometeu qualidade da arquitetura."

Desenvolvedores usam IA para programar mas esquecem o fundamental: arquitetura de software. Resultado? Aplicativos funcionam no início, travem ao escalar.

IA resolve sintaxe mas não resolve estrutura. É como saber levantar muro mas não construir casa.

O Problema: IA Escreve, Não Arquiteta

Ferramentas como Lovable, Bolt, Replit escrevem código funcional mas violam princípios básicos. Exemplo real: componente de lista com lógica de API misturada.

Caso Real: Lista de Compras

IA criou componente `GroceryList.tsx` que:

• Exibe lista na tela (correto)

• Faz chamada de API (incorreto)

• Gerencia estado local (incorreto)

• Valida dados (incorreto)

Resposta da IA: "Foi decisão de conveniência que comprometeu arquitetura."

Ciclo de Falha Típico

IA cria funcionalidade básica (funciona)

Desenvolver adiciona complexidade (erros começam)

IA tenta corrigir mas cria mais erros

Créditos acabam, projeto é abandonado

Princípio 1: Single Responsibility (Separação de Responsabilidades)

Cada componente faz UMA coisa apenas. Componente de UI exibe. Serviço executa lógica. Nunca misture responsabilidades no mesmo arquivo.

❌ Incorreto

• Lista exibe itens

• Lista chama API

• Lista valida dados

• Lista formata resposta

✅ Correto

• Lista: apenas exibe

• Service: chama API

• Validator: valida dados

• Formatter: formata resposta

Estrutura Recomendada

• /components/ui/ - Elementos visuais puros

• /services/ - Lógica de negócio e APIs

• /utils/ - Funções auxiliares

• /stores/ - Gerenciamento de estado

Princípio 2: DRY (Don't Repeat Yourself)

Não duplique código. Crie componentes reutilizáveis. Um botão serve para todo o sistema, não crie botão diferente para cada tela.

Componentização Extrema

Botões

• Button primary

• Button secondary

• Button danger

• Button loading

Inputs

• Input text

• Input email

• Input password

• Input select

Modais

• Modal confirm

• Modal form

• Modal alert

• Modal loading

Vantagens da Componentização

• Muda cor do botão em 1 lugar, altera todo sistema

• Reduz bugs por inconsistência visual

• Acelera desenvolvimento de novas telas

• Facilita manutenção e atualizações

Princípio 3: Single Source of Truth (Fonte Única da Verdade)

Dados vivem em UM lugar apenas. Todos os componentes buscam informações na mesma fonte. Evita sincronização e bugs de estado.

Gerenciadores de Estado por Framework

React

• Redux Toolkit

• Zustand

• Jotai

• Context API

Vue.js

• Pinia

• Vuex

• Composables

• Provide/Inject

Problema Comum: Estados Locais Duplicados

IA cria `useState` ou variável local em cada componente que precisa dos mesmos dados.Resultado: Lista de produtos diferente em cada tela.

Princípios 4 e 5: KISS + YAGNI

KISS: Keep It Simple, Stupid

Mantenha código simples e direto. Evite soluções mirabolantes.

• Sem animações desnecessárias

• Lógica linear e clara

• Nomenclatura óbvia

• Estrutura previsível

YAGNI: You Aren't Gonna Need It

Implemente apenas o que precisa AGORA. Não antecipe necessidades.

• Sem multi-idiomas prematuros

• Sem temas desnecessários

• Sem funcionalidades "legais"

• Foco no essencial

Exemplo: Sistema Multi-idioma Prematuro

Desenvolvedor cria sistema para brasileiro mas adiciona inglês e espanhol "por segurança".

Resultado: 90% do público é BR, 80 horas perdidas em tradução desnecessária.

Ferramentas Recomendadas: IDEs vs Web Tools

Use IDEs instaladas que dão controle total sobre arquitetura. Evite ferramentas web que abstraem demais a estrutura.

✅ IDEs Recomendadas

Cursor

IA integrada, controle total do projeto

Windsurf

Novo, promissor para arquitetura

VS Code + Copilot

Clássico, extensões robustas

❌ Web Tools (Usar com Cuidado)

Lovable

Rápido mas viola princípios

Bolt / Replit

Protótipo ok, produção não

V0 Vercel

Componentes isolados apenas

Por que IDEs São Superiores

• Acesso completo à estrutura de pastas

• Controle sobre separação de responsabilidades

• Integração com ferramentas de arquitetura

• Versionamento git adequado

• Deploy em qualquer provedor

Como Orientar a IA para Seguir Princípios

IA não sabe arquitetura, você precisa ensinar. Use prompts específicos que forcem boas práticas desde o início.

Templates de Prompt para Arquitetura

Separação de Responsabilidades

"Crie um componente de UI que APENAS exibe dados. Crie um serviço separado para lógica de API. Nunca misture UI com lógica de negócio."

Estado Global

"Crie um store global para [dados]. Todos os componentes devem buscar [dados] neste store único. Não crie estados locais duplicados."

Componentização

"Crie um componente Button reutilizável. Este botão será usado em todo o sistema. Implemente variants: primary, secondary, danger."

Checklist: Arquitetura com IA

✓Use IDE instalada (Cursor, Windsurf)

✓Separar UI de lógica de negócio

✓Criar componentes reutilizáveis

✓Usar store global para dados

✓Manter código simples e direto

✓Implementar apenas o necessário

✓Orientar IA com prompts específicos

✓Revisar código gerado sempre