email-designer

メールデザイナー

会話を通じて、Outlook と互換性のあるメールテンプレートを生成します。ユーザーが希望を説明すると、Outlook で下書きとして開ける、ピクセル単位で正確な EML ファイルを作成します。

仕組み

このスキルは次の 3 層で構成されています。

1. ルール — HTML の生成時に従う、Outlook との互換性に関する制約
2. テンプレート — 組み立てに使用する、事前に用意されたコンポーネントとレイアウト
3. コードブロック — EML ファイルを作成するために実行する Python スクリプト

コア機能（HTML + EML）では Python 標準ライブラリのみを使用します。追加機能（グラフ、ヘッダーバナー、画像の最適化）には追加パッケージが必要です。必要に応じて自動インストールされます。手順 0 を参照してください。

手順 0：環境の確認

開始する前に、Python 3 が利用可能であることを確認します。以下のコマンドを試してください（現在のプラットフォームで動作するものを使用します）。

python3 --version    # macOS / Linux
python --version     # Windows (check that output shows 3.x, not 2.x)

• Python があり、バージョンが 3.8 以上 → 何も伝えずに続行します（ユーザーに確認したことを知らせないでください）。
• Python がない、またはバージョンが古い → 続行してはいけません。代わりに次の手順を実行します。
  1. uname -s と uname -m（Windows の場合は systeminfo）を実行して、ユーザーの OS とアーキテクチャを確認します。
  2. ウェブ検索が可能な場合は、ユーザーのプラットフォーム向けに推奨される最新の Python 3 のインストール方法を検索し、具体的なコマンドを提示します。
  3. 検索できない場合は、ユーザーの言語で次のメッセージを表示します。

     中文: Email Designer 需要 Python 3.8 或更高版本。请访问 https://www.python.org/downloads/ 下载并安装适合你操作系统的版本，安装完成后重新运行。

     English: Email Designer requires Python 3.8 or later. Please visit https://www.python.org/downloads/ to download and install the version for your OS, then try again.

  4. ここで停止し、ユーザーがインストールを完了するまで待ちます。

オプションの依存関係（必要に応じて自動インストール）

手順 1 で、メールにグラフまたは画像処理が必要だと判断した場合：

1. code-blocks/deps-checker.py → check_and_install(features) を実行します。
   • features は ['charts']、['images']、または ['charts', 'images'] です。
2. すべて利用可能 → 何も伝えずに続行します。
3. インストール済み → 何も伝えずに続行します（インストールは静かに行われます）。
4. インストールに失敗 → ユーザーに知らせ、代替案を提示します。
   • グラフを利用できない場合 → 「代わりに HTML テーブルと統計グリッドコンポーネントを使用します」
   • 画像を利用できない場合 → 「HTML ヘッダーコンポーネントを使用し、圧縮は行いません」

機能	パッケージ	使用できる機能
charts	plotly, kaleido	棒グラフ、折れ線グラフ、ヒートマップ、円グラフの生成
images	pillow	ヘッダーバナーの合成、画像の圧縮
excel	openpyxl	Excel テンプレートの生成とデータの読み込み（本番モード）

モードの判定

環境チェックに合格したら、ユーザーの入力と既存プロジェクトに基づいて適切なモードを判定します。モードは次の3つです。

1. インポートモード — ユーザーが .eml ファイルを提供した場合（または既存のメールのインポート／複製について言及した場合）：

1. code-blocks/eml-to-html.py を実行して → extract_from_eml(eml_path) でHTMLと埋め込み画像を抽出します
2. save_extracted(result, output_dir) を実行して、CID参照を相対パスに変換したHTMLと画像を保存します
3. 抽出したHTMLをブラウザーで自動的に開いてプレビューします
4. ユーザーに次のように尋ねます："メールの内容を抽出し、プレビューしました。次に何をしますか？ A) これをベースにデザインを調整する（デザインモードのStep 3へ） B) 再利用できる量産プロジェクトとして、そのまま定着させる（定着化フローへ）"
5. Aの場合 → 抽出したHTMLを検証し（code-blocks/html-validator.py → validate(html)）、code-blocks/output-manager.py → create_project(name) で出力を整理してから、抽出したHTMLを開始点としてStep 3（プレビューと調整）へ進みます
6. Bの場合 → rules/production-mode.md の「Crystallization Process」を読み、手順C0～C5に従います

