Como Criar o OftalmoDoc com IA

Escolha sua IA

Ferramentas recomendadas

Use qualquer uma destas IAs para gerar o seu aplicativo seguindo os prompts abaixo.

Recomendado

Google Gemini

Foi a ferramenta exata que usámos para criar o OftalmoDoc. O recurso "Canvas" permite visualizar o aplicativo em tempo real.

Abrir Gemini →

Alternativa

ChatGPT (OpenAI)

Excelente para gerar o código. Recomendado usar a versão GPT-4o para lidar com códigos mais longos sem cortar a meio.

Abrir ChatGPT →

Alternativa

Claude (Anthropic)

Ótima alternativa para programação, com excelente capacidade de lidar com códigos extensos e contextos grandes.

Abrir Claude →

Passo a passo

4 etapas para o seu app

Siga os passos na ordem. Cada um traz um prompt pronto para copiar e colar na IA.

A base do sistema (o prompt arquitetônico)

O grande segredo: exigir que a IA crie tudo num único arquivo HTML autossuficiente.

⌄

O grande segredo deste projeto é exigir que a IA crie tudo dentro de um único arquivo HTML autossuficiente. Isso significa que não precisará de instalar servidores, nem pagar mensalidades. Copie e cole o texto abaixo na sua IA:

Prompt para copiar

Atue como um Engenheiro de Software Sênior e Especialista em UI/UX para a área médica. Quero que você crie um aplicativo web interativo de Prontuário Eletrônico chamado 'OftalmoDoc'. Regra de Ouro: O código gerado deve ser um ÚNICO arquivo HTML (index.html) autossuficiente. Use React, Tailwind CSS e html2pdf.js importados via CDN (links diretos) na tag <head>. Não gere arquivos separados. Requisitos do Sistema: 1. Um menu lateral com dois grandes blocos: 'Laudos de Exames' e 'Descrições Cirúrgicas'. 2. O documento deve simular visualmente uma folha A4 no centro da tela. 3. Cabeçalho com: Nome do Paciente, Data, Médico (select gerenciável com opção '+ Cadastrar Novo'). 4. O corpo do exame deve exibir uma lista de estruturas (ex: Retina, Mácula, Vasos). Ao clicar na estrutura, com apenas UM clique, deve abrir um menu flutuante listando alterações patológicas e um campo para texto livre. 5. Ações: Inclua botões para 'Imprimir', 'Criar PDF' e 'Copiar Corpo Clínico' (que copia apenas o texto do laudo, ignorando o cabeçalho do paciente). 6. O design deve ser extremamente clean e focado na agilidade (poucos cliques).

Inserindo o seu "cérebro" clínico

Personalize com o seu vocabulário a partir dos seus modelos de exames.

⌄

Agora que a "carcaça" está pronta, precisamos personalizá-la com o seu vocabulário. Faça o upload dos seus arquivos Word (.docx) ou PDF contendo os seus exames e cirurgias normais na IA e envie o comando abaixo:

Prompt para copiar

Anexei meus modelos reais de exames e descrições cirúrgicas. Atualize o código do nosso aplicativo HTML incorporando essas matrizes de dados. Regras para atualização: 1. Para os Exames: Separe independentemente Olho Direito (OD) e Olho Esquerdo (OE) na tela. A alteração de um não pode interferir no outro. 2. Crie no mínimo 5 a 6 opções de alterações patológicas detalhadas para CADA quesito (ex: para 'Mácula', liste edema, buraco macular, MER, etc). 3. Na conclusão, forneça 10 opções de diagnósticos estruturados baseados nas patologias daquele exame. 4. Nas cirurgias, crie um passo a passo. Transforme campos com marcações de milímetros (ex: 'Recuo de ___ mm') em inputs de seleção rápida (1 a 10mm). 5. Adicione um bloco de assinatura dinâmico no rodapé, lendo o nome, CRM e RQE do médico selecionado no cabeçalho. Gere o código HTML final completo e atualizado.

Gatilhos de automação (lógica de ouro)

Ensine a IA a criar regras inteligentes — ex: catarata torna o fundo impraticável.

⌄

A IA pode criar regras inteligentes. Por exemplo: se um olho tem catarata branca, o fundo de olho é impraticável. Vamos ensinar isso a ela:

Prompt para copiar

Atualize a lógica do aplicativo com a seguinte regra inteligente: No exame de Mapeamento de Retina, se eu selecionar no campo 'Meios' qualquer opção que contenha a palavra 'opacidade' ou 'catarata total', eu quero que todos os campos do segmento posterior (Papila, Retina, Mácula, Vasos, Periferia) mudem automaticamente o seu valor para o texto fixo: 'Impraticável por opacidade de meios'. Atenção: Essa mudança deve afetar APENAS o olho (OD ou OE) que recebeu a marcação de opacidade.

Como executar o seu aplicativo

Transforme o código gerado pela IA num app que roda 100% offline.

⌄

A IA vai gerar um grande bloco de código (começando com <!DOCTYPE html>). Veja como transformá-lo no seu app:

Abra o Bloco de Notas (Windows) ou Editor de Textos (Mac).
Copie 100% do código gerado pela IA e cole dentro do editor.
Clique em "Salvar Como...".
Em "Nome do ficheiro", digite: OftalmoDoc.html
Em "Tipo", mude para "Todos os ficheiros" e guarde no seu Ambiente de Trabalho.
Pronto! Dê dois cliques no ficheiro criado. Ele abrirá no seu navegador, rodando 100% offline, seguro e privado!

⚠

Aviso: Os prompts são pontos de partida. Adapte o vocabulário e as estruturas à sua especialidade e aos seus modelos clínicos para obter o melhor resultado.