<HTML> É o novo Markdown · peterson047

Na era da IA generativa, HTML e CSS deixaram de ser apenas tecnologias de implementação e se tornaram a melhor linguagem de design que existe.

Deixa eu te mostrar os cenários que levantei, e por que eles mudam a forma como penso sobre design e desenvolvimento.

O problema de frameworks no pipeline de IA

Imagine o seguinte cenário: você joga um arquivo do Figma para um modelo de IA.

O que acontece?

A IA vê pixels, camadas, grupos e retângulos.

Ela não vê um botão. Ela vê um retângulo arredondado com texto sobreposto.
Ela não vê uma navegação. Ela vê um frame com quatro textos alinhados horizontalmente.

Aí entra o humano, ou a tentativa da IA de adivinhar, para traduzir:

"esse grupo de camadas é um componente de accordion"
"esse frame é um modal"
"essa lista de retângulos é um grid de cards"

É uma etapa de interpretação semântica que introduz ambiguidade, erro e perda de contexto.

Agora imagine o cenário oposto:

Quando você descreve uma interface em HTML, você não está desenhando. Você está definindo.

Um <nav> é navegação.
Um <button type="submit"> é um botão de envio.
Um <article> com <header>, <time> e <footer> é um card de conteúdo com metadados estruturais explícitos.

A IA não precisa adivinhar. Ela lê.

HTML como "linguagem de baixo nível" para design

Usei essa expressão em uma discussão e alguns colegas estranharam.

"Baixo nível" soa como algo primitivo.

Mas pense assim:

HTML + CSS é uma representação executável, unívoca e semanticamente completa de uma interface.

É o "assembly" do design de front-end, não porque é limitado, mas porque é preciso.

Quando eu escrevo:

<main>
  <section aria-labelledby="busca-titulo">
    <h2 id="busca-titulo">Encontre especialistas</h2>

    <form role="search">
      <input
        type="search"
        aria-label="Buscar por nome"
      />

      <button type="submit">
        Buscar
      </button>
    </form>
  </section>
</main>

Estou entregando:

Estrutura semântica (main, section, form, input, button)
Hierarquia de conteúdo (h2, aninhamento)
Acessibilidade (aria-label, aria-labelledby)
Comportamento esperado (type="search", type="submit")
Layout implícito (aninhamento que sugere fluxo e relações espaciais)

Nenhuma ferramenta de design visual entrega tudo isso de uma vez.

E nenhum formato intermediário consegue sequer chegar perto.

Markdown é semântico, mas falta design visual

Markdown tem semântica, mas é semântica de documento.

Títulos, listas, ênfase, blocos de código.

É perfeito para READMEs e artigos.

Mas para front-end?

Markdown descreve conteúdo linear.

Ele não sabe o que é:

um sidebar
um dashboard
um modal
um estado de hover

Ele não tem vocabulário para layout, interatividade ou relações espaciais.

HTML tem.

E quando você combina HTML com CSS especialmente com variáveis, grid, flexbox e media queries, você está entregando não apenas o o quê, mas o como, o onde e o quando da interface.

É contexto visual + estrutural + semântico em um único pacote.

O retorno do HTML

Vivemos uma década onde frameworks dominaram o discurso.

React, Vue, Angular, Svelte.

Todos abstraíram o HTML para dentro de componentes, JSX e templates.

O HTML "puro" foi tratado como algo antiquado. Algo que você não escreve diretamente. Algo gerado por build tools e transpilers.

Mas aí veio a IA generativa.

E a IA precisa de contexto.

Ela precisa entender o que está vendo.

E quando você olha para os cenários práticos, descobre algo surpreendente:

Entre todos os formatos possíveis. Imagens de Figma, descrições em Markdown, especificações em JSON, prompts em linguagem natural, HTML + CSS é o formato mais rico em contexto semântico e visual que existe para interfaces web.

Não é à toa que ferramentas de IA para front-end estão convergindo para HTML como representação intermediária.

A IA gera HTML.
A IA lê HTML.
A IA refatora HTML.

O HTML se tornou a lingua franca entre intenção humana, modelo de linguagem e execução final.

Na era onde os frameworks já dominam, a demanda por contexto de IA tornou HTML e CSS tecnologias salvadoras.

Não porque são novas.

Pelo contrário:

Porque são estáveis, semânticas, universais e completas.

Conclusão

Quando o consumidor final do seu protótipo é um modelo de linguagem que vai gerar código, você quer dar a ele a representação mais rica em semântica, não a mais rica em pixels.

HTML não é apenas uma tecnologia de implementação.

É uma linguagem de design completa, semanticamente estruturada, visualmente expressiva e universalmente compreensível por máquinas.

E nesse sentido, é perfeitamente superior a qualquer alternativa que exista hoje.

Se você ainda prototipa apenas no Figma e joga o resultado para um dev (ou para uma IA) adivinhar a estrutura, está perdendo contexto.

E na era da IA, contexto é tudo.

Prototipe em HTML. A IA vai entender.