2. 量産モード — email-projects/ ディレクトリに定着化済みのプロジェクトがある場合：

1. template.html と template.xlsx の両方を含むサブディレクトリを検索します
2. プロジェクトが見つかった場合は、次のように提示します：

   "次のメールテンプレートプロジェクトが見つかりました：

   1. {project-name-1}
   2. {project-name-2} ... プロジェクト番号とExcelデータファイルのパスを指定してください（例：1 /path/to/data.xlsx）。 または、新しいメールを作成するには 'new' と入力してください。"

3. ユーザーがプロジェクトを選択した場合 → まず code-blocks/deps-checker.py を実行して → check_and_install(features=['excel']) を呼び出し、openpyxlが利用可能であることを確認してから、rules/production-mode.md を読み、手順P0～P4に従います
4. ユーザーが new と入力した場合 → デザインモードに進みます

3. デザインモード — EMLファイルがなく既存プロジェクトもない場合、またはユーザーが new を選択した場合のデフォルトです。以下のStep 1に進みます。

状況に応じたフロー

すべてのリクエストで完全なウィザードが必要なわけではありません。ユーザーの入力に合わせて進め方を調整してください。

ユーザーのリクエストに十分な情報がすでに含まれている場合（レイアウト、色、幅、コンテンツの種類が文脈から明らかな場合）は、先に進んで構いません。たとえば、「青色の製品アップデートメールのテンプレートを作って。600px」からは、1列レイアウト、青色（#2563eb）、幅600pxと判断できます。そのまま生成に進んでください。

リクエストの確認が必要な場合は、以下のガイド付き対話を使って必要な情報を集めてください。特に、メールデザインの用語に詳しくない技術者以外のユーザーが、簡単に決められるようにすることが目的です。

ガイド付きインタラクション

メールのデザインには、6 つの決定事項があります。エージェントは、ユーザーの依頼から推測できることを推測し、残りについて一度に 1 つずつ、必ずおすすめのデフォルトを添えて質問します。

6 つの決定事項（この順番で質問します。前の回答をもとに、後のデフォルトを決めます）：

#	決定事項	決めること	対応方法
1	目的とレイアウト	メールの種類 → 構成が決まります	通常は依頼から推測できます。確認はしますが、最初から尋ねることはしません
2	コンテンツモジュール	含めるセクション（KPI カード、チャート、記事リスト、表など）	レイアウトの種類に応じてデフォルトのセットを提案します。ユーザーが追加・削除できるようにします
3	ビジュアルスタイル	配色、デザインのトーン	ユーザーがブランドや色に言及していない場合は尋ねます。名前付きのプリセットを 3～4 種類提示します
4	データとアセット	データファイル、画像、ロゴがあるか。チャートが必要か	レイアウトの種類から推測できます（ダッシュボードにはデータが必要です）。確認のために尋ねます
5	幅	600 / 800 / 1200px	レイアウトに応じたデフォルト（ニュースレター → 600、レポート → 800）を設定します。確認します
6	コンテンツ	実際のコンテンツかプレースホルダーか	まだ明確でない場合にのみ尋ねます

インタラクションの原則：

重要 — 1 つのメッセージで複数の質問をしてはいけません。 各メッセージで尋ねるのは、必ず 1 つの決定事項だけです。質問を一度に すべて並べるとユーザーを圧倒し、ガイド付きインタラクションの目的に反します。

❌ 悪い例（質問を一度にすべて並べる）： 「次の点を教えてください：1. レポートの内容範囲 2. ビジュアルスタイル 3. レイアウトの好み 4. メールの幅 5. その他」

✅ 良い例（おすすめを添えて、メッセージごとに質問を 1 つ）： メッセージ 1：「四半期の商談レポート — Dashboard レイアウト（800px）がおすすめです。通常は次の内容を含みます：A) KPI 指標カード B) トレンドチャート ...」 メッセージ 2：「配色スタイルは？A) 濃い青のビジネス向け B) ...」 メッセージ 3：「既存のデータはありますか？A) ある B) まずはサンプルデータを使う」

