Mapa de Capacidades Interativas do Codex

Transforme um artigo longo, um tópico de rede social, um memorando, um ensaio de produto ou uma narrativa de lançamento em um explicador visual que as pessoas possam escanear e clicar.

Use Quando

• A entrada é majoritariamente texto e o usuário deseja um modelo mental mais claro.
• O conteúdo contém conceitos repetidos, um processo, um framework, capacidades ou princípios operacionais.
• O resultado desejado é um artefato web polido, não um resumo estático.

Fluxo de Trabalho

1. Leia o material fonte e extraia de 6 a 10 conceitos centrais.
2. Nomeie o modelo geral em linguagem clara. Prefira uma frase nominal curta, como "Modelo Operacional", "Mapa de Capacidades" ou "Loop de Fluxo de Trabalho".
3. Construa três visualizações interligadas:
   • Um destaque (hero) que enquadra a fonte e a promessa.
   • Um loop de fluxo de trabalho que mostra a sequência ou sistema principal.
   • Uma matriz de casos de uso que combina conceitos em cenários práticos.
4. Adicione um painel de detalhes no lado direito. Clicar em qualquer item de navegação, nó do loop, cartão da matriz ou nível de maturidade deve atualizar o painel.
5. Faça com que o elemento clicado e o painel de detalhes correspondam visivelmente através de cor compartilhada, movimento, forma de ícone/marca ou gradiente.
6. Mantenha o texto curto. O artefato deve reduzir o esforço de leitura, não recriar o artigo.

Direção Visual

• Use um estilo de produto refinado inspirado no Codex, com movimento líquido suave, superfícies vítreas e controles funcionais nítidos.
• Faça com que a primeira visualização pareça uma superfície de produto finalizada, não um wireframe.
• Prefira diagramas, loops, matrizes, trilhos, cartões e divulgação progressiva em vez de parágrafos.
• Use estados de hover e ativos significativos. Um clique deve parecer consequente.
• Evite dependências de imagens externas, a menos que o usuário forneça explicitamente os ativos.

Requisitos de Interação

• Todos os elementos clicáveis devem atualizar o conteúdo ou rolar para uma seção significativa.
• O estado ativo deve ser visualmente óbvio.
• O painel de detalhes deve animar a cada mudança.
• Rótulos longos devem quebrar de forma limpa e nunca ser cortados.
• O layout deve funcionar com 1280px de largura e colapsar de forma limpa abaixo de 900px.

Contrato de Saída

Emita um único artefato HTML de arquivo único:

<artifact identifier="codex-interactive-capability-map" type="text/html" title="Codex Interactive Capability Map">
<!doctype html>
<html>...</html>
</artifact>

Inclua todo o CSS e JavaScript inline. Não use lorem ipsum. Não deixe cartões de espaço reservado. Se a fonte não incluir detalhes concretos suficientes, infira um modelo conceitual pequeno e claramente rotulado a partir da fonte, em vez de inventar conteúdo não relacionado.