电子邮件设计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属性 |
| 链接 | 全部 `` 标签具有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存储使其简单，不依赖于数据库
许可证
麻省理工学院