Habilidade de Email Marketing

Produza um único email HTML — centralizado, em coluna única, sem bordas ao redor do corpo do email. Trate-o como um artefato de marketing: uma grande ideia, um CTA.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). O email depende mais da fonte de exibição do que de qualquer outra superfície — escolha o token de tipografia mais chamativo no DS para o título principal.
2. Escolha a marca + produto do briefing. Gere um logotipo real, um nome de produto real e uma frase de benefício real — sem placeholders.
3. Layout, em ordem, tudo centralizado dentro de uma coluna de 600–680px em um fundo de página tingido (para que o corpo do email pareça um email, não a página):
   • Masthead — logotipo à esquerda + 3 links de navegação curtos (COMPRAR, DIÁRIO, MEMBROS) à direita. Sublinhado fino.
   • Bloco principal — um placeholder de imagem de produto 16:9. Use um gradiente tingido pelo DS ou uma silhueta estilizada em SVG do produto (sapato, garrafa, fones de ouvido, o que o briefing implicar). Adicione um pequeno selo da marca no canto superior esquerdo e uma etiqueta de cor no canto inferior esquerdo.
   • Sobretítulo — em versalete, cor de destaque, separado por caracteres · (por exemplo, "NOVO · TÊNIS COM MÁXIMO AMORTECIMENTO · BRASA FLAMANTE").
   • Título principal — título de 2–3 linhas usando a fonte de exibição, tudo em maiúsculas, espaçamento extra apertado. Aplique uma leve inclinação (transform: skew(-6deg)) em uma palavra de destaque para dar uma sensação de paralelogramo esportivo.
   • Corpo — parágrafo de 2–3 frases, alinhado à esquerda, fonte do corpo.
   • CTA Principal — botão sólido em forma de pílula ou bloco. Apenas um.
   • Grade de especificações — grade 2×2 de chamadas de (número grande + unidade + rótulo) usando a fonte de exibição para os números.
   • Rodapé — logotipo, linha de endereço, links de cancelar inscrição + visualizar no navegador.
4. Escreva um único documento HTML:
   • <!doctype html> a </html>, CSS inline.
   • Centralize a coluna com margin: 0 auto. Defina body { background: <tint> } para que a metáfora do email na página seja lida.
   • Sem imagens externas — use SVG inline ou blocos de gradiente tingidos pelo DS para a foto do produto.
   • data-od-id no masthead, principal, título, CTA, especificações.
5. Auto-verificação:
   • O email é lido de cima para baixo em 8–10 segundos.
   • Um CTA. O destaque aparece no máximo duas vezes (sobretítulo + CTA, ou palavra do título).
   • Parece legível em uma janela de 480px (a coluna se ajusta, a tipografia diminui um nível).

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.