email-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Email Designer

邮件模板设计工具

Generate Outlook-compatible email templates through conversation. The user describes what they want, you produce a pixel-perfect EML file that opens as a draft in Outlook.

通过对话生成兼容Outlook的邮件模板。用户描述需求，你即可生成像素级完美的EML文件，该文件可在Outlook中作为草稿打开。

How It Works

工作原理

This skill has three layers:

Rules — Outlook compatibility constraints you follow when generating HTML
Templates — Pre-built components and layouts you assemble from
Code blocks — Python scripts you execute to produce EML files

The core (HTML + EML) uses Python stdlib only. Optional features (charts, header banners, image optimization) require additional packages that are auto-installed when needed — see Step 0.

此技能包含三个层级：

规则——生成HTML时需遵循的Outlook兼容性约束
模板——可复用的预构建组件和布局
代码块——用于生成EML文件的Python脚本

核心功能（HTML + EML生成）仅依赖Python标准库。可选功能（图表、标题横幅、图片优化）需要额外的依赖包，这些包会在需要时自动安装——详见步骤0。

Step 0: Environment Check

步骤0：环境检查

Before starting, verify that Python 3 is available. Try these commands (use whichever works on the current platform):

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

Exists and Python ≥ 3.8 → continue silently (do not mention the check to the user).
Missing or version too low → do NOT proceed. Instead:
1. Run
```
uname -s
```
  and
```
uname -m
```
  (or
```
systeminfo
```
  on Windows) to detect the user's OS and architecture.
2. If you have web search capability, search for the latest recommended way to install Python 3 on the user's platform, and provide the specific commands.
3. If you cannot search, show this message in the user's language:
  
  中文: 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. Stop here and wait for the user to install before continuing.

开始前，请确认Python 3已安装。可尝试以下命令（根据当前平台选择适用的命令）：

python3 --version    # macOS / Linux
python --version     # Windows（请确保输出显示3.x，而非2.x）

已安装且Python ≥ 3.8 → 静默继续（无需告知用户已完成检查）。
未安装或版本过低 → 请勿继续。请执行以下操作：
1. 运行
```
uname -s
```
  和
```
uname -m
```
  （Windows系统运行
```
systeminfo
```
  ）以检测用户的操作系统和架构。
2. 如果具备网页搜索能力，搜索在用户平台上安装Python 3的最新推荐方式，并提供具体命令。
3. 如果无法搜索，请显示以下对应语言的提示信息：
  
  中文: 邮件模板设计工具需要 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. 在此处停止操作，等待用户完成安装后再继续。

Optional Dependencies (auto-installed when needed)

可选依赖包（需要时自动安装）

If Step 1 determines the email needs charts or image processing:

Execute

code-blocks/deps-checker.py

→

check_and_install(features)

features

['charts']

['images']

, or

['charts', 'images']

All available → continue silently
Just installed → continue silently (installation is quiet)
Install failed → inform user and offer alternatives:
- Charts unavailable → "I'll use HTML tables and stats-grid components instead"
- Images unavailable → "I'll use the HTML header component and skip compression"

Feature	Packages	What It Enables
`charts`	plotly, kaleido	Bar, line, heatmap, pie chart generation
`images`	pillow	Header banner compositing, image compression

如果步骤1判断邮件需要图表或图片处理功能：

执行

code-blocks/deps-checker.py

→

check_and_install(features)

features

参数取值为

['charts']

、

['images']

或

['charts', 'images']

所有依赖已安装 → 静默继续
刚完成安装 → 静默继续（安装过程无提示）
安装失败 → 告知用户并提供替代方案：
- 图表功能不可用 → "我将使用HTML表格和统计网格组件替代"
- 图片功能不可用 → "我将使用HTML标题组件，并跳过压缩步骤"

功能	依赖包	支持能力
`charts`	plotly, kaleido	生成柱状图、折线图、热力图、饼图
`images`	pillow	标题横幅合成、图片压缩

Adaptive Flow

自适应流程

Not every request needs the full wizard. Match your approach to the user's input:

If the user's request already contains enough info (layout, colors, width, content type are clear from context), skip ahead. For example, "帮我做一个蓝色的产品更新邮件模板，600px" already tells you: single-column, blue (#2563eb), 600px. Go straight to generating.

If the request is vague (e.g., "生成一个邮件模板"), use the wizard steps below to gather what you need — but ask efficiently, combining questions when natural.

并非所有请求都需要完整的引导流程。请根据用户的输入调整处理方式：

如果用户的请求已包含足够信息（布局、颜色、宽度、内容类型可从上下文明确得知），可跳过前置步骤。例如，"帮我做一个蓝色的产品更新邮件模板，600px" 已明确说明：单栏、蓝色（#2563eb）、600px。可直接开始生成。

如果请求模糊（例如，"生成一个邮件模板"），请使用以下引导步骤收集所需信息——但请高效提问，自然地合并问题。

Step 1: Understand the Request

步骤1：理解需求

Parse what you already know from the user's message, then fill gaps:

Layout: Which layout fits? Check
```
templates/layouts/
```
for options:
- Single Column (单栏) — product updates, announcements, weekly digests
- Two Column (双栏) — reports with sidebar data
- Magazine (杂志) — editorial with hero image and articles
- Announcement (公告) — minimal, centered, call-to-action
- Dashboard (数据面板) — KPI reports, analytics digests, weekly reviews
- Transactional (事务通知) — order confirmations, password resets, system alerts
- Onboarding (引导流程) — welcome emails, getting-started guides
- Custom — user describes, you design from components
Width: 600px (mobile-first) / 800px (balanced) / 1200px (desktop) / custom
Colors: Brand image provided? Analyze it for colors (read the image with vision). Otherwise, offer presets: Blue #2563eb, Green #059669, Orange #ea580c, Purple #7c3aed, Gray #374151. (Full palettes in
```
rules/brand-color-extraction.md
```
)
Saved templates: Run
```
code-blocks/template-manager.py
```
→
```
list_templates()
```
to check for reusable templates. If any exist, offer them first.

从用户消息中解析已知信息，然后补充缺失内容：

布局：选择合适的布局？可查看
```
templates/layouts/
```
中的选项：
- 单栏 — 产品更新、公告、每周摘要
- 双栏 — 带侧边栏数据的报告
- 杂志式 — 带焦点图和文章的编辑类邮件
- 公告式 — 极简、居中、带行动号召
- 数据面板 — KPI报告、分析摘要、每周复盘
- 事务通知 — 订单确认、密码重置、系统告警
- 引导流程 — 欢迎邮件、入门指南
- 自定义 — 用户描述需求，你从组件开始设计
宽度：600px（移动端优先）/ 800px（平衡型）/ 1200px（桌面端）/ 自定义
颜色：是否提供品牌图片？可通过视觉识别提取颜色。若未提供，可提供预设颜色：蓝色 #2563eb、绿色 #059669、橙色 #ea580c、紫色 #7c3aed、灰色 #374151。（完整调色板见
```
rules/brand-color-extraction.md
```
）
已保存模板：运行
```
code-blocks/template-manager.py
```
→
```
list_templates()
```
以检查是否有可复用的模板。如果存在，优先推荐给用户。

Material Assessment

素材评估

After understanding layout/width/colors, assess what visual materials are needed:

User provided data (Excel, CSV, table, numbers in conversation) → plan chart generation (Step 1.5a)
User provided background image → plan header banner compositing (Step 1.5b)
User provided local images → plan image optimization (Step 1.5c)
Email type is Dashboard/Weekly Report/Data Report but no data provided → ask: "Do you have data you'd like visualized as charts?"

If any material preparation is needed:

Run dependency check (Step 0 optional deps)
Proceed to Step 1.5

If no materials needed → skip directly to Step 2.

确定布局/宽度/颜色后，评估所需的视觉素材：

