digital-eguide

デジタル E ガイドスキル

2 ページのデジタルガイドプレビューを並べて生成します。左側に見開きの カバー、右側に本文見開き。ライフスタイル系クリエイターのトーン、余白を たっぷりと、セリフのディスプレイ見出し、丁寧な段組みのリズム。

ワークフロー

1. アクティブな DESIGN.md を読む（上に挿入されています）。タイトル用に セリフのディスプレイトークン（イタリックのリガチャ推奨）、長文用に ボディセリフ、統計・ラベル用にモノトークンを選びます。
2. ブリーフからトピックと著者を選ぶ。実際のタイトル（例: 「The Creator's Style & Format Guide」）、実際のサブタイトル、1 行の 著者クレジットを生成します。
3. レイアウト — 色付きの背景の上に 2 ページを中央配置します:
   • Page 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 カラムの目次（章 + モノのページ番号、 リーダー dots）。
     • フッター: 「FIND YOUR VOICE」+ モノの page 01。
     • 隅にさりげない装飾ドットまたはステッカー（CSS）。
   • Page 2 — 見開き:
     • 章番号 + 章名のアイブロウ（「CHAPTER 02 · TONE」）。
     • ディスプレイサブタイトル（「Write like you talk — only sharper.」）。
     • 2 カラム本文: 冒頭段落 + 番号付き 4 ステップリスト（「01 Pick the rule」「02 Drop the filler」…）。
     • 右側に固定したプルクオート: 大きなイタリックのディスプレイ、 アクセントカラー、出典付き。
     • 下部ストリップに「EXERCISE」コールアウト（モノのラベル + イタリックの 1 文プロンプト）。
     • フッター: 章タイトル + モノの page 18。
4. 1 つの HTML ドキュメントを書く:
   • <!doctype html> から </html> まで、CSS はインライン。
   • ページは 600×860 の紙トーンカードで、6px の影、互いに逆方向の わずかな回転（±0.6deg）で机上の雑誌のような雰囲気に。
   • cover、spread、toc、pull-quote、exercise に data-od-id。
5. セルフチェック:
   • タイプ階層がエディトリアル — タイトルが page 1 を支配し、サブタイトルが page 2 を支配。
   • イタリックのアクセントが 1 ページにつき 1 回。
   • モノはラベル、統計、目次の数字にのみ使用。

出力契約

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

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

アーティファクトの前に 1 文、後に何もなし。