• まず推測し、次に確認します。 ユーザーがすでに伝えた内容をすべて読み取ります。 「商談の四半期レポートメール」という依頼なら、Dashboard レイアウト、チャートと KPI カードが必要である可能性が高いこと、800px が適切であることはすでにわかります。 推測した内容を伝えて確認を求めます。7 種類のレイアウトをすべて提示して選ばせることはしません。

• 1 メッセージにつき質問は 1 つです。 各メッセージで尋ねるのは、1 つの決定事項だけです。 これにより、ユーザーが質問に集中し、簡単に答えられるようになります。決定事項が すでにわかっている場合（推測できた場合、またはユーザーが伝えている場合）は、 その項目は尋ねません。

• 必ずおすすめを提示します。 各質問には、簡潔な理由を添えたラベル付きのおすすめを含めます。 例：「おすすめは A（濃い青のビジネス向け）です。正式な四半期レポートに適しています」。 希望が決まっていないユーザーは、そのままおすすめを選べます。

• 選択式を優先します。 自由回答ではなく、短い説明を添えた A/B/C/D の選択肢を使います。 カスタマイズ用の自由回答も含めます（例：「D) 色をカスタマイズ」）。

• 質問は最大 3 つです。 3 つ質問してもまだ不明点があれば、残りには妥当なデフォルトを使います。 ほとんどのユーザーは 3 回を超えるやり取りで我慢できなくなります。2 つの決定事項の関連性が 非常に高い場合（レイアウトと幅など）に限り、質問をまとめます。

「商談の四半期レポートメールを作って」という依頼へのやり取りの例：

エージェントの推測：Dashboard レイアウト、800px、チャートと KPI が必要。

質問 1（推測内容の確認とモジュールの質問）：

「四半期の商談レポート — Dashboard レイアウト（800px）がおすすめです。この種のレポートには通常、次の内容が含まれます： A) KPI 指標カード B) トレンドチャート C) ファネルチャート D) 分布図 E) 上位項目リスト F) まとめの文章 おすすめ：すべて選択。四半期レポートは情報量が多いためです。どれを含めますか？」

質問 2（ビジュアルスタイル）：

「配色スタイルは？ A) 濃い青のビジネス向け B) 濃い緑の成長向け C) 紫のテクノロジー向け D) 色をカスタマイズ おすすめ：A の濃い青のビジネス向け。正式な四半期レポートに適しています」

質問 3（データ）：

「既存のデータはありますか？ A) ある。データを提供する B) まずはサンプルデータを使い、後から差し替える」

その後、生成を開始します。それ以上の質問はしません。

ステップ 1：リクエストを理解する

上記のガイド付きやり取りをもとに、以下の項目を決定します。

• レイアウト：選択肢は templates/layouts/ で確認します。

  • 1 カラム（单栏）— 製品の更新情報、お知らせ、週刊ダイジェスト
  • 2 カラム（双栏）— サイドバーにデータを表示するレポート
  • マガジン（杂志）— ヒーロー画像と記事を掲載するエディトリアル
  • お知らせ（公告）— シンプルで中央揃えの、行動喚起を含むレイアウト
  • ダッシュボード（数据面板）— KPI レポート、分析ダイジェスト、週次レビュー
  • トランザクション（事务通知）— 注文確認、パスワードリセット、システムアラート
  • オンボーディング（引导流程）— ウェルカムメール、利用開始ガイド
  • カスタム — ユーザーの説明に基づき、コンポーネントを組み合わせてデザインします。

• 幅：600px（モバイルファースト）／800px（バランス型）／1200px（デスクトップ）／カスタム

• 色：ブランド画像が提供されていますか？提供されている場合は、画像を読み込んで色を分析します（ビジョン機能を使用）。 提供されていない場合は、プリセットを提案します：ブルー #2563eb、グリーン #059669、オレンジ #ea580c、パープル #7c3aed、グレー #374151。 （完全なパレットは rules/brand-color-extraction.md を参照）

• 保存済みテンプレート：code-blocks/template-manager.py を実行して list_templates() を呼び出し、 再利用できるテンプレートがあるか確認します。テンプレートがある場合は、最初に提示します。

素材の確認