用户提供的数据（Excel、CSV、表格、对话中的数字）→ 计划生成图表（步骤1.5a）
用户提供的背景图片 → 计划标题横幅合成（步骤1.5b）
用户提供的本地图片 → 计划图片优化（步骤1.5c）
邮件类型为数据面板/周报/数据报告但未提供数据 → 询问："你是否有需要可视化为图表的数据？"

如果需要准备素材：

运行依赖检查（步骤0的可选依赖）
进入步骤1.5

如果无需素材 → 直接跳至步骤2。

Step 1.5: Material Preparation (when materials identified)

步骤1.5：素材准备（当识别到需要素材时）

Prepare visual assets before generating HTML. All outputs go to the project's

images/

directory.

在生成HTML前准备视觉资产。所有输出文件保存至项目的

images/

目录。

1.5a: Chart Generation (if data provided)

1.5a：图表生成（若提供数据）

Read
```
rules/chart-design-system.md
```
for visual constraints
Analyze data structure → recommend chart type:
- Categories × single value → horizontal bar
- Categories × multiple series → stacked bar
- Time × values → line chart
- 2D matrix → heatmap
- Parts of whole → pie/donut
- ≤ 5 data points → suggest HTML table or stats-grid instead
Confirm with user: "Based on your data, I recommend a [type] chart. OK?"

Execute

code-blocks/chart-generator.py

python

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

Preview chart image with user, iterate if needed
Final PNG ready at
```
images/{chart_name}.png
```

阅读
```
rules/chart-design-system.md
```
了解视觉约束
分析数据结构 → 推荐图表类型：
- 分类×单一数值 → 横向柱状图
- 分类×多系列 → 堆叠柱状图
- 时间×数值 → 折线图
- 二维矩阵 → 热力图
- 整体占比 → 饼图/环形图
- ≤5个数据点 → 建议使用HTML表格或统计网格替代
与用户确认："根据你的数据，我推荐使用[类型]图表。可以吗？"

执行

code-blocks/chart-generator.py

：

python

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

向用户预览图表图片，如有需要可迭代调整
最终PNG图片保存至
```
images/{chart_name}.png
```

1.5b: Header Banner (if background image provided)

1.5b：标题横幅（若提供背景图片）

Execute

code-blocks/header-generator.py

python

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

If no background image but user wants a visual banner → offer solid-color option
If user doesn't want a banner image → use the HTML header component instead (no Pillow needed)
Output:
```
images/header_banner.jpg
```

执行

code-blocks/header-generator.py

：

python

gen = HeaderGenerator()
path = gen.generate(title='...', subtitle='...', output_path='OUTPUT/images/header_banner.jpg',
                    bg_image='path/to/bg.png')  # 或使用bg_color='#2563eb'生成纯色背景

如果未提供背景图片但用户需要视觉横幅 → 提供纯色背景选项
如果用户不需要横幅图片 → 使用HTML标题组件替代（无需Pillow依赖）
输出文件：
```
images/header_banner.jpg
```

1.5c: Image Optimization (if local images provided)

1.5c：图片优化（若提供本地图片）

Ensure images are in the project's
```
images/
```
directory
Check filenames — non-ASCII names must be renamed to ASCII (see
```
rules/design-system.md
```
§ Image filename rules)

Execute

code-blocks/image-optimizer.py

python

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

Report savings to user if any files were optimized

确保图片已放入项目的
```
images/
```
目录
检查文件名——非ASCII文件名必须重命名为ASCII（详见
```
rules/design-system.md
```
§ 图片文件名规则）

执行

code-blocks/image-optimizer.py

：

python

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

如果有文件被优化，向用户报告压缩节省的空间

Step 2: Generate HTML

步骤2：生成HTML

Before generating HTML, read these files for guidance:

