AI导哈

邮件模板生成工具

一个开源的MCP服务器，使AI助手能够设计和生成专业、响应式的电子邮件模板。

  • by harikrishna8121999
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 harikrishna8121999/email-design-mcp

使用说明

电子邮件设计mcp

一个开源的MCP服务器，使AI助手能够设计和生成专业、响应迅速的电子邮件模板。

适用于Claude Desktop、Cursor、VS Code Copilot和任何兼容MCP的客户端。

特性

  • 用自然语言生成电子邮件 -描述你想要什么，准备生产MJML+HTML
  • 品牌记忆 -一次性保存品牌颜色、字体和色调，在所有电子邮件中使用
  • 内置专家设计 -自动执行专业间距、排版、颜色使用和CTA图案
  • 迭代优化 -用简单的英语说“把标题放大”或“删除推荐部分”
  • 布局多样 -4种电子邮件类型的12种布局变体可防止重复设计
  • 实时预览 -本地预览服务器，可在以下位置进行热重新加载 http://localhost:3947
  • 验证 -检查大小限制、暗模式、可访问性、链接等
  • 出口 -为任何生成的电子邮件获取HTML、MJML或两者兼具
  • 引导式工作流程 -MCP提示引导您创建欢迎、时事通讯、促销和交易电子邮件
  • 不需要API密钥 -使用主机AI模型（Claude、GPT等）进行生成

快速开始

安装

npm install -g email-design-mcp

连接到克劳德桌面

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上， %APPDATA%\Claude\claude_desktop_config.json 在Windows上）：

{
  "mcpServers": {
    "email-design": {
      "command": "email-design-mcp"
    }
  }
}

连接到游标/VS代码

添加 .cursor/mcp.json 或VS代码MCP设置：

{
  "mcpServers": {
    "email-design": {
      "command": "npx",
      "args": ["email-design-mcp"]
    }
  }
}

用法

1.建立你的品牌（可选但推荐）

选项A——从网站自动提取：

“从https://acme.com"

服务器获取网站并自动提取颜色、字体、徽标和名称。

选项B——手动设置：

“建立一个名为Acme的品牌，主色调#FF6B35，次色调#1A1A2E，休闲色调，针对年轻专业人士”

您还可以将两者结合起来——提供一个用于自动提取的URL，并手动覆盖特定值。

2.生成电子邮件

“为新订阅者创建欢迎电子邮件”

服务器将设计规则、品牌背景和布局说明组成一个专家提示堆栈。AI生成MJML，并将其编译为响应式HTML。

3.精炼

“把标题放大，把按钮改成‘开始免费试用’”

优化针对特定部分，而不重新生成整个电子邮件。版本历史记录允许您撤消更改。

4.出口

“将电子邮件导出为HTML”

准备好最终的HTML或MJML，以便粘贴到您的ESP中。

工具

工具 说明
setup_brand 保存品牌简介（颜色、字体、色调）
generate_email 从自然语言提示生成电子邮件
refine_email 迭代生成的带有反馈的电子邮件
compile_mjml 将原始MJML编译为HTML
validate_email 查看电子邮件以了解最佳实践
export_email 导出为HTML、MJML或两者
screenshot_to_email 将设计描述转换为品牌电子邮件

指导工作流程（MCP提示）

这些提示将引导您使用智能默认值创建特定的电子邮件类型：

提示 描述
welcome-email 新订户的欢迎电子邮件
newsletter 包含特色内容的时事通讯
promotional 紧急销售/启动电子邮件
transactional 收货、确认或发货通知

模板

4个捆绑的MJML模板，带有占位符变量：

  • 欢迎 -英雄形象+介绍文字+CTA
  • 通讯 -特色文章+内容网格+页脚
  • 促销的 -英雄优惠+产品展示+紧迫感
  • 事务性的 -订单确认，详细列出

验证检查

检查 它验证了什么
电子邮件大小 低于Gmail的102KB剪切阈值
黑暗模式 color-scheme: light dark 声明
Alt文本 所有图像都具有有意义的Alt属性
链接 全部 <a> 标签具有href属性
取消订阅 页脚包含取消订阅链接
文本比率 相对于图像的足够文本
视口 移动视口元标记
页眉 收件箱隐藏预览文本
标题 存在HTML标题标签
内联样式 内联样式用于电子邮件客户端兼容性

存储

数据存储在 ~/.email-design-mcp/:

~/.email-design-mcp/
  brands/           # Brand profiles (JSON)
  history/          # Generated email history (JSON)
  config.json       # Optional config (history retention, preview port)

30天后自动清理历史记录（可在中配置 config.json).

发展

git clone https://github.com/harikrishna8121999/email-design-mcp.git
cd email-design-mcp
npm install
npm run dev        # Watch mode
npm test           # Run tests
npm run typecheck  # Type check
npm run build      # Compile TypeScript

建筑

看 建筑.md 查看完整的设计文档。

堆栈：TypeScript、Node.js、MJML、Zod、MCP SDK

关键设计决策:

  • 没有外部AI API调用-主机模型生成
  • 提示工程层（专家系统提示+设计规则+布局变体）是核心差异化因素
  • MJML用于电子邮件渲染，确保Outlook、Gmail和移动设备的兼容性
  • 本地JSON存储使其简单，不依赖于数据库

许可证

麻省理工学院

相关 MCP