Skill de E-mail Marketing
Produza um único e-mail HTML — centralizado, coluna única, sem bordas ao redor do corpo do e-mail. Trate-o como um artefato de marketing: uma grande ideia, um CTA.
Fluxo de trabalho
- Leia o DESIGN.md ativo (injetado acima). O e-mail depende mais da fonte de exibição do que qualquer outra superfície — selecione o token de tipo mais marcante no DS para o bloco de headline.
- Escolha a marca + produto do briefing. Gere um logotipo real, um nome de produto real e uma frase de benefício real — sem placeholders.
- Layout, em ordem, todos centralizados dentro de uma coluna de 600–680px em um fundo de página matizado (para que o corpo do e-mail pareça um e-mail, não a página):
- Cabeçalho — logotipo à esquerda + 3 links de navegação curtos (SHOP, JOURNAL, MEMBERS) à direita. Sublinhado fino.
- Bloco de herói — um placeholder de imagem de produto 16:9. Use um gradiente matizado do DS ou uma silhueta SVG estilizada do produto (tênis, garrafa, fone de ouvido, o que o briefing sugerir). Adicione um pequeno selo da marca no canto superior esquerdo e uma etiqueta de variação de cor no canto inferior esquerdo.
- Sobrancelha — letras maiúsculas pequenas, cor de destaque, separadas por caracteres
·(ex: "NEW · MAX-CUSHION TRAINER · EMBER FLARE"). - Bloco de headline — headline de 2–3 linhas usando a fonte de exibição, tudo maiúsculo, tracking extra apertado. Aplique uma leve inclinação (
transform: skew(-6deg)) em uma palavra de destaque para dar uma sensação esportiva de paralelogramo. - Corpo — parágrafo de 2–3 frases, alinhado à esquerda, fonte do corpo.
- CTA primário — botão sólido (pílula ou bloco). Apenas um.
- Grade de especificações — grade 2×2 de destaques (número grande + unidade + rótulo) usando a fonte de exibição para os números.
- Rodapé — logotipo, linha de endereço, links de cancelamento de inscrição e visualização no navegador.
- Escreva um único documento HTML:
<!doctype html>até</html>, CSS inline.- Centralize a coluna com
margin: 0 auto. Definabody { background: <matiz> }para que a metáfora e-mail-na-página seja lida. - Sem imagens externas — use SVG inline ou blocos de gradiente matizado do DS para a foto do produto.
data-od-idno cabeçalho, herói, headline, CTA, especificações.
- Auto-verificação:
- E-mail lido de cima para baixo em 8–10 segundos.
- Um CTA. O acento aparece no máximo duas vezes (sobrancelha + CTA, ou palavra da headline).
- Legível em uma janela de 480px (a coluna reflui, o tipo cai um passo).
Contrato de saída
Emita entre tags <artifact>:
<artifact identifier="slug-do-email" type="text/html" title="E-mail — Linha de Assunto">
<!doctype html>
<html>...</html>
</artifact>
Uma frase antes do artefato, nada depois.