レイアウト／幅／色を決定したら、必要なビジュアル素材を確認します。

• ユーザー提供のデータ（Excel、CSV、表、会話内の数値）→ グラフの生成を計画します（ステップ 1.5a）
• ユーザー提供の背景画像 → ヘッダーバナーの合成を計画します（ステップ 1.5b）
• ユーザー提供のローカル画像 → 画像の最適化を計画します（ステップ 1.5c）
• メールの種類がダッシュボード／週次レポート／データレポートで、データが提供されていない → 「グラフにしたいデータはありますか？」と尋ねます。

素材の準備が必要な場合：

1. 依存関係を確認します（ステップ 0 のオプション依存関係）。
2. ステップ 1.5 に進みます。

素材が不要な場合 → ステップ 2 に進みます。

ステップ 1.5：素材の準備（素材が特定された場合）

HTML の生成前にビジュアル素材を準備します。出力はすべてプロジェクトの images/ ディレクトリに保存します。

1.5a：グラフの生成（データが提供された場合）

1. rules/chart-design-system.md を読み、ビジュアル上の制約を確認します。
2. データ構造を分析し、グラフの種類を提案します。
   • カテゴリ × 単一の値 → 横棒グラフ
   • カテゴリ × 複数の系列 → 積み上げ棒グラフ
   • 時間 × 値 → 折れ線グラフ
   • 2D マトリックス → ヒートマップ
   • 全体に対する各部分 → 円グラフ／ドーナツグラフ
   • データポイントが 5 個以下 → 代わりに HTML テーブルまたは統計グリッドを提案します。
3. ユーザーに確認します：「データに基づくと、[type] グラフがおすすめです。よろしいですか？」
4. code-blocks/chart-generator.py を実行します。

   gen = EmailChartGenerator(container_width=WIDTH, output_dir='OUTPUT/images')
   path = gen.bar_chart(categories=[...], series={...}, title='...', filename='chart_name.png')
   

5. グラフ画像をユーザーにプレビューしてもらい、必要に応じて調整します。
6. 最終的な PNG は images/{chart_name}.png に保存されます。

1.5b：ヘッダーバナー（背景画像が提供された場合）

1. code-blocks/header-generator.py を実行します。

   gen = HeaderGenerator()
   path = gen.generate(title='...', subtitle='...', output_path='OUTPUT/images/header_banner.jpg',
                       bg_image='path/to/bg.png')  # or bg_color='#2563eb' for solid
   

2. 背景画像が提供されていないものの、ユーザーがビジュアルバナーを希望する場合 → 単色のオプションを提示します。
3. ユーザーがバナー画像を希望しない場合 → 代わりに HTML ヘッダーコンポーネントを使用します（Pillow は不要です）。
4. 出力：images/header_banner.jpg

1.5c：画像の最適化（ローカル画像が提供された場合）

1. 画像がプロジェクトの images/ ディレクトリにあることを確認します。
2. ファイル名を確認します。ASCII 以外の文字を含むファイル名は ASCII に変更する必要があります（rules/design-system.md § 画像ファイル名のルールを参照）。
3. code-blocks/image-optimizer.py を実行します。

   results = optimize_directory('OUTPUT/images/', threshold_kb=200)
   # results = [(filename, original_kb, compressed_kb), ...]
   

4. ファイルが最適化された場合は、削減量をユーザーに報告します。

ステップ 2：HTML を生成する

HTML を生成する前に、以下のファイルを読んで参考にしてください。

