【AI提示词】微信公众号封面提示词

把下面这段内容保存为 cover-prompt.md，

告诉 AI："帮我根据这篇文章和 cover-prompt.md 里的提示词，生成一个封面图。"

封面图生成提示词

用于生成公众号文章封面图的 HTML + CSS 代码

核心设计原则

重要：封面的目标是让读者一眼看出文章在讲什么。

设计流程

1. 识别核心主题 — 文章最核心的功能/动作/概念是什么？
2. 提取视觉元素 — 这个主题用什么图标/符号/动作来表示？
3. 选择主色调 — 产品或主题相关的颜色
4. 添加功能提示 — 如果是工具类文章，展示如何使用

反模式（不要做）

- 用通用的 Code/AI/Ship 图标堆砌
- 所有 tech 文章都用蓝色
- 标题和视觉元素不匹配
- 抽象到看不出来在讲什么

通用技术要求

规格与约束

1. 尺寸: 900px × 383px (2.35:1)
2. 风格: 深色模式，极简美学
3. 技术栈: HTML + CSS 单文件
4. 功能: 必须包含下载按钮（使用 html2canvas）
5. 布局: 左侧标题区 + 右侧视觉区

必需元素

<button class="btn-download">⬇ 下载封面图</button>
<div class="cover-wrapper">
<div class="cover" id="cover">
<!-- 封面内容 -->
</div>
</div>
<script>
async function downloadImage() {
const cover = document.getElementById('cover');
const canvas = await html2canvas(cover, {
scale: 2,
backgroundColor: null,
useCORS: true,
logging: false
});
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'cover.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
}
</script>

主题设计指南

技能：语音输入 / AI 交互

视觉元素：
- 主图标：🎤 麦克风
- 动画：声波扩散效果、声波条
- 标签："按住空格说话" / "space 按住说话"
- 配色：产品主题色（微信绿 #07c160 / iOS 蓝 #007AFF）

参考设计：
- 标签：按住空格说话
- 标题：产品的语音输入
- 右侧：带声波扩散动画的麦克风
- 背景：淡入的声波条装饰

技能：代码工具 / 开发效率

视觉元素：
- 主图标：⚡ 闪电 / 🚀 火箭 / ⚙️ 齿轮
- 动画：卡片浮动、光晕流动
- 标签："一键..." / "自动..." / "实时..."
- 配色：效率蓝 #3b82f6 / 紫色 #8b5cf6

参考设计：
- 标签：一键完成 / 自动化
- 标题：工具名的核心功能
- 右侧：3 个浮动卡片展示流程
- 背景：网格线或渐变光晕

技能：对比进化 / 新旧交替

视觉元素：
- 主图标：⚙️ 旧工具 → ⚡ 新工具
- 动画：箭头流动、进度条
- 标签："从...到..." / "升级后"
- 配色：左侧灰色 + 右侧亮色

参考设计：
- 标签：从 X 到 Y
- 标题：旧方式 vs 新方式
- 右侧：对比卡片或进化箭头

技能：产品评测 / 体验分享

视觉元素：
- 主图标：产品相关图标
- 动画：星级评分、心形跳动
- 标签："用了就回不去" / "越来越..."
- 配色：产品主题色

参考设计：
- 标签：产品类型（如：输入法）
- 标题：产品名 + 评价
- 右侧：产品 Logo 或代表性图标

技能：思考感悟 / 生活方式

视觉元素：
- 主图标：🌅 太阳 / ☕ 咖啡 / 📚 书本
- 动画：柔和的呼吸效果
- 标签："慢下来" / "松弛感"
- 配色：暖色调 (#f59e0b / #f97316)

参考设计：
- 标签：情绪关键词
- 标题：核心感悟
- 右侧：拟物化图标，留白充足

颜色参考

主题 | 主色 | RGB
------|------|-----
微信相关 | #07c160 | rgb(7, 193, 96)
iOS / Apple | #007AFF | rgb(0, 122, 255)
AI / 科技 | #8b5cf6 | rgb(139, 92, 246)
效率 / 速度 | #3b82f6 | rgb(59, 130, 246)
警告 / 重要 | #f59e0b | rgb(245, 158, 11)
暖色 / 生活 | #f97316 | rgb(249, 115, 22)

动画效果库

/* 声波扩散 */
@keyframes ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}

/* 浮动效果 */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* 脉冲效果 */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

/* 声波条 */
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.5); }
}

使用方式

生成封面时，先分析文章核心主题，然后：

1. 识别主题类型 — 从上面选择最匹配的主题
2. 提取关键元素 — 确定主图标、标签文字
3. 选择配色方案 — 根据产品或主题选择
4. 编写 HTML/CSS — 围绕核心主题设计，不要套模板

记住：读者应该能从封面看出文章在讲什么。