blog-post

ブログ記事スキル

雑誌のようなレイアウトで、余分な装飾のない、単一の長文記事ページを作成します。

ワークフロー

1. アクティブな DESIGN.md を読む（上部に挿入されています）。タイポグラフィのトークンを活用します。長文記事では、タイポグラフィが70％、画像が20％、装飾が10％です。
2. 概要からトピックを選び、実際の記事を執筆します。4～6個の H2 セクションで、600語以上にしてください。ダミーテキストは使いません。
3. セクションは次の順番にします。
   • マストヘッド — 小さなワードマークと4～6個のナビゲーションリンク。シンプルにします。
   • 記事ヘッダー — カテゴリーの小見出し、大きなディスプレイトークンの見出し、1～2文のサブ見出し、著者名と役職、日付。
   • ヒーロー画像 — DS の色調を反映したグラデーションまたは単色の塗りつぶしで、16:9 のプレースホルダーブロックを作成します（外部画像は使いません）。その下に1行のキャプションを追加します。
   • 本文 — 以下を最低1つずつ含め、段落を交互に配置します。
     • 1つのプルクオート（大きなディスプレイ文字を使い、dir="rtl" の場合にレイアウトが正しく反転するよう、インライン開始端にアクセントのルールを付けます）。
     • 1つの図（画像プレースホルダーとキャプション）。
     • 1つのリスト（番号付きまたは箇条書き）。
     • 1つのインライン引用。
   • 著者フッター — 著者のアバター（円の中にイニシャルを配置）と紹介文。
   • 関連記事 — 他の記事へのリンクを含む3つのカード。各カードには、小さな画像ブロック、タイトル、1行の抜粋、日付を含めます。
4. 単一の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを記述し、CSS はインラインにします。
   • 記事本文には DS の本文フォントを使用し、中央揃えにします。最大幅は DS のレイアウトルールに従います（通常は680～720px）。
   • ドロップキャップ（first-letter）は、DS の雰囲気が雑誌風またはセリフ体の場合に限って使用し、テック系の DS では使いません。
   • 見出し、ヒーロー、本文、プルクオート、関連記事グリッドに data-od-id を設定します。
5. セルフチェック
   • 文字の階層が明確であることを確認します。H1 が明らかな記事見出し、H2 がセクションの区切りとなり、プルクオートが H1 と競合していないこと。
   • 本文の1行の長さを60～75文字にします。
   • アクセントの使用は最大2回にします（小見出しとプルクオートのルール、またはリンク1つ）。
   • マーケティング用のランディングページではなく、雑誌のような読み心地にします。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文だけ記述し、その後には何も記述しません。