本篇没有太多废话，直接先看效果图，能够一套提示词实现，同时生成公众号，小红书，b站，抖音等平台的封面图。
效果如下：
案例一：ima知识库上线的文字内容
案例二：谷歌gemini2.5pro的文字内容
并且是可以直接点击最下方的一键下载直接全部下载使用的。
原提示词如下，有点长，复制直接使用：
怎么使用？
需要修改里面的几个地方：
1.核心内容主题（填入你自己想在封面上放的标题）
2.核心内容提取部分。（按照你自己的内容进行替换即可）
3.核心视觉风格（你要是喜欢我前面案例的风格，可以输入极简+赛博+未来主义风格，如果不喜欢可以试试别的）
你是一位专业的 多平台视觉封面设计师，专注于根据给定的核心内容和视觉风格，创造既美观、信息层级清晰，又能灵活适应不同平台宽高比的封面图。最终目标: 生成四种平台比例的封面图 (index.html, style.css, script.js)。要求封面视觉统一、美观，信息清晰，并且下载得到的 PNG 图片与浏览器预览效果高度一致。设计理念:内容为王，适应优先: 确保核心信息清晰可见。空间感知与优雅降级: 智能处理不同比例下的内容显隐和排版。视觉平衡与呼吸感: 注重留白和间距。✨ 渲染一致性优先 ✨: 在设计和 CSS 实现中，需特别考虑 html2canvas 的渲染兼容性，优先选用能被准确捕获的样式。核心输入 (请替换)核心内容主题 (主标题): [腾讯ima知识库重磅升级]核心内容提取/要点 (按重要性排序): [要点1/副标题核心]开启共享知识库 [要点2/关键特性]打造个人知识IP [要点3/补充说明] [可选细节]核心视觉风格: [极简+赛博+未来主义风格](可选) Logo占位符文字: [子轩学长]平台与比例 (必须全部包含)公众号文章首图: 2.35:1小红书帖子: 3:4通用横版 (B站/YouTube): 16:9抖音/短视频: 9:16设计约束与 CSS/JS 实现要求4.1. 安全区域与盒模型 (强制)内容限制在充足 padding 定义的安全区内。横版左右 padding 极大 (20%+)。全局 box-sizing: border-box;。4.2. 文本排版与防溢出 (绝对底线！)禁止竖排，文本必须水平。.cover-item 设 overflow: hidden;。文本元素设 overflow-wrap: break-word; word-break: break-word;。字体大小控制: 使用响应式技术但设定保守的最大值。横版标题使用严格限制的小 rem 最大值。4.3. ✨ CSS 兼容性与 html2canvas 优化 ✨Web 字体: 必须确保 Google Fonts 被正确引入。在 JS 的 html2canvas 配置中，必须使用 useCORS: true 和 allowTaint: true。复杂效果审慎使用: AI 在生成 CSS 时，如果某些视觉效果（如复杂的 filter: blur()、mix-blend-mode、非常规渐变）已知可能导致 html2canvas 渲染问题，应考虑使用稍微简化但视觉效果接近的替代方案，以优先保证截图准确性。背景处理: 确保背景色或渐变能被 html2canvas 正确捕获 (在 JS 中设置 backgroundColor 选项作为后备)。4.4. 内容限制与行数截断竖版对次要文本（.subtitle 等）必须实现 CSS 行数截断 (-webkit-line-clamp)。4.5. 版式分离与内容显隐根据 [data-ratio] 分离样式。横版: 仅显示 .title (居中，固定小字号)。隐藏其他文本。竖版: 优先展示多层级信息，空间不足时先截断再隐藏次要信息。布局根据 3:4 (左对齐) 和 9:16 (居中) 调整。4.6. 视觉细节层级清晰，间距充足，风格协调，视觉元素应在保证布局前提下尽量丰富。功能要求 - 一键下载 (优化 html2canvas 调用)HTML 中包含下载按钮。JavaScript (script.js): 依赖 html2canvas (CDN)。 功能为逐个、单独下载 PNG。 必须包含 健壮的错误处理和详细的 console.log 调试信息。 ✨ 优化 html2canvas 配置 (关键！) ✨: 在调用 html2canvas(item, options) 时，options 对象必须包含： useCORS: true allowTaint: true (重要，即使可能影响 toBlob/toDataURL，优先尝试渲染) scale: 2 (保证清晰度) backgroundColor: window.getComputedStyle(item).backgroundColor || '#0a0f21' (捕获背景色) scrollX: 0, scrollY: 0 (确保从左上角开始捕获) windowWidth: item.scrollWidth, windowHeight: item.scrollHeight (使用元素尺寸) ✨ onclone 回调处理 (关键！) ✨: 在 options 中必须包含 onclone 回调函数。在此回调函数中，尝试重新应用关键样式，特别是字体相关的样式，以应对字体或样式在克隆过程中丢失的问题。例如： onclone: (clonedDoc) => { // 尝试强制重新应用字体 (示例)const body = clonedDoc.querySelector('body'); // 或更具体的选择器if (body) { body.style.fontFamily = "'Poppins', sans-serif"; // 强制基础字体 } // 可以添加其他可能丢失的关键样式console.log('html2canvas onclone: Attempted to reapply styles.'); } 下载触发: 使用健壮的 triggerDownload 函数（包含 requestAnimationFrame 和 setTimeout 清理）。技术规范HTML5, CSS3 (CSS 变量), JavaScript (ES6+)。CSS 需包含行数截断属性。输出要求提供三个独立、完整的代码块：index.html, style.css, script.js。确保 JS 部分严格按照第 5 点优化 html2canvas 调用。比如这张图片上面的都可以随意选：
提示词输入到gemini2.5pro，claude，deep seek，或者trae里面都行，我的是gemini直出的效果，我自己蛮喜欢的，也是效果最好的。
然后生成的三部分代码（html，css，javascript），分别复制到在线网站编辑器当中：
然后效果就出来啦～
下面这三种其他的风格你最喜欢哪种呢？投票在评论区吧～
1.科技主义风
2.未来主义风
3.极简赛博未来
下篇预告金句卡片一键制作，效果图如下：
淘汰我们的不是AI，而是会使用AI的人 和我一起成为AI时代的超级个体~ 