```
rules/outlook-compatibility.md
```
— the Outlook compatibility rules (essential)
```
rules/design-system.md
```
— universal design foundation (colors, typography, spacing) (this is what makes emails look professional and modern, not just compatible)
```
rules/design-system-data-report.md
```
— ONLY for data-heavy emails (KPI dashboards, weekly reports, status updates). Skip this for simple newsletters/announcements.
```
rules/chart-design-system.md
```
— ONLY when generating charts. Color system, typography, sizing, and data label conventions for email-embedded charts.
```
rules/email-best-practices.md
```
— design guidelines
```
rules/style-presets.md
```
— design style presets (Corporate, Editorial, Minimal). Choose a style matching the email's purpose to guide spacing, font sizes, and color usage.
```
rules/placeholder-i18n.md
```
— use placeholders matching the user's language
```
templates/components/*.html
```
— proven Outlook-safe component patterns (includes stats-grid, nav-bar, status-badge for advanced layouts)
```
examples/example-*.html
```
— complete working examples for reference

Design tip — keep headers compact: The header should feel like a navigation bar, not a hero banner. Logo + title on one line, total height around 60-70px. Avoid tall spacer rows and oversized logos in the header — save vertical space for content.

Why Outlook compatibility matters: Outlook 2007-2019 on Windows uses Microsoft Word's rendering engine instead of a browser engine. This means most modern CSS (flexbox, grid, border-radius, margin) is ignored or broken. The rules file contains battle-tested patterns from a production email system that handles this correctly. Every HTML pattern in

templates/components/

has been verified to render correctly across Outlook, Gmail, Apple Mail, and web clients.

Key principles when generating:

NEVER insert content the user did not request — no "generated by AI" watermarks, no tool credits, no disclaimers. The footer should only include what the user's design calls for (copyright, unsubscribe link, etc.).
Follow
rules/outlook-compatibility.md
strictly — it covers table layout, inline styles, VML dividers, spacer rows, MSO conditionals, and all other Outlook quirks. Read that file before generating any HTML.
Gmail size limit — keep HTML under 102KB or Gmail clips the email.

Preheader text — add a hidden

<div style="display:none;">Preview text</div>

right after

<body>

After generating:

Validate first: execute
```
code-blocks/html-validator.py
```
→
```
validate(html)
```
. Checks 32 rules including: forbidden CSS, missing VML, column width overflow, text overflow, Gmail 102KB size limit, missing alt text, non-HTTPS links, missing preheader, elements exceeding container width. Fix any errors before proceeding.
Organize output: execute
```
code-blocks/output-manager.py
```
→
```
create_project(name)
```
to create a timestamped directory in the user's working directory (e.g.,
```
./output/2026-03-15_product-report/
```
). Never write output files into the skill's own installation directory.
Save HTML to
```
{project_dir}/newsletter-preview.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
```
— 设计风格预设（企业风、编辑风、极简风）。根据邮件用途选择合适的风格，以指导间距、字体大小和颜色使用。
```
rules/placeholder-i18n.md
```
— 使用与用户语言匹配的占位符
```
templates/components/*.html
```
— 经验证的Outlook安全组件模式（包括统计网格、导航栏、状态徽章等高级布局组件）
```
examples/example-*.html
```
— 完整的可用示例供参考

设计技巧——保持标题紧凑：标题应类似导航栏，而非焦点横幅。Logo + 标题放在一行，总高度约60-70px。避免标题中使用高间距行和过大的Logo——为内容预留垂直空间。

为什么Outlook兼容性很重要：Windows平台的Outlook 2007-2019使用Microsoft Word的渲染引擎而非浏览器引擎。这意味着大多数现代CSS（flexbox、grid、border-radius、margin）会被忽略或导致布局错乱。规则文件包含来自生产级邮件系统的实战验证模式，可正确处理这些问题。

templates/components/

中的每个HTML模式都已验证可在Outlook、Gmail、Apple Mail和网页客户端中正确渲染。

生成时的核心原则：

绝不添加用户未请求的内容——无"由AI生成"水印、无工具 credits、无免责声明。页脚仅包含用户设计要求的内容（版权、退订链接等）。
严格遵循
rules/outlook-compatibility.md
——涵盖表格布局、内联样式、VML分隔符、间距行、MSO条件语句以及所有其他Outlook特殊处理规则。生成任何HTML前请务必阅读此文件。
Gmail大小限制——保持HTML文件大小在102KB以下，否则Gmail会截断邮件。

