Semantic UI Generation: como a IA entende o design

A IA gera UI. Mas ela entende o que tá gerando?

Pede pro Claude gerar um card de produto. Ele entrega HTML, CSS, imagem, preço, botão. Tudo certo. Mas se você perguntar “por que esse botão é verde e não azul?” — silêncio. Ele não sabe. Copiou de algum padrão no treinamento.

Semantic UI Generation é quando a IA vai além de copiar layouts e começa a entender o significado por trás dos componentes. O botão é verde porque é ação primária positiva no design system. O heading usa <h2> porque é subordinado ao <h1> da página. O espaçamento é space-6 porque segue a escala do sistema.

Parece óbvio. Mas a maioria dos outputs de IA não tem essa consciência.

O que muda quando a IA entende semântica

Três coisas mudam radicalmente:

Consistência deixa de ser acidente. Se a IA sabe que cor-primaria-botao é diferente de cor-primaria-background, ela não vai misturar os dois. Hoje mistura o tempo todo — porque trata tudo como valor visual, não como papel funcional.

Acessibilidade vem de graça. Se a IA entende que um <nav> é navegação e não só um <div> com links, ela já gera o HTML certo. Se entende que role="alert" é pra mensagem urgente, não precisa de prompt extra pedindo ARIA.

Adaptação funciona. Quer o mesmo componente em dark mode? Se a IA entende tokens semânticos (foreground, background, muted), ela adapta. Se só tem valores hex hardcoded, não tem como adaptar nada.

Na prática: o que compõe UI semântica

• HTML semântico — <article>, <aside>, <main> em vez de <div> pra tudo
• Tokens de design semânticos — nomes que descrevem função (surface, accent, destructive) em vez de valor (blue-500)
• Metadados de componente — cada componente sabe seu propósito, suas variações válidas e seus limites
• Descrição declarativa — foco no “o quê” em vez do “como”

Por que isso importa pra quem usa skills

O Impeccable já opera com essa mentalidade — os comandos como /normalize e /typeset trabalham sobre intenção de design, não pixels. O Taste Skill usa tokens semânticos nos temas. Mas a maioria das ferramentas de geração de UI ainda trata tudo como pixel art com código por baixo.

O gap entre gerar interface e entender interface é onde tá a diferença entre output genérico e output que funciona no mundo real.

Fontes: HCIL SNU — Semantic UI Generation | UX Collective — Design Trends 2026