splatstudio

Skill de Post de Blog

Produzir uma única página de artigo long-form — layout editorial, sem chrome.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Apoie-se nos tokens de tipografia — long-form é 70% tipo, 20% imagem, 10% chrome.
2. Escolha o tópico a partir do briefing e escreva um artigo real — pelo menos 600 palavras distribuídas em 4–6 seções H2. Sem lorem ipsum.
3. Seções, na ordem:
   • Cabeçalho — palavra-chave pequena + 4–6 links de navegação, simples.
   • Cabeçalho do artigo — sobrancelha de categoria, headline (token de display, grande), deck (subtítulo de 1–2 frases), nome do autor + cargo + data.
   • Imagem hero — um bloco placeholder 16:9 usando um gradiente ou preenchimento sólido com base no DS (sem imagens externas). Adicione uma legenda de 1 linha abaixo.
   • Corpo — parágrafos de prosa alternados com pelo menos:
     • 1 citação em destaque (tipo grande em display, régua de acento na borda inicial para que o layout funcione corretamente sob dir="rtl").
     • 1 figura (placeholder de imagem + legenda).
     • 1 lista (numerada ou com marcadores).
     • 1 blockquote inline.
   • Rodapé do autor — avatar do autor (iniciais em um círculo), parágrafo de biografia.
   • Relacionados — 3 cards linkando para outros posts. Cada card: bloco de imagem pequena, título, excerto de 1 linha, data.
4. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline.
   • O corpo do artigo usa a fonte do DS para corpo, centralizado, largura máxima conforme regra de layout do DS (tipicamente 680–720px).
   • Capitulares (first-letter) apenas se o tom do DS for editorial / serifa — pule em DSes mais técnicos.
   • data-od-id no headline, hero, corpo, citação em destaque, grade de relacionados.
5. Auto-verificação:
   • Hierarquia de tipos é inequívoca — H1 é claramente o headline; H2s são divisores de seção; citações em destaque não competem com H1.
   • Comprimento de linha 60–75 caracteres para prosa do corpo.
   • Acento aparece no máximo duas vezes (sobrancelha + régua da citação em destaque, ou um link).
   • A página parece de revista, não de landing page de marketing.

Contrato de saída

Emita entre tags <artifact>:

<artifact identifier="slug-do-post" type="text/html" title="Título do Artigo">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.