一套提示词，搞定各自媒体平台封面图，附完整提示词!

本篇没有太多废话，直接先看效果图，能够一套提示词实现，同时生成公众号，小红书，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时代的超级个体~