digital-eguide

デジタルガイドスキル

2ページ構成のデジタルガイドのプレビューを、横並びで作成します。インライン開始側に表紙、インライン終了側に見開きページを配置します。ライフスタイル系クリエイターのトーンで、余白をたっぷり取り、セリフ体のディスプレイ見出しを使い、列のリズムを丁寧に整えます。

ワークフロー

1. 有効な DESIGN.md を読む（上に挿入されています）。タイトルにはセリフ体のディスプレイトークンを、長文には本文用のセリフ体を、統計やラベルにはモノスペーストークンを選びます（タイトルにはイタリックや合字がおすすめです）。
2. ブリーフからトピックと著者を選ぶ。実際のタイトル（例：「The Creator's Style & Format Guide」）、実際のサブタイトル、1行の著者署名を作成します。
3. レイアウト — 色付きの背景の中央に2ページを配置します。
   • ページ1 — 表紙：
     • アイブロウ（「STYLE & FORMAT GUIDE FOR CREATORS」）。
     • ウェイトを組み合わせたディスプレイタイトルと、イタリックのアクセントワードを1つ（「The Creator's Style & Format guide」— & と guide はイタリック）。
     • モノスペースの3セル統計行（「16 PRINCIPLES OF STYLE」、「38 DOS & DON'TS」、「1 BLOCK, ZERO TEMPLATES」）。· で区切ります。
     • 「What's inside」見出しと、2列の目次（章とページ番号はモノスペース、リーダードット付き）。
     • フッター：「FIND YOUR VOICE」＋モノスペースのページ番号 01。
     • 角に控えめな装飾用のドットまたはステッカー（CSS）。
   • ページ2 — 見開き：
     • 章番号と名前を含むアイブロウ（「CHAPTER 02 · TONE」）。
     • ディスプレイのサブタイトル（「話すように書く — ただし、より洗練して。」）。
     • 2列の本文：導入段落と、番号付きの4ステップリスト（「01 ルールを選ぶ」「02 余分な言葉を削る」など）。
     • インライン終了側に配置する引用文：ラテン文字の文章では、大きなイタリックのディスプレイ書体とアクセントカラーを使います。アラビア語、ペルシア語、ウルドゥー語では、イタリックを使わず、レギュラーまたはライトの強調を使います。ヘブライ語でも、イタリックを使わず、レギュラーまたはライトの強調を使います。出典を含めます（文字体系に応じて調整）。
     • 下部の帯に「EXERCISE」のコールアウト（モノスペースのラベル＋イタリックの1文プロンプト）。
     • フッター：章タイトル＋モノスペースのページ番号 18。
4. 記述 — 単一の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを記述し、CSS はインラインにします。
   • ページは600×860の紙色カードにし、6pxの影を付け、互いに逆方向へわずかに回転（±0.6度）させて、机上の雑誌のような雰囲気にします。
   • 表紙、見開き、目次、引用文、エクササイズに data-od-id を設定します。
5. セルフチェック：
   • タイポグラフィの階層がエディトリアルになっていること — ページ1ではタイトル、ページ2ではサブタイトルを主役にします。
   • イタリックのアクセントは各ページに1回だけ使います。
   • モノスペースはラベル、統計、目次の番号にのみ使います。

出力仕様

<artifact> タグの間に出力します。

<artifact identifier="eguide-slug" type="text/html" title="E-Guide — Title">
<!doctype html>
<html>...</html>
</artifact>

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