直播/活动邀请函 H5
把一次邀约做成手机上能点着玩的五屏 H5。核心记忆点:拒绝按钮会躲,只有答应才能往下走。
首轮引导
用户首次触发本 skill 且未提供完整信息时,先原样输出下面这段引导语,然后停下等用户回复。不要追问、不要自行编造内容、不要先生成。
好,我来做这个邀请函 H5。请提供这几项:
1. **嘉宾姓名** —— 邀请谁
2. **活动主题** —— 比如「豆包工作直播」「前端技术沙龙」
3. **活动日期** —— 比如 2026-10-16,最好带时间
4. **活动内容** —— 想让对方聊的 1~6 个方向,我做成选项卡
5. **邀请语** —— 一句话说明这是场什么活动(可不填,我来写)
直接按顺序发我就行。
用户回复后,若某项仍缺失:能合理默认的就默认(见下方默认值),不能默认的(姓名、主题、日期)再单独追问那一项。
用户一次性说清了全部信息(例如「邀请王小明参加 10 月 16 日的前端技术沙龙,聊首屏加载和渲染性能」),跳过引导语直接生成。
生成流程
1. 写配置文件
把信息整理成 JSON。完整字段说明见 references/config-schema.md,常用字段:
{
"guest": "王小明",
"event_name": "前端技术沙龙",
"event_date": "2026-10-16",
"time": "20:00",
"brand": "极客学院",
"session": "性能优化专场",
"slogan": "让页面快到飞起",
"role": "讲师",
"invite_line": "一场只聊实战的性能优化分享。主讲位留给你。",
"signature": "帮你张罗场地的我",
"topics": [
{"name": "首屏加载", "desc": "从 3 秒压到 1 秒"},
{"name": "渲染性能", "desc": "掉帧问题怎么查"},
{"name": "两个都要", "desc": "一次讲透"}
]
}
必填:guest、event_name、event_date、topics(1~6 项)。其余留空自动填默认值。可直接复制 examples/config.example.json 改。
role 决定全站称谓(嘉宾 / 讲师 / 主播 / 老师…),会同步影响标题、状态标签、邀请函抬头、票根身份。默认「嘉宾」。
日期只支持单个——页面上是确定好的一天,对方只能确认不能改期。星期由脚本按真实日历算,不要手写。
2. 执行生成
python3 scripts/build_invite.py config.json -o 输出目录/index.html
Windows 上如果 python3 不存在,用 python。脚本只依赖标准库,无需安装任何包。
脚本会打印嘉宾、活动、日期、选项、文件大小和外链数量。外部引用必须是 0,非 0 会告警并以退出码 1 结束——含外链的产物在发布时可能因外链不可达而失败。
脚本对每处替换都做存在性校验:模板里有未知锚点、或某个锚点在模板里找不到,都会直接报错退出,不会静默产出错误产物。生成后还会自查产物里是否残留 {{...}} 锚点或循环块标记。
3. 交付
用 present_files 交付生成的 HTML。不要代替用户发布——发布由用户在产物预览界面自行点击发布按钮完成。
内容撰写建议
用户只给了姓名/主题/日期这类骨架时,其余文案由你补写,注意:
invite_line(邀请语):说清这场活动值得来的理由,一句话,20~35 字。避免"诚挚邀请您参加"这类套话。topics的desc:每项 6~12 字,写"讲了能得到什么"而不是重复标题。选项在 3 个左右时观感最好;给到 4 个以上时最后一项适合放"我全都要"这类兜底。signature(落款):以邀请人视角写,口语化。默认「负责给你搭台的我」。slogan:邀请函上的大字,是活动的一句话主张,不是活动名重复。
面向正式对象(外部嘉宾、领导、客户)时,提醒用户:这个 H5 带"拒绝按钮会逃跑"的恶作剧互动,风格偏轻松,正式场合可能不合适。
修改已生成的产物
改文案、换嘉宾、调日期——改配置重新生成,不要手工编辑产出的 HTML。产物是一次性生成物,配置才是可维护的源。
要调整视觉、布局、交互逻辑(这些不由配置控制)时,直接编辑 assets/template.html,改完后跑一次生成脚本验证锚点是否仍然命中。
模板说明
assets/template.html 是定稿产物,约 24KB 单文件,零外部依赖(花朵装饰为内联 SVG,字体走系统字体栈,无 CDN、无外链图片、无 emoji)。
关键实现细节和踩过的坑记录在 references/template-notes.md,修改模板前先读,尤其是逃逸按钮那部分——它的定位切换、边界检测、最小位移约束都有非显而易见的处理。
安全边界
本 skill 只读本地 JSON 配置和本地模板,只写一个本地 HTML 文件。不发起网络请求、不读取指定路径外的文件、不删除或覆写已有文件、不执行远程脚本。保持这条边界,SkillHub 上线审核会检查这几项。