De repente, seu senso comum vai desmoronar hoje. Honestamente, 99% das pessoas ainda estão usando Markdown com Claude Code. O que um insider da equipe Claude Code da Anthropic disse foi: "Pare com isso." Ele disse: "É muito melhor gerar a saída em HTML em vez de Markdown."
Porque, à medida que a saída do Claude Code se torna mais avançada, o Markdown é difícil de ler, não consegue transmitir e não é compartilhado.
Por outro lado, com HTML:
- Você pode ilustrar
- Você pode codificar por cores
- Você pode organizar com abas
- Você pode até criar controles deslizantes e botões
- Você pode compartilhar diretamente no navegador
Em outras palavras, para extrair o verdadeiro valor do Claude Code, não apenas "o que você gera", mas "em qual formato você gera" se torna incrivelmente importante.
Eu afirmo isso.
A solução ideal na era do Claude Code não é apenas Markdown, mas HTML-first.
Na verdade, mesmo antes deste artigo ser publicado, o ClaudeCodeStudio já estava utilizando esse método, garantindo que os materiais de slides saiam com essa qualidade em uma única tentativa 👇
Se você ler este artigo até o final, acho que entenderá por que isso é possível, então continue lendo!
A propósito, você já teve uma experiência como esta?
- Você pediu para o Claude Code escrever um plano, mas perdeu o interesse depois que ele ultrapassou 100 linhas.
- Você compartilhou uma especificação em Markdown com a equipe, mas ninguém leu até o fim.
- Você olhou para um diagrama ASCII art e pensou: "...O que é isso?"
- Você queria organizar informações com cores ou layouts, mas não conseguiu expressar isso em Markdown.
- Você colou um plano no Slack, mas ele foi enterrado como um anexo.
Tudo isso era um "problema de formato de saída."
Um artigo intitulado "Using Claude Code: The Unreasonable Effectiveness of HTML" escrito por Thariq (@trq212), um membro da equipe de desenvolvimento do Claude Code, está viralizando no X com mais de 11 milhões de visualizações 😳
Thariq é membro da equipe Claude Code na Anthropic e engenheiro do YC W20. Em outras palavras, é um artigo onde alguém que usa Claude Code na linha de frente todos os dias declarou: "Parei de usar Markdown."
Desta vez, explicarei o conteúdo de forma fácil de entender, incluindo exemplos específicos de prompts 👇
Post original aqui: https://x.com/trq212/status/2052809885763747935
■ Qual é o problema com o Markdown?
O Markdown tem sido usado por anos como um meio de comunicação entre agentes de IA e humanos. É simples, pode ser usado em qualquer lugar e pode escrever texto rico até certo ponto. O Claude Code, é claro, gera saída em Markdown por padrão.
Mas honestamente, isso não parece familiar?
À medida que o Claude Code se torna capaz de lidar com tarefas mais complexas, os planos e especificações que ele gera ficam mais longos. Você realmente lê um arquivo Markdown que excede 100 linhas até o fim?
Thariq escreve no artigo:
"Acho difícil ler um arquivo markdown de mais de cem linhas."
Além disso, hoje em dia, estamos editando arquivos nós mesmos com menos frequência. Nós os usamos como referências para especificações ou como saída para brainstorming. Mesmo ao editar, pedimos ao Claude para "corrigir isso." Em outras palavras, a maior vantagem do Markdown — que é "fácil para humanos editarem manualmente" — não é mais significativa.
Isso verbaliza brilhantemente um problema que muitos usuários do Claude Code vinham sentindo inconscientemente.
■ Por que a opção HTML é "irracionalmente eficaz"
O que Thariq propõe é mudar o formato de saída do Claude Code de Markdown para HTML.
Você pode pensar: "HTML não é para fazer páginas web?" Mas o poder expressivo do HTML é incomparável ao Markdown.
Vejamos o que pode ser especificamente expresso com HTML:
- Dados estruturados usando tabelas
- Design e coloração usando CSS
- Ilustrações e diagramas usando SVG
- Trechos de código usando tags script
- Interação usando JavaScript e CSS
- Diagramas de fluxo de trabalho combinando SVG e HTML
- Dados espaciais usando posicionamento absoluto ou canvas
- Incorporação de imagens usando tags de imagem
Thariq afirma:
"Eu iria tão longe a ponto de dizer que quase não há conjunto de informações que Claude possa ler que você não possa representar de forma bastante eficiente com HTML."
Qualquer um que já tentou fazer o Claude desenhar um diagrama ASCII ou expressar cores com caracteres Unicode entenderá o peso dessas palavras. Você será libertado daquela ineficiência, como "dirigir uma Ferrari até a padaria."
■ A densidade de informação é esmagadoramente diferente
A maior força do HTML é a "densidade de informação."
Quando o mesmo conteúdo é escrito em Markdown e HTML, o HTML pode transmitir muito mais informação de forma muito mais legível. Você pode alternar com abas, codificar por cores ou incorporar diagramas.
Mesmo que você não sinta vontade de ler 100 linhas de Markdown, a mesma quantidade de informação organizada com abas e cores em HTML vai entrar na sua cabeça.
Isso não é apenas uma "questão de aparência." Uma especificação que não é lida é o mesmo que uma que não existe. Gerar em um formato que é lido se conecta diretamente à qualidade do trabalho em si.
■ Facilidade de compartilhamento
Quando você tenta compartilhar um arquivo Markdown com alguém, geralmente acontece assim:
- Anexar como arquivo no Slack → Ninguém abre
- Anexar a um e-mail → Ninguém abre
- Colocar no GitHub → Não-engenheiros não conseguem acessar
Com HTML, você simplesmente faz upload para o S3 e envia um link. Qualquer pessoa com um navegador pode ler. Você pode até torná-lo responsivo para que possa ser lido em dispositivos móveis.
Texto original de Thariq:
"A chance de alguém realmente ler sua especificação, relatório ou descrição de PR é muito, muito maior se estiver em HTML."
Este é um ponto sutil, mas criticamente importante na prática.
■ A revolução da interação bidirecional
É aqui que o HTML realmente brilha.
HTML não é apenas algo para "ler." Pode ser operado.
Por exemplo, ajustar um design. Se você pedir ao Claude Code para "criar um arquivo HTML com um controle deslizante", ele gerará um arquivo onde você pode ajustar a velocidade da animação, easing e cores em tempo real. Depois de encontrar os parâmetros de que gosta, você apenas pressiona um botão "copiar" e os cola de volta no Claude Code.
Essa interação bidirecional permite ajustes com um nível de precisão que prompts de texto sozinhos nunca poderiam alcançar.
Você está livre do estresse de transmitir "um pouco mais para a direita", "um pouco mais rápido" ou "não esta cor" em palavras. Você apenas move o controle deslizante.
■ Casos de uso específicos (com exemplos de prompts)
No artigo, Thariq introduz padrões de utilização de HTML com exemplos específicos de prompts. Eles são tão práticos que vou apresentá-los como estão.
𝟭. Design, Planejamento e Exploração
Ao trabalhar em tarefas complexas no Claude Code, em vez de um plano em Markdown, use múltiplos arquivos HTML para lançar uma "rede de exploração."
Exemplo de prompt:
"Não consigo decidir qual direção seguir com a tela de onboarding. Gere 6 abordagens completamente diferentes, variando o layout, o tom e a densidade, e organize-as em uma grade em um único arquivo HTML para que eu possa compará-las. Escreva os prós e contras de cada uma em etiquetas."
"Crie um plano de implementação detalhado em um arquivo HTML. Inclua mockups, fluxos de dados e trechos de código importantes para revisar. Torne-o legível e fácil de digerir."
𝟮. Revisão de Código e Compreensão
Você pode criar revisões de código mais fáceis de ler do que a tela de diff do GitHub.
Exemplo de prompt:
"Crie um artefato HTML para revisar este PR. Não estou familiarizado com a lógica de streaming/backpressure, então foque nisso. Renderize o diff real com anotações nas margens inline, codificadas por cores por importância."
Thariq escreve: "Agora, anexo uma explicação de código em formato HTML a cada PR."
𝟯. Design e Prototipagem
Assim como a base do Claude Design é HTML, o HTML é extremamente bom para expressão de design. Mesmo que a implementação final seja React ou Swift, um fluxo de trabalho de esboçar em HTML primeiro e depois reescrever é eficaz.
Exemplo de prompt:
"Quero fazer um protótipo para um novo botão de checkout. Ele deve animar e ficar roxo quando clicado. Crie um arquivo HTML onde eu possa testar cada parâmetro de animação com controles deslizantes e opções. Inclua um botão para copiar os parâmetros que funcionaram bem."
𝟰. Relatórios, Pesquisa e Aprendizado
Claude Code é bom em sintetizar informações de múltiplas fontes de dados e resumi-las em um relatório legível. Você pode fazê-lo pesquisar no Slack, no código, no histórico do git e na internet para criar relatórios de liderança ou relatórios de incidentes.
Exemplo de prompt:
"Não entendo como o limitador de taxa funciona. Leia o código relevante e crie uma página de explicação em HTML. Inclua um diagrama de fluxo do token bucket, 3-4 trechos de código importantes com anotações e, finalmente, uma seção de 'armadilhas'. Otimize para que eu possa entender em uma única leitura."
𝟱. Interfaces de Edição Personalizadas
Este foi o caso de uso mais chocante para mim pessoalmente. Perceber operações que são difíceis de transmitir em uma caixa de texto com um editor HTML descartável.
Exemplo de prompt:
"Quero reorganizar a prioridade de 30 tickets do Linear. Crie um arquivo HTML onde cada ticket seja um cartão arrastável e coloque-os em quatro colunas: Agora / Depois / Mais Tarde / Cortado. Organize-os inicialmente com base no seu palpite. Inclua um botão 'Copiar como Markdown' para exportar a ordem final com uma linha de raciocínio para cada balde."
"Estou ajustando este prompt de sistema. Crie um editor lado a lado. À esquerda, um prompt editável (destacando os slots de variáveis), e à direita, três entradas de amostra para que o modelo reflita em tempo real. Inclua um contador de caracteres/tokens e um botão de copiar."
Essa ideia não é incrível? Gerar a UI necessária na hora, apenas para aquela tarefa. Não precisa ser reutilizada. Não precisa ser perfeita. Mas é 100 vezes mais eficiente do que fazer apenas com texto.
■ Respostas a perguntas comuns
No artigo, Thariq também responde a perguntas comuns sobre HTML.
"Isso não é ineficiente em termos de tokens?"
→ É verdade que usa mais tokens que o Markdown. Mas considerando o poder expressivo e a "probabilidade de ser realmente lido", é eficiente no total. Com o contexto de 1 milhão de tokens do Opus 4.7, o aumento está em um nível que não importa.
"Isso não leva tempo para gerar?"
→ Leva de 2 a 4 vezes mais que o Markdown. Mas o próprio Thariq sente que o resultado vale esse tempo.
"E o controle de versão?"
→ Isso é honestamente uma desvantagem. Diffs de HTML têm mais ruído que os de Markdown e são mais difíceis de revisar. Atualmente, esta é uma das maiores fraquezas do HTML.
"O design acaba parecendo cafona?"
→ Melhora se você usar o plugin de design frontend do Claude Code. Além disso, se você fizer o Claude Code ler o código da sua empresa para criar um "arquivo HTML de sistema de design" e usá-lo como referência daí em diante, você pode unificá-lo com o estilo da sua empresa.
■ Por que HTML "agora"?
A razão pela qual este artigo ressoa é o momento.
Agora que o Claude Code pode lidar com tarefas complexas, as saídas são longas e densas. Continuar recebendo isso em Markdown, um formato que é apenas "texto com um pouco de estilo", é agora um gargalo.
A conclusão de Thariq é esta:
"Sinto-me muito mais por dentro do que nunca ao usar HTML."
Em vez de deixar tudo para o Claude Code, ao tornar a saída HTML, um ciclo de "compreensão humana, julgamento e feedback" gira. Esta é a essência da colaboração com IA.
■ Resumo dos pontos práticos
- Nenhuma habilidade ou configuração difícil necessária. Apenas diga ao Claude Code para "criar um arquivo HTML."
- Não tente criar um arquivo de habilidade desde o início. Primeiro, tente com prompts brutos.
- Comece com "coisas que você quer que as pessoas leiam", como planos, revisões, relatórios e protótipos.
- O efeito dobra quando você está consciente da "interatividade", como controles deslizantes e botões de copiar.
- Abra o HTML gerado em um navegador ou faça upload para o S3 para compartilhar.
Markdown não é ruim. Mas agora que a saída do Claude Code se tornou tão avançada, chegou a hora de atualizar também o formato do receptor.
Da próxima vez que você pedir ao Claude Code para criar um plano, tente adicionar uma linha: "Faça em HTML." Você ficará surpreso com a diferença.
Para aqueles que acharam este artigo um pouco útil:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) é
uma conta administrada por três entusiastas do Claude Code.
Publicamos diariamente sobre utilização prática de CLI e automação.
Atualmente, estamos co-desenvolvendo um agente de IA com uma empresa listada.
Nossas postagens habituais 👇
- Casos reais de desenvolvimento de produtos usando Claude Code e Claude
- Organização de utilização do Claude Code / Vibe Coding / tendências de desenvolvimento
- Informações mais recentes sobre Claude Code do exterior
Da filosofia de desenvolvimento ao design, implementação e melhoria,
resumimos informações do exterior e primárias até o ponto de colocar um produto funcional no mundo, não apenas "terminar a construção."
Se você estiver interessado, por favor, siga e dê uma olhada 👀 Acho que será benéfico!