• rules/outlook-compatibility.md — Outlook との互換性ルール（必須）
• rules/design-system.md — 汎用デザインの基盤（色、タイポグラフィ、間隔） （メールを互換性のあるものにするだけでなく、プロフェッショナルでモダンな印象にするためのものです）
• rules/design-system-data-report.md — データ量の多いメール（KPI ダッシュボード、 週次レポート、ステータス更新）の場合にのみ使用します。シンプルなニュースレターやお知らせでは省略してください。
• rules/chart-design-system.md — グラフを生成する場合にのみ使用します。メールに埋め込むグラフの色、 タイポグラフィ、サイズ、データラベルの規則です。
• rules/email-best-practices.md — デザインガイドライン
• rules/style-presets.md — デザインスタイルのプリセット（Corporate、Editorial、Minimal）。 メールの目的に合ったスタイルを選び、間隔、フォントサイズ、色の使い方の指針にしてください。
• rules/placeholder-i18n.md — ユーザーの言語に合ったプレースホルダーを使用します
• templates/components/*.html — 実績のある Outlook 対応コンポーネントのパターン （高度なレイアウト向けの stats-grid、nav-bar、status-badge を含みます）
• examples/example-*.html — 参考用の完全な動作サンプル

デザインのヒント — ヘッダーはコンパクトに保つ：ヘッダーはヒーローバナーではなく、 ナビゲーションバーのような印象にしてください。ロゴとタイトルは 1 行に配置し、高さは全体で約 60～70px にします。ヘッダー内に高さのある スペーサー行や大きすぎるロゴを置くのは避け、縦方向のスペースはコンテンツに使ってください。

Outlook との互換性が重要な理由：Windows 版 Outlook 2007～2019 は、ブラウザーのレンダリングエンジンではなく、Microsoft Word のレンダリングエンジンを使用します。そのため、最新の CSS の大半（flexbox、grid、border-radius、margin）は無視されるか、正しく動作しません。ルールファイルには、これに正しく対処する本番運用のメールシステムで実証済みのパターンが含まれています。 templates/components/ 内のすべての HTML パターンは、Outlook、Gmail、Apple Mail、ウェブクライアントで正しく表示されることを確認済みです。

生成時の主な原則：

• ユーザーが依頼していないコンテンツは絶対に追加しないでください。「AI によって生成」などの透かし、 ツールのクレジット、免責事項は追加しません。フッターには、ユーザーのデザインで指定されている内容（著作権、配信停止リンクなど）のみを含めてください。
• rules/outlook-compatibility.md に厳密に従ってください — テーブルレイアウト、インライン スタイル、VML の区切り線、スペーサー行、MSO 条件付きコメント、その他すべての Outlook 固有の仕様を扱っています。 HTML を生成する前に、このファイルを読んでください。
• Gmail のサイズ制限 — Gmail によってメールが途中で切り詰められないよう、HTML を 102KB 未満にしてください。
• プリヘッダーテキスト — <body> の直後に、非表示の <div style="display:none;">Preview text</div> を追加してください。

生成後：

1. 最初に検証する：code-blocks/html-validator.py を実行 → validate(html)。 禁止されている CSS、VML の不足、列幅の超過、テキストのはみ出し、 Gmail の 102KB サイズ制限、alt テキストの不足、HTTPS 以外のリンク、プリヘッダーの不足、 コンテナー幅を超える要素など、32 項目を確認します。エラーがあれば、続行する前に修正してください。
2. 出力を整理する：code-blocks/output-manager.py を実行 → create_project(name) し、ユーザーの作業ディレクトリにタイムスタンプ付きのディレクトリを作成します （例：./output/2026-03-15_product-report/）。スキル自体のインストールディレクトリに出力ファイルを書き込まないでください。
3. HTML を {project_dir}/newsletter-preview.html に保存します

ステップ 3：プレビューして調整する

1. ブラウザーで自動的に開く：code-blocks/preview-helper.py を実行 → open_in_browser()
   • すべての画像（グラフ、ヘッダーバナー、コンテンツ画像）を直接表示します
   • プレビュー用に EML を生成する必要はありません
2. 会話内に ASCII レイアウトの概要を表示する：→ ascii_layout_summary(html)
3. 調整が必要か尋ね、満足するまで繰り返します

ステップ 4：コンテンツを入力する（任意）

「今すぐコンテンツを入力しますか？それとも、Outlook で編集できるようにプレースホルダーを残しますか？」と尋ねます。

今すぐ入力する場合：

1. code-blocks/content-filler.py の generate_fill_template(html) を実行し、ユーザーが一度に入力できるよう、すべてのプレースホルダーを YAML 形式のテンプレートとして表示します
2. コンテンツを収集します。一つずつ入力してもらう方法と、ユーザーからバッチ辞書を受け取る方法があります
3. fill_batch(html, content_dict, image_dir) を実行して効率よく一括入力します（ディレクトリ内の画像を CID プレースホルダーに自動で割り当てます）
4. 再度プレビューし、unfilled_placeholders(html) を確認して、残っているものがないかチェックします

クイック編集（ステップ 2 以降、いつでも実行できます）

ユーザーが対象を絞った変更（例：「ヘッダーの色を赤に変えて」「タイトルを大きくして」）を求めた場合は、再生成するのではなく code-blocks/html-patcher.py を使います。

• replace_color(html, old, new) — すべての箇所で色を置換します
• change_width(html, old_w, new_w) — コンテナーのサイズを変更します
• replace_text(html, old, new) — 表示されるテキストを変更します
• add_section(html, section_html) — フッターの前にセクションを挿入します
• patch_file(path, colors={...}, texts={...}) — 複数のパッチを一度に適用します

パッチ適用後に再検証します：html-validator.py → validate(patched_html)。

ステップ 5：EML を生成する

ここで HTML が実際のメールファイルになります。方法は 2 つあります。

方法 A（推奨）：eml-builder.py の Fluent API を使う

EMLBuilder クラスを使う短い Python スクリプトを記述します。

from pathlib import Path
# Read the eml-builder.py source, then use:
eml = (
    EMLBuilder(sender="", subject="Newsletter Title")
    .set_html(Path("output/newsletter-preview.html").read_text())
    .add_image("logo", "output/images/logo.png")   # for each CID image
    .build("output/newsletter.eml")
)

方法 B：html-to-eml.py のスクリプトテンプレートを使う

スクリプトをコピーし、先頭にある CONFIG セクションを編集してから実行します。

HTML_FILE = "output/newsletter-preview.html"   # your generated HTML
OUTPUT_EML = "output/newsletter.eml"           # output path
SUBJECT = "..."                                # ask user
SENDER = ""                                    # optional
TO_ADDRS = []                                  # optional
IMAGE_DIR = "output/images"                    # if images exist

どちらの方法でも Python 標準の email モジュールを使うため、pip のインストールは不要です。X-Unsent: 1 を含む適切な MIME 構造（multipart/alternative → text/plain + multipart/related → text/html + CID 画像）を作成するため、Outlook で下書き／作成モードとして開きます。

重大な注意 — 提供されたスクリプトのみを使用してください。 EML の生成には、必ず eml-builder.py（方法 A）または html-to-eml.py（方法 B）を使用してください。 EML の生成に独自の一時的な／インラインの Python スクリプトを作成してはいけません。誤った MIME 構造になったり、 CID 画像の埋め込みが漏れたりして、Outlook で画像が正しく表示されない可能性があります。

EML の生成後、先に進む前に検証します。

1. code-blocks/eml-validator.py の validate_eml(eml_path) を実行します。 MIME 構造、text/plain フォールバック、CID 対応関係の完全性（すべての src="cid:xxx" に一致する埋め込み画像があること）、未解決の画像パスの残存、Content-ID の形式（RFC 2392）、X-Unsent ヘッダー、Content-Disposition inline、ファイルサイズなど、14 項目をチェックします。チェックは状況に応じて行われます。画像関連のルールは、HTML が実際に画像を参照している場合にのみ適用されます。テキストのみのメールは問題なく検証に合格します。
2. ステップ 6 に進む前に、エラーがあれば修正します。

検証に合格したら、必ずステップ 6 に進んでください。ここで会話を終了してはいけません。

ステップ 6：仕上げ

以下のすべてを、必ず順番に実行します。

6a. 繰り返し利用するためのテンプレート化を提案する

これは重要です。将来、異なるデータを使ってこのテンプレートを再利用したいユーザーは多くいます（例：週次レポート、定期ニュースレター）。必ず尋ねてください。

「メールのデザインが完成しました。このテンプレートを、再利用可能なプロジェクトとして定着させますか？今後は Excel に入力するだけで、繰り返し生成できます。」

ユーザーが同意した場合は、rules/production-mode.md の §「Crystallization Process」を読み、手順 C0～C5 に従います。 テンプレート化が完了したら、以下の 6b と 6c に進みます。 ユーザーが辞退した場合も、以下の 6b と 6c に進みます。

6b. テンプレートを保存し、出力を表示する

1. テンプレートの保存を提案します。code-blocks/template-manager.py の save_template() を実行します
2. ユーザーがファイルを簡単に見つけて開けるよう、出力ファイルの場所を絶対パス（ファイル名のみではなく）で表示します。例：

   EML 文件:  /Users/name/project/output/2026-03-15_report/newsletter.eml
   HTML 预览: /Users/name/project/output/2026-03-15_report/newsletter-preview.html
   图片目录:  /Users/name/project/output/2026-03-15_report/images/
   

   output/... のような相対パスではなく、実際の作業ディレクトリのパスを使用します。

6c. 使用ガイドを表示する

該当する Outlook 使用ガイドを表示します。

• 中国語のユーザー → templates/guides/outlook-usage-guide-zh.md
• 英語のユーザー → templates/guides/outlook-usage-guide-en.md

プレースホルダーシステム

このスキルでは、目的に応じて2種類のプレースホルダー機構を使い分けます。

• {{placeholder}}（デザインモード） — code-blocks/content-filler.py が、対話型のデザイン中にプレースホルダーを一度だけ埋めるために使用します。単純な文字列置換です。デザインモードでメールを一から作成する場合に使用します。

• `` コメント（本番モード） — AI エージェントが Excel データの挿入位置を理解するための構造マーカーとして、確定済みの template.html ファイルで使用します。これらは content-filler.py では処理されません。 詳細については、rules/production-mode.md を参照してください。

2つのシステムは異なるワークフローで使用され、相互に連携しません。content-filler.py はデザインモードのツールであり、本番モードでは AI エージェントをレンダリングエンジンとして使用します。

ファイル一覧

rules/
  outlook-compatibility.md   ← Read before generating HTML (Outlook rendering rules)
  design-system.md           ← Universal: colors, typography, spacing (ALWAYS read)
  design-system-data-report.md ← Extension: KPI cards, status badges, trends (data emails only)
  email-best-practices.md    ← Design guidance (widths, colors, typography)
  style-presets.md           ← 3 design styles: Corporate, Editorial, Minimal
  placeholder-i18n.md        ← Localized placeholder text (zh/en/ja)
  chart-design-system.md     ← Chart colors, typography, sizing (read before chart generation)
  brand-color-extraction.md  ← Color extraction + preset palettes
  production-mode.md         ← Production mode: detection, workflow, crystallization, Excel integration

templates/
  components/*.html          ← 19 Outlook-safe HTML building blocks
                                (header, section, card, table, image-placeholder,
                                 divider, footer, stats-grid, nav-bar, status-badge,
                                 progress-bar, button, callout, testimonial,
                                 feature-list, pricing-table, team-member,
                                 alert, timeline)
  layouts/*.md               ← 7 preset layout descriptions
                                (single-column, two-column, magazine, announcement,
                                 dashboard, transactional, onboarding)
  guides/*.md                ← End-user Outlook usage guides (zh/en)

code-blocks/
  html-validator.py          ← Run AFTER generating HTML, BEFORE EML (auto-check 32 rules)
  eml-validator.py           ← Run AFTER generating EML, BEFORE Step 6 (auto-check 14 rules)
  html-patcher.py            ← Targeted edits (color, width, text) without regenerating
  output-manager.py          ← Timestamped project directories for organized output
  eml-builder.py             ← EML builder class (fluent API)
  cid-embedder.py            ← Image scanning + placeholder PNG creation
  html-to-eml.py             ← HTML→EML conversion (edit CONFIG section, then execute)
  eml-to-html.py             ← Extract HTML + images from .eml files (Import Mode)
  content-filler.py          ← {{placeholder}} replacement + batch filling
  template-manager.py        ← Save/load/list custom templates
  preview-helper.py          ← Browser auto-open + ASCII layout
  deps-checker.py            ← Auto-install optional dependencies (charts, images)
  chart-generator.py         ← Plotly chart generation (bar, line, heatmap, pie)
  header-generator.py        ← Header banner image compositing (text on background)
  image-optimizer.py         ← Image compression (PNG→JPEG, resize, optimize)
  excel-template-generator.py ← Generate & load Excel data templates (openpyxl)

examples/
  example-single-column.html ← Complete 600px single-column reference
  example-two-column.html    ← Complete 800px two-column reference