Ponte Visual-para-Código

A Ponte Visual-para-Código é a funcionalidade emblemática do Hatcher - a tecnologia revolucionária que permite selecionar elementos diretamente na sua aplicação ao vivo e transformá-los em código preciso e específico para seu contexto.

Como Funciona

1. Seleção Visual Direta

Em vez de descrever o que você quer mudar, simplesmente selecione:

• Clique em qualquer elemento da sua aplicação
• Arraste para criar regiões de seleção
• Seleção múltipla mantendo Cmd/Ctrl
• Use ferramentas de inspetor para seleção precisa

2. Captura de Contexto Inteligente

Hatcher captura automaticamente:

• Estrutura do Componente: Hierarquia DOM e componentes Vue/React
• Estados Atuais: Props, state e valores de dados
• Regras de Estilo: CSS aplicado e classes
• Contexto do Projeto: Padrões da sua base de código existente

3. Geração de Código Consciente do Contexto

A IA gera código que:

• Segue suas convenções de nomenclatura existentes
• Usa suas bibliotecas e padrões preferidos
• Mantém consistência com sua arquitetura
• Respeita as regras dos seus Playbooks

Capacidades Principais

Modificação de Componentes

// Antes: Selecionar um botão visualmente
// Depois: Código gerado automaticamente
<button
  className="btn btn-primary hover:bg-blue-700 transition-colors"
  onClick={handleSubmit}
  disabled={isLoading}
>
  {isLoading ? 'Enviando...' : 'Enviar'}
</button>

Manipulação de Layout

• Redimensionar elementos arrastando bordas
• Reposicionar elementos por arrastar e soltar
• Ajustar espaçamento e alinhamento visualmente
• Modificar breakpoints responsivos em tempo real

Gestão de Estado

• Conectar elementos a fontes de dados
• Configurar manipuladores de eventos
• Estabelecer validação de formulários
• Implementar lógica condicional

Aplicação de Estilos

• Modificar cores, fontes e espaçamento
• Aplicar animações e transições
• Implementar temas e variantes
• Manter consistência do sistema de design

Fluxo de Trabalho Típico

Passo 1: Preparar o Ambiente

# Garantir que sua aplicação está rodando
npm run dev

Passo 2: Ativar Modo Visual

1. Abrir Hatcher
2. Conectar à sua aplicação local
3. Ativar overlay de seleção visual

Passo 3: Fazer Seleção

1. Navegar para a página a modificar
2. Clicar no elemento alvo
3. Ver informações de contexto capturadas

Passo 4: Descrever Mudanças

"Torne este botão maior e mude a cor do hover para verde"

Passo 5: Revisar Código Gerado

<button
- className="btn btn-primary"
+ className="btn btn-primary btn-lg hover:bg-green-500"
  onClick={handleSubmit}

Passo 6: Aplicar ou Refinar

• Aplicar: A mudança é aplicada imediatamente
• Refinar: Fornecer feedback adicional para melhorias
• Rejeitar: Descartar e tentar abordagem diferente

Técnicas Avançadas

Seleção Multi-Elemento

// Selecionar múltiplos botões
// A IA entende padrões e aplica mudanças consistentes
const buttons = document.querySelectorAll('.action-button')
// Gera código afetando todos os elementos similares

Seleção Baseada em Contexto

• Seleção de Componente: Selecionar componentes Vue/React inteiros
• Seleção de Estado: Incluir dados e lógica relacionados
• Seleção de Estilo: Capturar regras CSS e variáveis

Casos de Uso Comuns

Desenvolvimento de UI Rápido

• Criar novos componentes selecionando elementos similares
• Ajustar layouts responsivos visualmente
• Implementar variantes de componentes
• Refinar detalhes de interação

Refatoração Assistida

• Atualizar padrões obsoletos em toda aplicação
• Migrar para novos sistemas de design
• Consolidar componentes duplicados
• Melhorar acessibilidade sistematicamente

Melhores Práticas

Preparação Efetiva

1. Mantenha sua aplicação atualizada em modo desenvolvimento
2. Estruture seus componentes claramente para melhor detecção
3. Use nomenclatura consistente em classes e IDs
4. Documente padrões complexos em Playbooks

Seleção Precisa

1. Seja específico em suas seleções
2. Use o inspetor para elementos aninhados
3. Considere o contexto do componente pai
4. Verifique o estado antes de fazer mudanças

---

A Ponte Visual-para-Código representa uma mudança fundamental em como interagimos com nosso código - convertendo intenção visual diretamente em implementação precisa, sempre mantendo controle total do desenvolvedor.