预标题文本——在

<body>

后立即添加隐藏的

<div style="display:none;">预览文本</div>

。

生成后：

先验证：执行
```
code-blocks/html-validator.py
```
→
```
validate(html)
```
。检查32项规则，包括：禁用的CSS、缺失的VML、列宽溢出、文本溢出、Gmail 102KB大小限制、缺失的替代文本、非HTTPS链接、缺失的预标题、元素超出容器宽度。修复所有错误后再继续。
整理输出：执行
```
code-blocks/output-manager.py
```
→
```
create_project(name)
```
在用户工作目录中创建带时间戳的目录（例如，
```
./output/2026-03-15_product-report/
```
）。切勿将输出文件写入技能自身的安装目录。
将HTML保存至
```
{project_dir}/newsletter-preview.html
```

Step 3: Preview & Adjust

步骤3：预览与调整

Auto-open in browser: execute
```
code-blocks/preview-helper.py
```
→
```
open_in_browser()
```
- All images render directly (charts, header banner, content images)
- No need to generate EML for preview
Show ASCII layout summary in conversation: →
```
ascii_layout_summary(html)
```
Ask if adjustments needed, iterate until satisfied

自动在浏览器中打开：执行
```
code-blocks/preview-helper.py
```
→
```
open_in_browser()
```
- 所有图片（图表、标题横幅、内容图片）可直接渲染
- 无需生成EML即可预览
在对话中显示ASCII布局摘要：→
```
ascii_layout_summary(html)
```
询问用户是否需要调整，迭代直至满意

Step 4: Fill Content (Optional)

步骤4：填充内容（可选）

Ask: "Want to fill in content now, or leave placeholders for editing in Outlook?"

If filling now:

Execute
```
code-blocks/content-filler.py
```
→
```
generate_fill_template(html)
```
to show all placeholders as a YAML-like template the user can fill at once
Collect content — either one at a time OR as a batch dict from the user
Execute
```
fill_batch(html, content_dict, image_dir)
```
for efficient batch filling (auto-maps images from a directory to CID placeholders)
Re-preview and check
```
unfilled_placeholders(html)
```
for any remaining

询问："现在需要填充内容，还是保留占位符以便在Outlook中编辑？"

如果选择现在填充：

执行
```
code-blocks/content-filler.py
```
→
```
generate_fill_template(html)
```
，将所有占位符显示为类YAML模板，供用户一次性填充
收集内容——可逐个收集，或从用户处获取批量字典
执行
```
fill_batch(html, content_dict, image_dir)
```
进行高效批量填充（自动将目录中的图片映射到CID占位符）
重新预览，并使用
```
unfilled_placeholders(html)
```
检查是否有剩余未填充的占位符

Quick Edits (anytime after Step 2)

快速编辑（步骤2之后的任何时间）

If the user asks for a targeted change (e.g., "change the header color to red", "make the title bigger"), use

code-blocks/html-patcher.py

instead of regenerating:

```
replace_color(html, old, new)
```
— swap a color everywhere
```
change_width(html, old_w, new_w)
```
— resize the container
```
replace_text(html, old, new)
```
— change visible text
```
add_section(html, section_html)
```
— insert before footer

patch_file(path, colors={...}, texts={...})

— apply multiple patches at once

Re-validate after patching:

html-validator.py

→

validate(patched_html)

如果用户要求针对性修改（例如，"将标题颜色改为红色"、"放大标题"），请使用

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)

。

Step 5: Generate EML

步骤5：生成EML

This is where the HTML becomes a real email file. Execute

code-blocks/html-to-eml.py

python

undefined

这一步会将HTML转换为真实的邮件文件。执行

code-blocks/html-to-eml.py

：

python

undefined

How to execute: write a modified copy of the script with filled-in CONFIG values,

执行方式：编写修改后的脚本副本，填入CONFIG值，

then run it with: python3 /path/to/modified_script.py

然后运行：python3 /path/to/modified_script.py

The CONFIG section to modify:

