🔥 小红书爆款封面制作教程
🎨 封面效果展示
使用 Nano Banana 生成的精彩案例集
各类风格小红书封面案例展示 - 从科技到生活，从简约到写实
💡 核心原理：通过模仿小红书官方设计规范，结合 AI 智能生图，实现专业级封面效果。
⚡ 极简工作流程
一句话搞定封面制作
输入标题
→
AI分析
→
自动生图
→
生成HTML
📝 提示词模板（核心）
提示词 v4
简约风格·纯色背景
插画卡通风
提示词 v5
写实风格·场景背景
摄影大片风
提示词 v4
# 小红书封面设计工作流 v4
> 版本：v4.0
> 更新：简约插画风格，纯色背景设计
## 📐 基本规格
- **尺寸**: 1080px × 1440px（上部图片530px + 下部文字910px）
- **输出**: HTML文件，可截图使用
## 🔄 三步工作流
### 步骤1：智能分析与生图
**输入**：
```
标题：[您的标题文字]
```
**AI处理**：
1. 自动识别2-3个关键词进行高亮标记（用方括号）
2. 生成英文生图提示词
**生图公式**：
```
"[角色形象] doing [相关动作], [纯色背景], [插画风格], 1080x530px"
```
**示例**：
- 输入：Nano Banana MCP 科研成果！教你生成小红书封面
- 标记：[Nano Banana MCP] 科研成果！教你生成[小红书封面]
- 提示词：A cute banana professor showing holographic social media covers, lab background, kawaii style, 1080x530px
### 步骤2：MCP生图与色彩提取
调用 `mcp__gemini__send_images_to_gemini` 生成图片，并自动：
- 保存图片到本地
- 提取主色调用于文字高亮
- 确保色彩对比度适合阅读
### 步骤3：生成HTML封面
组装完整HTML页面，包含：
- 顶部：AI生成的图片（530px）
- 底部：文字区域（910px）
- 元信息（可选）
- 主标题（自动应用高亮）
- 副标题（可选）
## 📝 核心HTML结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小红书封面</title>
<style>
body {
width: 1080px;
height: 1440px;
margin: 0;
font-family: "PingFang SC", sans-serif;
}
.ai-image {
height: 530px;
background: url('[图片地址]') center/cover;
}
.text-area {
height: 910px;
padding: 80px 100px;
background: white;
}
.title {
font-size: 86px;
font-weight: 800;
color: #2c3e50;
line-height: 1.3;
}
.highlight {
color: [提取的颜色];
}
</style>
</head>
<body>
<div class="ai-image"></div>
<div class="text-area">
<h1 class="title">
<!-- 动态生成的标题内容 -->
</h1>
</div>
</body>
</html>
```
## 🎯 标记优先级
1. **品牌/产品名**（如：Nano Banana MCP）
2. **数字指标**（如：4小时、30秒）
3. **情感/亮点词**（如：妈妈、懒人）
控制在总字数的30-40%，保持视觉平衡。
## 💡 使用建议
- 标题控制在20字以内效果最佳
- 生图强调角色/形象，避免纯图标
- 高亮色从图片提取，保持整体协调
- 可根据需要添加副标题或底部信息卡片提示词 v5
# 小红书封面设计工作流 v5
# 基本信息
## 📐 基本规格
- **尺寸**: 1080px × 1440px（上部图片720px + 下部文字720px）
- **输出**: HTML文件，可截图使用
## 🎨 布局结构
### 📱 完整布局结构图：
```
┌────────────────────────────────────┐
│ 1080px × 1440px │
├────────────────────────────────────┤
│ ╔══════════════════════════════╗ │ ← 720px
│ ║ ║ │ AI生成区域
│ ║ ║ │
│ ║ ║ │ 【主题图要求】
│ ║ 全屏主题图 ║ │ • 单一核心元素
│ ║ （无边框装饰） ║ │ • 突出视觉焦点
│ ║ ║ │ • 高清晰度
│ ║ ║ │ • 色彩饱和度适中
│ ║ ║ │ • 留白空间合理
│ ║ ║ │
│ ╚══════════════════════════════╝ │
├────────────────────────────────────┤
│ │ ← 720px
│ 〔 HTML文字区域 〕 │ HTML渲染
│ │
│ ┌──────────────────────────┐ │ 【三段式布局-垂直流式】
│ │ 👤 作者信息 │ │
│ │ │ │ 【顶部-作者区】
│ │ │ │ • 位置：padding-top 60px
│ │ │ │ • 字号：36px
│ │ 超大标题文字 │ │ • 颜色：#666
│ │ │ │ • 格式：@ AI产品自由
│ │ │ │
│ │ │ │ 【中部-标题区】
│ │ │ │ • 主标题：88px
│ │ ｜ 摘要信息 │ │ • 字重：400（常规字重）
│ │ │ │ • 字体：苹方（PingFang SC, SF Pro Text）
│ │ │ │ • 左对齐
│ └──────────────────────────┘ │ • 字间距：-2px
│ │ • 行高：0.9-1.0
│ 底部极简留白 │ • 智能分行（8-12字/行）
│ │
│ │ 【底部-摘要区】
│ │ • 位置：padding-bottom 100-120px
│ │ • 字号：40px
│ │ • 颜色：#333
│ │ • 格式：▎请输入摘要
└────────────────────────────────────┘
```
### 🎨 主题图详细要求
**1. 构图设计：**
- 主体占画面60-70%
- 全屏铺满，无边框装饰
- 单一焦点，避免杂乱元素
- 适当留白增加呼吸感
**2. 风格选择：**
- 写实大片：cinematic photography, photorealistic, dramatic lighting
- 街景摄影：urban street photography, golden hour, depth of field
- 商业摄影：commercial photography, high quality, professional
- 电影质感：movie poster style, epic composition, film grain
**3. 色彩要求：**
- 使用2-3种主色调
- 饱和度适中（40-70%）
- 确保与白色文字区域协调
- 避免过于鲜艳刺眼
**4. 背景处理：**
- 简约渐变：gradient background
- 纯色背景：solid color background
- 几何图案：geometric patterns
- 光影效果：soft shadows and highlights
### ✍️ 文字区域详细布局
**【三段式布局-垂直流式】**
**顶部-作者区：**
- 位置：padding-top 60px
- 字号：36px
- 颜色：#666
- 格式：@ AI产品自由
**中部-标题区：**
- 主标题：88px
- 字重：400（常规字重）
- 字体：苹方（PingFang SC, SF Pro Text）
- 左对齐
- 字间距：-2px
- 行高：0.9-1.0
- 智能分行（8-12字/行）
**底部-摘要区：**
- 位置：padding-bottom 100-120px
- 字号：40px
- 颜色：#333
- 格式：▎请输入摘要
**颜色方案：**
- 主文字：柔和黑 #1a1a1a
- 背景：纯白 #ffffff
- 文字颜色：柔和黑，无高亮
## 🔄 三步工作流
### 步骤1：智能分析与生图
**输入**：
标题：[您的标题文字]
**AI处理**：
1. 智能分行：基于语义单元自然分行，每行8-12个汉字
2. 生成英文生图提示词
**生图公式**：
"[主体元素] in [风格描述], [背景设置], [色彩方案], 1080x720px, full frame composition"
### 步骤2：MCP生图与色彩提取
调用 mcp__gemini__send_images_to_gemini 生成图片，并自动：
- 保存图片到本地
- 确保图片质量和构图
### 步骤3：生成HTML封面
组装完整HTML页面，包含：
- 顶部：AI生成的图片（720px）
- 底部：文字区域（720px）
- 元信息（可选）
- 主标题（自动应用高亮）
- 副标题（可选）
## 🎯 标记优先级
1. **品牌/产品名**（如：Nano Banana MCP）
2. **数字指标**（如：4小时、30秒）
3. **情感/亮点词**（如：妈妈、懒人）
控制在总字数的30-40%，保持视觉平衡。
## 💡 使用建议
- 标题控制在20字以内效果最佳
- 生图强调角色/形象，避免纯图标
- 高亮色从图片提取，保持整体协调
- 可根据需要添加副标题或底部信息卡片🚀 使用方法（超简单）
📋 生成你的专属命令
填写以下信息，系统会自动生成可复制的命令：
💡 小技巧：标题中包含数字、品牌名称、情感词汇的内容，AI会自动识别并重点突出，提升视觉吸引力。