Compétence Email Marketing
Produire un email HTML unique — centré, une seule colonne, sans chrome autour du corps de l'email. Traitez-le comme un artefact marketing : une grande idée, un seul CTA.
Workflow
- Lisez le DESIGN.md actif (injecté ci-dessus). L'email s'appuie sur la police display plus que tout autre support — choisissez le token typographique le plus marquant du DS pour le titre.
- Choisissez la marque + le produit à partir du brief. Générez un vrai mot-symbole, un vrai nom de produit et une phrase d'accroche réelle — pas de placeholders.
- Mise en page, dans l'ordre, le tout centré dans une colonne de 600 à 680 px sur un fond de page teinté (pour que le corps de l'email ressemble à un email, pas à la page) :
- En-tête — mot-symbole à gauche + 3 courts liens de navigation (SHOP, JOURNAL, MEMBERS) à droite. Soulignement fin.
- Bloc hero — un placeholder d'image produit au format 16:9. Utilisez un gradient teinté du DS ou une silhouette SVG stylisée du produit (chaussure, bouteille, casque, selon le brief). Ajoutez un petit tampon de marque en haut à gauche et un tag de couleur en bas à gauche.
- Accroche — petites capitales, couleur d'accent, séparée par des caractères
·(ex. "NEW · MAX-CUSHION TRAINER · EMBER FLARE"). - Bloc titre — titre de 2 à 3 lignes utilisant la police display, tout en majuscules, avec un crénage très serré. Appliquez une légère inclinaison (
transform: skew(-6deg)) sur un mot d'accent pour lui donner un aspect sportif de parallélogramme. - Corps — 2 à 3 phrases, aligné à gauche, police de corps.
- CTA principal — bouton plein (pilule ou bloc). Un seul.
- Grille de spécifications — grille 2×2 de callouts (grand nombre + unité + libellé) utilisant la police display pour les nombres.
- Pied de page — mot-symbole, adresse, lien de désabonnement + lien "voir dans le navigateur".
- Écrivez un document HTML unique :
<!doctype html>jusqu'à</html>, CSS inline.- Centrez la colonne avec
margin: 0 auto. Définissezbody { background: <teinte> }pour que la métaphore de l'email dans la page fonctionne. - Pas d'images externes — utilisez des SVG inline ou des blocs de gradient teinté du DS pour la photo produit.
data-od-idsur l'en-tête, le hero, le titre, le CTA, les spécifications.
- Auto-vérification :
- L'email se lit de haut en bas en 8 à 10 secondes.
- Un seul CTA. L'accent apparaît au maximum deux fois (accroche + CTA, ou mot du titre).
- Lisible dans une fenêtre de 480 px (la colonne se réajuste, la typographie réduit d'un cran).
Contrat de sortie
Émettez entre des balises <artifact> :
<artifact identifier="slug-email" type="text/html" title="Email — Objet">
<!doctype html>
<html>...</html>
</artifact>
Une phrase avant l'artefact, rien après.