课程长海报生成

课程长海报的排版困境

课程销售页、详情页通常会产出一大段结构化文案——主标题、卖点、大纲、师资、适合人群、学员收益、FAQ、报名信息。问题在于：这些文案最终要投放到朋友圈、公众号、信息流等渠道时，需要的是可截图的长图，而不是 HTML 页面。手写 HTML 排版成本高，交给设计师每次都要从零沟通配色和板块，而文案还在频繁迭代。这个技能解决的正是"从文案到可截图 HTML 长图"这一步。

核心能力：原文零修改 + 板块自动识别

技能的核心铁律是文字零修改：来自用户的文案必须一字不改，包括标点、空格和换行逻辑，禁止概括、改写或省略。这一点对课程类素材尤其关键——销售文案的每一个字都可能影响转化，改写会带来风险。

输入可以是多种形式的组合：

• 课程文案（必需，纯文本、Word 片段或截图文字均可）
• 风格参考图（可选，用于提取配色和版式感觉）
• 品牌素材（可选，老师照片、Logo、产品截图）
• 偏好说明（可选，如"高端感"、"深色背景"、"手机版"）

技能会识别文案中的板块类型，并匹配对应的视觉组件：

• 主标题 → Hero 区大字号处理
• 卖点列表 → 图标横排或卡片
• 课程大纲 → 时间轴或编号卡片
• 师资介绍 → 头像圆形裁剪 + 信息卡
• 适合人群 → 标签 Chips
• 学员收益 → 勾选列表或成就卡
• 详情表 → 参数网格
• FAQ → 折叠感问答卡
• 学员评价 → 引用卡片

技术实现要点

生成的 HTML 有几个硬性约束：

• poster 容器固定 width: 750px（手机竖版默认），高度自适应
• 用户上传的图片统一转为 data:image/...;base64 内嵌，保证 HTML 自包含
• 图标全部用内联 SVG，不依赖外部图标库
• 中文字体走 Google Fonts CDN，可选 Noto Sans SC、ZCOOL QingKe HuangYou
• 单个 HTML 文件，浏览器打开即可截图

配色按行业自动匹配，例如商业/职场用深蓝 + 金色，技术/AI 用深灰 + 青色，国学/文化用深棕 + 朱红。如果有风格参考图，技能会先做视觉解析，把提炼出的配色和版式转成 CSS 变量贯穿全局。

输出方式与边界

生成后需要用户自己在浏览器里截图（Chrome 可用 DevTools 命令，或用 GoFullPage 等插件一键长截图）。尺寸方面，默认手机竖版 750px；文案超过 3000 字的长文案会分章节并用锚点导航；需要 PC 宽版时把宽度改成 1200px 并调整为双列布局。

需要注意的边界：如果用户没提供任何风格参考，配色走行业默认方案，审美上限取决于文案本身的结构质量；"零修改"铁律意味着文案本身的错别字或语病不会被修复，输入文案的质量直接决定输出质量。