不会设计小红书封面？这条 Prompt 直接让 AI 写出可保存的 HTML 封面
我试过直接让 AI 写“小红书封面代码”，结果经常有点尴尬：页面是能打开的，但看起来像一个普通网页截图，标题不够大，重点不够狠，保存按钮还容易一起截进图片里。
后来我发现，问题不在 HTML，而在提示词没有提前规定“封面应该怎么像封面”。
这套提示词就是为这个场景整理的。它会先把你的文案压缩成 30-40 字以内的封面重点，再要求 AI 用 HTML、CSS 和 JavaScript 做一张 3:4 的小红书封面页面，并且把保存图片这一步也一起写进去。
适合想做“小红书封面 / 知识卡片 / 营销主图”的朋友。不会 PS 也没关系，先用它做出一个能发的版本，再慢慢调字体、颜色和关键词。
一、这条提示词适合谁
适合这些人：
[*]小红书图文作者
[*]知识类博主
[*]课程和训练营运营
[*]做产品介绍的商家
[*]想做封面但不会排版的新手
[*]想用 AI 生成 HTML 海报的人
它比较适合“文字是主体”的封面，比如教程、清单、方法论、资源分享、工具推荐、营销说明这类内容。
二、它能解决什么问题
普通封面经常有几个问题：
[*]标题太长，重点不突出。
[*]所有字都差不多大，看不出层级。
[*]背景太花，读者第一眼不知道看哪里。
[*]颜色太乱，不像一个完整设计。
[*]做完还要截图，保存出来容易带边框或按钮。
这条提示词把这些要求提前写进去了。它会要求 AI 严格做 3:4 画布，用 3-4 种字号做层级，让主标题比副标题大很多，并且把 2-3 个关键词做成视觉重点。
三、提示词特点
这套提示词重点强调“封面要能用”，不是只追求好看。它会要求：
[*]文字占画面至少 70%。
[*]主标题提炼关键词。
[*]使用柔和色彩和极简留白。
[*]使用现代 CSS 布局和渐变。
[*]添加不影响画面的保存按钮。
[*]用 html2canvas 保存封面设计区域。
[*]保存图片时不包含按钮、边框和多余界面元素。
做出来的封面更适合小红书这种需要快速抓住注意力的平台。
四、预期效果
你可以期待得到一份这样的结果：
[*]一个完整 HTML 文件。
[*]一个 3:4 的封面画布。
[*]柔和卡片式视觉。
[*]大号关键词标题。
[*]有层次的副标题和说明文字。
[*]简洁装饰元素。
[*]一个“保存为图片”按钮。
如果模型输出的文字太多，可以继续追问：请把封面文字再压缩 20%，让主标题更大，留白更多。
如果视觉太普通，可以继续追问：请保留原文案，重新强化封面视觉冲击力，让关键词更醒目，但不要使用刺眼颜色。
五、使用方法
[*]先准备一段你要做封面的文案初稿。
[*]把文案粘贴到提示词里的 {用户文案}。
[*]如果有固定主题，可以替换 {封面主题}，比如“AI 工具推荐”“副业避坑”“读书方法”。
[*]把完整提示词发给 ChatGPT、Claude、Kimi、通义、豆包等能写代码的 AI。
[*]拿到 HTML 代码后，保存为 .html 文件并用浏览器打开。
[*]点击页面里的保存按钮，导出封面图片。
如果你不想自己保存 HTML 文件，也可以把代码放进 CodePen、JSFiddle、在线 HTML 预览工具里运行。
六、适用场景
这套提示词可以用在：
[*]小红书封面
[*]知识卡片封面
[*]工具推荐主图
[*]课程宣传图
[*]公众号文章头图
[*]社群分享图
[*]资源合集封面
[*]方法论总结卡片
七、注意事项和替换变量
使用时重点替换这几个地方：{用户文案}{封面主题}{目标人群}{想要突出的关键词}{色彩偏好}{是否需要品牌名称}
小建议：
[*]文案越具体，生成效果越好。
[*]如果要发小红书，标题最好不要超过 12-16 个字。
[*]关键词可以 2-3 个，不要一口气高亮 6 个。
[*]如果你有品牌色，可以写进提示词。
[*]保存前一定检查中文有没有错字。
[*]HTML 生成图适合做封面，不适合塞大量正文。
以下是提示词内容：
你是一位优秀的网页和营销视觉设计师，具有丰富的UI/UX设计经验，曾为众多知名品牌打造过引人注目的营销视觉，擅长将现代设计趋势与实用营销策略完美融合。现在需要为我创建一张专业级小红书封面。请使用HTML、CSS和JavaScript代码实现以下要求：
## 基本要求
**尺寸与基础结构**
- 比例严格为3:4（宽:高）
- 设计一个边框为0的div作为画布，确保生成图片无边界
- 最外面的卡片需要为直角
- 将我提供的文案提炼为30-40字以内的中文精华内容
- 文字必须成为视觉主体，占据页面至少70%的空间
- 运用3-4种不同字号创造层次感，关键词使用最大字号
- 主标题字号需要比副标题和介绍大三倍以上
- 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）
**技术实现**
- 使用现代CSS技术（如flex/grid布局、变量、渐变）
- 确保代码简洁高效，无冗余元素
- 添加一个不影响设计的保存按钮
- 使用html2canvas实现一键保存为图片功能
- 保存的图片应只包含封面设计，不含界面元素
- 使用Google Fonts或其他CDN加载适合的现代字体
- 可引用在线图标资源（如Font Awesome）
回复本帖，即可查看完整提示词内容。
**** Hidden Message *****
你可以把自己的封面文案发在评论区。
如果生成出来的封面不够醒目，也可以贴出你的标题，我可以帮你一起改成更适合小红书封面的表达。
页:
[1]