需要修改的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


The script uses Python's built-in `email` module — no pip install needed. It creates
a proper MIME structure (multipart/alternative → text/plain + multipart/related →
text/html + CID images) with `X-Unsent: 1` so Outlook opens it in draft/compose mode.

HTML_FILE = "output/newsletter-preview.html" # 你生成的HTML文件 OUTPUT_EML = "output/newsletter.eml" # 输出路径 SUBJECT = "..." # 询问用户获取 SENDER = "" # 可选 TO_ADDRS = [] # 可选 IMAGE_DIR = "output/images" # 如果存在图片


该脚本使用Python内置的`email`模块——无需pip安装。它会创建正确的MIME结构（multipart/alternative → text/plain + multipart/related → text/html + CID图片），并添加`X-Unsent: 1`标记，使Outlook以草稿/撰写模式打开该文件。

Step 6: Wrap Up

步骤6：收尾

Offer to save the template: execute

code-blocks/template-manager.py

→

save_template()

Show the output file locations

Display the appropriate usage guide:

Chinese user →

templates/guides/outlook-usage-guide-zh.md

English user →

templates/guides/outlook-usage-guide-en.md

提供保存模板的选项：执行

code-blocks/template-manager.py

→

save_template()

显示输出文件的位置

显示对应的使用指南：

中文用户 →

templates/guides/outlook-usage-guide-zh.md

英文用户 →

templates/guides/outlook-usage-guide-en.md

File Map

文件结构

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

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, BEFORE EML (auto-check 32 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             ← Complete HTML→EML script (execute this)
  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)

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

rules/
  outlook-compatibility.md   ← 生成HTML前必读（Outlook渲染规则）
  design-system.md           ← 通用规则：颜色、排版、间距（必读）
  design-system-data-report.md ← 扩展规则：KPI卡片、状态徽章、趋势（仅适用于数据类邮件）
  email-best-practices.md    ← 设计指南（宽度、颜色、排版）
  style-presets.md           ← 3种设计风格：企业风、编辑风、极简风
  placeholder-i18n.md        ← 本地化占位符文本（中/英/日）
  chart-design-system.md     ← 图表颜色、排版、尺寸（生成图表前必读）
  brand-color-extraction.md  ← 颜色提取 + 预设调色板

templates/
  components/*.html          ← 19种经验证的Outlook安全HTML构建块
                               （标题、区块、卡片、表格、图片占位符、
                                 分隔线、页脚、统计网格、导航栏、状态徽章、
                                 进度条、按钮、提示框、客户证言、
                                 功能列表、定价表、团队成员、
                                 告警、时间线）
  layouts/*.md               ← 7种预设布局说明
                               （单栏、双栏、杂志式、公告式、
                                 数据面板、事务通知、引导流程）
  guides/*.md                ← 终端用户Outlook使用指南（中/英）

code-blocks/
  html-validator.py          ← 生成后、EML转换前运行（自动检查32项规则）
  html-patcher.py            ← 针对性编辑（颜色、宽度、文本），无需重新生成
  output-manager.py          ← 带时间戳的项目目录，用于整理输出
  eml-builder.py             ← EML构建器类（流畅API）
  cid-embedder.py            ← 图片扫描 + 占位符PNG创建
  html-to-eml.py             ← 完整的HTML转EML脚本（执行此脚本）
  content-filler.py          ← {{占位符}}替换 + 批量填充
  template-manager.py        ← 保存/加载/列出自定义模板
  preview-helper.py          ← 浏览器自动打开 + ASCII布局展示
  deps-checker.py            ← 自动安装可选依赖（图表、图片）
  chart-generator.py         ← Plotly图表生成（柱状图、折线图、热力图、饼图）
  header-generator.py        ← 标题横幅图片合成（背景上添加文字）
  image-optimizer.py         ← 图片压缩（PNG转JPEG、调整尺寸、优化）

examples/
  example-single-column.html ← 完整的600px单栏参考示例
  example-two-column.html    ← 完整的800px双栏参考示例
```",