splatstudio

Compétence : Article de Blog

Produire une page d'article long unique — mise en page éditoriale, sans chrome.

Flux de travail

1. Lire le DESIGN.md actif (injecté ci-dessus). S'appuyer sur les jetons typographiques — un format long est composé à 70 % de texte, 20 % d'images, 10 % de chrome.
2. Choisir le sujet à partir du brief et rédiger un véritable article — au moins 600 mots répartis sur 4 à 6 sections H2. Pas de lorem ipsum.
3. Sections, dans l'ordre :
   • Masthead — petit mot-symbole + 4 à 6 liens de navigation, simples.
   • En-tête d'article — ruban de catégorie, titre (jeton d'affichage, grand), chapô (1 à 2 phrases de sous-titre), nom de l'auteur + rôle + date.
   • Image à la une — bloc placeholder 16:9 utilisant un dégradé teinté DS ou un remplissage uni (pas d'images externes). Ajouter une légende d'une ligne en dessous.
   • Corps — alternance de paragraphes en prose avec au moins :
     • 1 citation en exergue (grand affichage, règle d'accent sur le bord de début en ligne pour que la mise en page s'inverse correctement sous dir="rtl").
     • 1 figure (placeholder d'image + légende).
     • 1 liste (numérotée ou à puces).
     • 1 citation en bloc en ligne.
   • Pied d'auteur — avatar de l'auteur (initiales dans un cercle), paragraphe biographique.
   • Articles connexes — 3 cartes liant à d'autres articles. Chaque carte : petit bloc d'image, titre, extrait d'une ligne, date.
4. Rédiger un document HTML unique :
   • <!doctype html> jusqu'à </html>, CSS en ligne.
   • Le corps de l'article utilise la police de corps DS, centrée, largeur maximale selon la règle de mise en page DS (typiquement 680–720px).
   • Lettrines (first-letter) uniquement si l'ambiance DS est éditoriale / serif — à éviter sur les DS techniques.
   • data-od-id sur le titre, l'image à la une, le corps, la citation en exergue, la grille des articles connexes.
5. Auto-vérification :
   • La hiérarchie typographique est sans ambiguïté — H1 est clairement le titre ; les H2 sont des séparateurs de sections ; les citations en exergue ne rivalisent pas avec H1.
   • Longueur de ligne 60–75 caractères pour la prose du corps.
   • La couleur d'accent apparaît au maximum deux fois (ruban + règle de citation en exergue, ou un lien).
   • La page se lit comme un magazine, pas comme une page d'atterrissage marketing.

Contrat de sortie

Émettre entre les balises <artifact> :

<artifact identifier="slug-de-l-article" type="text/html" title="Titre de l'article">
<!doctype html>
<html>...</html>
</artifact>

Une phrase avant l'artefact, rien après.