Verifique visualmente e corrija o HTML e Markdown gerados pela IA
Abra o código pronto em um editor visual gratuito, veja o resultado com os olhos do usuário e edite sem programação
- 1.Abra o ChatGPT ou Claude e gere o código HTML com o prompt. Copie o resultado.
Se o serviço não estiver disponível em sua região, use VPN ou um modelo local via Ollama.
ChatGPT ↗Sobre a ferramentaPromptGere um template de email HTML responsivo para [ocasião: ex., email de boas-vindas, newsletter, anúncio de promoção]. Inclua CSS inline, um cabeçalho com placeholder de logo, uma seção de conteúdo principal com [mensagem principal] e um rodapé com link de cancelamento de inscrição. Torne-o compatível com mobile com largura máxima de 600px.
O que este prompt fazO prompt pede à IA para criar um template HTML de email. Substitua [ocasião] pelo tipo de email (ex.: email de boas-vindas) e [mensagem principal] pelo seu texto. A IA retornará o código HTML pronto com estilos incorporados. - 2.Abra o CodePen - um editor HTML online gratuito com preview em tempo real. Clique no botão 'Pen' no canto superior esquerdo.
Não é necessário se cadastrar para visualizar, mas é preciso para salvar. O plano gratuito permite criar um número ilimitado de pens.
CodePen ↗ - 3.Cole o código HTML gerado no painel HTML (coluna esquerda). Se o código contém CSS, mova-o para o painel CSS (coluna do meio). O preview aparecerá automaticamente na coluna direita.
Se o HTML já tem estilos inline, todo o código pode ser inserido no painel HTML - o painel CSS não é necessário.
CodePen ↗ - 4.Verifique o resultado visualmente: como ficam o cabeçalho, o texto, os botões. Alterne para o modo de visualização móvel clicando no botão de redimensionamento na barra superior do preview.
Preste atenção à legibilidade do texto, espaçamentos e alinhamento dos elementos.
CodePen ↗ - 5.Se precisar fazer ajustes, edite o código no painel esquerdo. As mudanças aparecerão imediatamente no preview. Para documentos Markdown, use o StackEdit (stackedit.io) - cole o texto no painel esquerdo e verifique o resultado no painel direito.
O StackEdit suporta preview em tempo real e exportação para HTML, PDF e outros formatos.
StackEdit ↗ - 6.Quando o resultado estiver satisfatório, copie o código final do editor e use no seu projeto. Para HTML, clique no botão 'Copy' no canto superior direito do painel HTML no CodePen.
Salve o pen no CodePen se quiser voltar a ele depois - é necessário um cadastro gratuito para isso.
CodePen ↗
- grátisChatGPT FreeO plano gratuito oferece acesso ao GPT-4o mini com limite no número de mensagens por hora.
- grátisCodePen FreeO plano gratuito permite criar um número ilimitado de projetos com preview em tempo real, sem necessidade de cadastro para visualizar.
- grátisStackEditEditor Markdown online totalmente gratuito com preview em tempo real e exportação para vários formatos.
Serviços de IA mudam rápido - interfaces e limites gratuitos podem diferir do descrito.