ABOOAI/codex-skills

Texto da Imagem para Visual HTML

Propósito

Transforme uma imagem de referência com muito texto em um visual HTML mais claro e útil. Preserve os fatos da fonte, melhore a redação, redesenhe a estrutura da informação e exporte uma captura de tela de alta resolução somente após o usuário confirmar a direção do HTML.

Fluxo de Trabalho

1. Entender a origem

   • Inspecione visualmente a imagem submetida.
   • Extraia entidades, rótulos, números, categorias, comparações, conclusões, ressalvas e texto de marca da origem.
   • Separe os fatos essenciais de texto decorativo, marcas d'água, marcas da plataforma, rótulos redundantes e artefatos de layout.
   • Se o OCR não for confiável, transcreva manualmente as informações visíveis e sinalize campos incertos.

2. Definir a intenção da saída

   • Infira o público-alvo e o contexto de leitura: imagem social, gráfico de artigo, comparação de vendas, relatório interno, cartão de produto, checklist, painel, etc.
   • Decida se a melhor saída é uma página de decisão, tabela de comparação, infográfico, cartão de resumo, página de relatório ou página longa estilo carrossel.
   • Não replique meramente o layout de referência, a menos que o usuário peça explicitamente uma recriação fiel.

3. Reescrever o texto

   • Preserve fatos materiais, números, nomes de produtos, limites, notas de risco e ressalvas.
   • Reescreva texto denso em declarações curtas voltadas ao usuário.
   • Prefira fraseamento "conclusão + condição + ressalva".
   • Use rótulos explícitos como "Melhor para", "Cuidado", "Principal vantagem", "Limite", "Exemplo de preço" e "Ponto de decisão" quando tornarem a página mais escaneável.
   • Mantenha declarações sensíveis a questões legais, médicas, de seguros, financeiras e de conformidade de forma conservadora; evite inventar recomendações não suportadas pela origem.

4. Redesenhar a arquitetura da informação

   • Coloque a conclusão mais importante primeiro.
   • Adicione um resumo no topo ou uma seção "como escolher" para comparações densas.
   • Use cartões de produto/entidade para posicionamento por item.
   • Use uma seção de principais diferenças antes da tabela de detalhes completa.
   • Coloque matrizes detalhadas após o resumo, não antes dele.
   • Minimize linhas onde todas as opções são idênticas, a menos que o usuário precise de um arquivo exaustivo.

5. Construir HTML

   • Crie um arquivo HTML autônomo, a menos que o usuário tenha solicitado um framework.
   • Use CSS adequado para captura de tela: largura de exportação fixa, dimensões de grade estáveis, alto contraste, tamanhos de fonte legíveis e espaçamento suficiente entre linhas.
   • Evite elementos decorativos que reduzam a legibilidade.
   • Remova marcas da plataforma de origem, marcas d'água e rótulos de referência não relacionados, a menos que o usuário peça para mantê-los.
   • Mantenha o HTML gerado editável e autossuficiente.

6. Confirmar antes da captura de tela final

   • Compartilhe o caminho do HTML ou o status de visualização.
   • Resuma a estrutura e as principais escolhas de cópia/design.
   • Peça confirmação antes de produzir a captura de tela final de alta resolução quando o usuário ainda não aprovou a direção do HTML.
   • Se o usuário solicitar explicitamente "captura de tela direta" ou "vá direto para o final", a confirmação pode ser ignorada.

7. Exportar captura de tela de alta resolução

   • Use scripts/export_highres_screenshot.py quando o Chrome estiver disponível.
   • Prefira dimensões de exportação largas para texto denso:
     • Padrão: largura 2200-2600, escala 2
     • Muito denso: largura 2800-3200, escala 2
   • Exporte PNG e então corte o espaço em branco inferior.
   • Verifique as dimensões e inspecione visualmente a saída.

Regras de Design

• Projete para compreensão à primeira vista, não para similaridade de pixels.
• Use hierarquia: título, cartões de conclusão, cartões de item, principais diferenças, tabela de detalhes.
• Torne números e limites visualmente encontráveis.
• Use cores semanticamente:
  • Verde para vantagem relativa.
  • Laranja ou cor da marca para principais diferenças.
  • Vermelho para limites, exclusões ou riscos.
• Use menos palavras por célula; se uma célula precisar de muitas palavras, mova a explicação para um cartão de diferença chave.
• Evite que um único artefato seja uma tabela enorme e densa.
• Para trabalho com captura de tela, aumente a largura da tela HTML e os tamanhos de fonte antes de exportar, em vez de confiar em redimensionamento de imagem.

Regras de Cópia

Exemplos de reescrita:

• Denso: "10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需"

• Claro: "医保内医疗费、质子重离子可 10 年保证续保；医保外、外购药和重疾特需不保证续保。"

• Denso: "30天，意外伤害无等待期"

• Claro: "等待期 30 天；意外伤害无等待期。"

• Denso: "医保内：5000元；医保外：1万"

• Claro: "医保内一般医疗免赔 5000 元；医保外免赔 1 万。"

Validação Necessária

Antes de finalizar:

• Confirme que nenhum fato importante da origem foi descartado.
• Confirme que o texto de marca/plataforma da origem foi removido quando solicitado.
• Verifique se palavras longas e linhas densas em chinês não se sobrepõem.
• Verifique se o HTML funciona na largura de captura de tela pretendida.
• Verifique as dimensões finais do PNG e se o arquivo existe.
• Se estiver produzindo uma captura de tela, inclua o caminho da captura e renderize-a inline quando possível.

Para uma checklist compacta, leia references/visual-html-checklist.md.