「邮件 HTML 模板」Skill 组合用法：和相关技能串成流水线
前端工程师经常要做「邮件 HTML 模板」这类事：生成兼容主流邮箱客户端的 HTML 邮件模板。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。
单个技能解决一个环节，把几个技能串起来，才能覆盖一整段工作。本文示范「邮件 HTML 模板」与三个相关技能的组合。
组合方案
| 顺序 | 技能 | 作用 | 交给下一步的东西 |
|---|---|---|---|
| 1 | 图标规范整理 | 统一项目中的图标来源、尺寸与命名 | 图标规范与清单 |
| 2 | 邮件 HTML 模板 | 生成兼容主流邮箱客户端的 HTML 邮件模板 | HTML 模板 |
| 3 | 响应式检查 | 检查页面在不同屏幕宽度下的布局问题 | 问题截图与修复建议 |
| 4 | 发布前测试清单 | 根据版本改动生成人工测试清单 | 测试清单 |
交接格式是关键
技能之间靠“上一步的输出就是下一步的输入”衔接。建议约定：
- 每个技能的输出都带固定标题，便于下一个技能定位内容
- 不确定项统一放在“需人工确认”小节，后续技能不得把它当作确定事实
- 「邮件 HTML 模板」接收的是邮件内容，如果上一步给的格式不同，先做一次转换
怎么编排
有三种常见方式：
- 人工串联：每一步结束后由人确认，再触发下一个技能，最稳妥
- 编排指令：写一个总技能，列出调用顺序与交接要求，由智能体依次执行
- 工作流平台：在 Dify、扣子、n8n 等平台中把每个技能做成节点，用条件分支处理异常
编排指令示例（示意）
# 组合流程：图标规范整理 → 邮件 HTML 模板 → 响应式检查 → 发布前测试清单
1. 调用 icon-system，保存输出为 step1
2. 以 step1 为输入调用 email-template-html，保存为 step2
3. 以 step2 为输入调用 responsive-audit
4. 调用 qa-checklist 做收尾
- 任一步出现“需人工确认”时暂停，等待用户回复后再继续
注意事项
- 链条越长，错误越容易被放大，关键节点要有人看
- 风险较低，但输出仍需快速过目再使用
- 每个技能单独测试通过后再组合
相关技能
准备一份好范例
在技能的参考资料里放一份你认可的HTML 模板范例，往往比多写十条规则更有效。好范例应当：
- 来自真实工作，但已去除个人信息和敏感数据
- 体现团队习惯的结构、措辞和详略程度
- 包含一处“需人工确认”的标注示范，让智能体学会如何表达不确定
- 篇幅适中，不要比平时的产出长太多
范例不必多，一到两份即可；太多范例反而会让智能体机械模仿某一份的细节。
每一步要产出什么
把每一步的中间产出写清楚，智能体就不容易跳步，人也方便定位问题：
- 使用表格布局：产出一段简短的中间结果，并注明依据来自邮件内容的哪一部分
- 内联样式：产出一段简短的中间结果，并注明依据来自邮件内容的哪一部分
- 控制宽度：产出一段简短的中间结果，并注明依据来自邮件内容的哪一部分
- 提供纯文本版本：产出一段简短的中间结果，并注明依据来自邮件内容的哪一部分
最后一步之后，再把这些中间结果汇总成HTML 模板。中间结果可以折叠或省略展示，但在技能指令中要求智能体“先完成再汇总”，能明显减少遗漏。
延伸阅读
- 邮件 HTML 模板 · Windsurf Rules 版
- 邮件 HTML 模板 · Dify 工作流 版
- 邮件 HTML 模板 · SKILL.md 写法
- 页面结构说明 · 组合用法
- 表单校验 · 组合用法
- 智能体Skills 分类：625 个技能 × 32 个角度
说明：文中的配置、代码与目录结构均为示意，用于说明思路；各平台的入口、字段名与能力会更新，落地前请以对应官方文档为准。示例中的数据与场景为虚构，不代表真实案例。