公众号封面生成器

公众号封面生成器 Skill

🎯 核心任务

根据用户给定的主题、标题、日期和作者名，创建一个符合现代科技/生活方式调性的公众号封面图。

输出格式支持：

1. HTML 格式：固定宽高比为 21:9 的完整 HTML 文件，包含内联样式，可在浏览器中直接查看
2. 图片格式：通过 Playwright 将 HTML 转换为高质量 PNG 或 JPG 图片（可选）

🎨 视觉风格总览

• 主题风格: 可爱、圆润、简洁的3D插画风格 (Cute, Soft, Minimalist 3D Illustration)。质感类似皮克斯动画或黏土定格动画，具有柔和的光影和玩具般的亲和力。
• 色彩: 整体色调和谐、明快。背景为低饱和度的纯色或同色系渐变，以确保左侧文字有良好的可读性。
• 构图: 严格的非对称式"右图左文"布局，视觉焦点清晰，主次分明。
• 文字样式:
  • 描边标题: 核心标题使用鲜艳色彩+白色/深色描边效果，类似卡通字体，醒目突出
  • 主标题: 红色/橙红色 + 白色描边（#FF3333、#FF6B35）
  • 副标题: 橙黄色 + 深色描边（#FFB84D、#FFA726）
  • 立体感: 使用 text-shadow 多层阴影模拟描边，增强视觉冲击力
  • 参考风格: 类似参考图片中"MCP案例分享"的描边卡通字体效果

何时使用此 Skill

当用户需要：

• 创建公众号文章封面
• 生成社交媒体横幅图
• 制作带有标题和日期的宣传图
• 需要 3D 插画风格的图文结合设计

关键触发词：公众号封面、封面图、banner、头图、宣传图

MCP 配置

jimeng-mcp-server 设置

本技能使用 jimeng-mcp-server MCP 来生成图片。需要确保以下条件已满足：

前置条件

1. jimeng-free-api-all Docker 容器运行

   docker run -it -d --init \
     --name jimeng-free-api-all \
     -p 8001:8000 \
     -e TZ=Asia/Shanghai \
     wwwzhouhui569/jimeng-free-api-all:latest
   

2. 环境变量已配置

   • JIMENG_API_KEY: 您的即梦 API 密钥（从即梦网站 cookies 获取 sessionid 值）
   • JIMENG_API_URL: API 端点（默认：http://127.0.0.1:8001）
   • JIMENG_MODEL: 模型名称（推荐使用 jimeng-3.1）

MCP 客户端配置

Claude Desktop 配置示例：

配置文件位置：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "jimeng-mcp-server": {
      "command": "python3",
      "args": ["-m", "jimeng_mcp.server"],
      "env": {
        "JIMENG_API_KEY": "your_sessionid_here",
        "JIMENG_API_URL": "http://127.0.0.1:8001"
      }
    }
  }
}

Cherry Studio SSE 模式：

1. 启动 SSE 服务器：

   cd jimeng-mcp-server
   source .venv/bin/activate
   python -m jimeng_mcp.server --transport sse --port 8080
   

2. 在 Cherry Studio 中添加服务器：

   • 名称：jimeng-mcp-server
   • 类型：SSE
   • URL：http://localhost:8080/sse

环境要求

确保系统已安装：

• Python 3.10+
• Docker（用于运行 jimeng-free-api-all）
• jimeng-mcp-server 已正确安装
• 即梦 AI Session ID（需要从即梦网站 cookies 获取）

📐 生成规范与流程

第一部分：底图生成 (使用 jimeng-mcp-server)

此区域用于生成无任何文字的、符合构图和风格规范的背景插图。

尺寸与布局

• 图片宽高比: 21:9 (3024x1296 像素)
• 主体位置: 核心的 3D 视觉元素（如人物、设备、场景）必须全部位于画面右侧的 30%-40% 区域内
• 留白区域: 画面左侧 60%-70% 的区域必须是干净的留白，可以是纯色或非常微妙的渐变，不能有任何干扰视觉的元素

【极其重要】禁止的视觉元素

• 严禁任何形式的文字: 生成的底图中绝对不能包含任何字母、数字或符号
• 严禁边框: 图片不能有任何形式的内外边框

插图生成要求

内容: 插图需根据用户输入的主题关键词，象征性地创作一个场景。

背景: 背景必须是简单的纯色或从左到右的同色系渐变 (subtle monochromatic gradient background)。

【风格重点 - 严格遵守】:

核心风格:

• ✅ 必须是可爱、圆润的卡通3D风格 (Cute, rounded, cartoon 3D style)
• ✅ 所有模型都应有柔和的边缘和哑光或黏土般的材质 (soft edges, matte or clay-like material)
• ✅ 整体感觉类似皮克斯动画 (Pixar animation style) 或玩具质感 (toy-like texture)
• ✅ 光照必须是明亮且柔和的 (bright and soft lighting)

规避风格:

• ❌ 严格禁止生成以下风格：
  • 霓虹/赛博朋克风 (NO neon, NO cyberpunk)
  • 暗黑深沉风 (NO dark themes)
  • 抽象科技线条风 (NO abstract tech lines)
  • 玻璃质感或写实渲染风 (NO glassmorphism, NO photorealism)

第二部分：文字层叠加 (Agent HTML实现)

此部分基于第一步生成的底图，通过绝对定位的方式精确添加文字层。

HTML结构

• 创建一个主容器 div，position: relative;
• 底图作为 <img> 标签置于容器底层，width: 100%; display: block;
• 所有文字元素分别使用独立的 div 或 p 标签，并通过 position: absolute; 进行定位

字体

优先使用流行的中文字体

内容与样式 (基于父容器尺寸)

1. 日期 (Date):

   • 内容: 获取当前星期和日期，格式: Fri. 9.15
   • 样式: position: absolute; top: 8%; left: 6%; 字号 font-size: 1.5vw; (或等效的px值), 颜色 color: #999999;

2. 核心标题 (Headline):

   • 内容: [由用户指定，需拆分为两行]
   • 样式: position: absolute; top: 50%; transform: translateY(-50%); left: 6%; 字号 font-size: 5vw; (或等效的px值), 加粗 font-weight: bold;
   • 描边效果 (重要):
     • 使用 CSS text-stroke 或 text-shadow 创建文字描边
     • 描边颜色：白色或深色（根据文字颜色对比选择）
     • 描边宽度：-webkit-text-stroke: 3px #FFFFFF; 或使用多层阴影模拟描边
     • 主标题颜色：鲜艳色彩（如 #FF3333 红色、#FF6B35 橙红色）
     • 副标题颜色：对比色（如 #FFB84D 橙黄色、#FFA726 橙色）
   • 文字阴影: text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 增强立体感
   • 行高 line-height: 1.3; 确保双行标题紧凑
   • 布局要求: 第二行文字使用 white-space: nowrap; 确保不折行
   • 参考效果: 类似描边卡通字体，文字醒目突出，适合公众号封面

3. 作者 (Author):

   • 内容: 固定为：o3sky
   • 样式: position: absolute; bottom: 8%; left: 6%; 字号 font-size: 1.5vw; (或等效的px值), 颜色 color: #666666;

💡 系统执行流程

第一步：收集必要信息

从用户处获取以下信息：

1. 主题关键词：用于生成插画内容（必填）
2. 标题：封面的核心标题文字（必填）

自动生成的信息：

• 日期：自动获取当前星期和日期，格式为 Fri. 11.15
• 作者名：固定为"o3sky"

第二步：使用 jimeng-mcp-server 生成底图

调用 jimeng-mcp-server 的 text_to_image 工具来生成底图。

MCP 调用示例

使用 mcp__jimeng-mcp-server__text_to_image 工具生成底图：

# 调用 jimeng-mcp-server 的 text_to_image 工具
mcp__jimeng-mcp-server__text_to_image(
    prompt="Create a cute, rounded, cartoon 3D illustration with [主题关键词] theme. Style: Pixar-like animation, toy-like texture, soft edges, matte/clay-like materials, bright and soft lighting, vibrant colors. Main elements: [具体描述主题相关的物体和图标]. NO people, NO characters. Composition: Main elements positioned in RIGHT 30-40% of frame. LEFT 60-70% clean space with gradient background. Aspect ratio: 21:9 ultra-wide. IMPORTANT: NO text, NO people, NO characters, NO neon/cyberpunk, NO dark themes, NO abstract tech lines, NO glassmorphism, NO photorealism.",
    width=3024,
    height=1296,  # 21:9比例
    model="jimeng-3.1",  # 推荐使用 jimeng-3.1 模型
    sample_strength=0.6
)

生成提示词模板

默认模板：

Create a cute, rounded, cartoon 3D illustration with [主题关键词] theme.
Style: Pixar-like animation, toy-like texture, soft edges, matte/clay-like materials, bright and soft lighting, vibrant colors.
Main elements: [具体描述主题相关的物体和图标，如：AI brain with floating skill badges, glowing lightbulbs, stacked books, interlocking gears]
Composition: Main elements positioned in RIGHT 30-40% of frame.
LEFT 60-70% must be clean space with gradient background or subtle geometric patterns.
Aspect ratio: 21:9 (ultra-wide)
IMPORTANT: NO text, NO letters, NO numbers, NO borders, NO people, NO characters, NO neon/cyberpunk, NO dark themes, NO abstract tech lines, NO glassmorphism, NO photorealism.

返回结果处理

jimeng-mcp-server 会返回 4 张不同风格的图片 URL：

✅ 成功生成 4 张图像

📷 图像URL列表:
图像 1: https://p26-dreamina-sign.byteimg.com/...
图像 2: https://p26-dreamina-sign.byteimg.com/...
图像 3: https://p26-dreamina-sign.byteimg.com/...
图像 4: https://p26-dreamina-sign.byteimg.com/...

选择最符合要求的一张图片（通常选择第一张）作为封面底图。

第三步：构建 HTML 文件

基于生成的底图，创建包含文字层的 HTML 文件。

HTML 结构模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号封面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        /* 主容器样式 */
        .cover-container {
            position: relative;
            width: 100%;
            max-width: 2560px;
            aspect-ratio: 21/9;
            overflow: hidden;
            background: #ffffff;
        }

        /* 背景图片 */
        .cover-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* 日期样式 */
        .date {
            position: absolute;
            top: 8%;
            left: 6%;
            font-size: 1.5vw;
            color: #999999;
            font-weight: 400;
            letter-spacing: 0.05em;
        }

        /* 主标题样式 - 带描边效果 */
        .headline {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 6%;
            max-width: 55%;
            font-size: 5vw;  /* 加大字号 */
            font-weight: bold;
            line-height: 1.3;
            letter-spacing: -0.01em;
            /* 描边效果 - 使用多层阴影模拟描边 */
            color: #FF3333;  /* 主标题红色 */
            text-shadow:
                /* 白色描边效果 */
                -3px -3px 0 #FFFFFF,
                 3px -3px 0 #FFFFFF,
                -3px  3px 0 #FFFFFF,
                 3px  3px 0 #FFFFFF,
                -3px  0   0 #FFFFFF,
                 3px  0   0 #FFFFFF,
                 0   -3px 0 #FFFFFF,
                 0    3px 0 #FFFFFF,
                /* 立体阴影 */
                 4px  4px 6px rgba(0, 0, 0, 0.3);
            /* Webkit 浏览器的描边支持 */
            -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
        }

        /* 副标题样式（如果标题分两行，第二行可用此样式）*/
        .headline-secondary {
            color: #FFB84D;  /* 副标题橙黄色 */
            white-space: nowrap;  /* 禁止折行 */
            text-shadow:
                -3px -3px 0 #8B4513,
                 3px -3px 0 #8B4513,
                -3px  3px 0 #8B4513,
                 3px  3px 0 #8B4513,
                -3px  0   0 #8B4513,
                 3px  0   0 #8B4513,
                 0   -3px 0 #8B4513,
                 0    3px 0 #8B4513,
                 4px  4px 6px rgba(0, 0, 0, 0.4);
            -webkit-text-stroke: 0.5px rgba(139, 69, 19, 0.3);
        }

        /* 作者信息样式 */
        .author {
            position: absolute;
            bottom: 8%;
            left: 6%;
            font-size: 1.5vw;
            color: #666666;
            font-weight: 500;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .date {
                font-size: 2.5vw;
            }

            .headline {
                font-size: 6vw;
                max-width: 60%;
            }

            .author {
                font-size: 2.5vw;
            }
        }

        @media (max-width: 480px) {
            .date {
                font-size: 3.5vw;
            }

            .headline {
                font-size: 7vw;
                max-width: 70%;
            }

            .author {
                font-size: 3.5vw;
            }
        }
    </style>
</head>
<body>
    <div class="cover-container">
        <!-- 背景图片 -->
        <img src="[从 jimeng-mcp-server 返回的图片 URL]" alt="封面背景">

        <!-- 日期 -->
        <div class="date">[当前日期，格式: Fri. 11.15]</div>

        <!-- 标题 -->
        <h1 class="headline">[用户指定的标题]</h1>

        <!-- 作者 -->
        <div class="author">O3sky</div>
    </div>
</body>
</html>

智能文字样式决策

描边标题方案（推荐）：

• 使用鲜艳色彩 + 描边的组合，确保在任何背景下都醒目突出
• 主标题：红色/橙红色文字 + 白色描边（color: #FF3333; text-shadow: 多层白色阴影）
• 副标题：橙黄色文字 + 深色描边（color: #FFB84D; text-shadow: 多层深色阴影）
• 描边通过 8 层 text-shadow 模拟，创建厚重的轮廓效果
• 额外添加立体阴影增强视觉冲击力

传统方案（可选）：

• 自动检测底图左侧区域的亮度
• 如果背景偏暗 → 标题颜色使用白色 (#FFFFFF)
• 如果背景偏亮 → 标题颜色使用深色 (#000000)

推荐使用描边方案，效果更加醒目，适合公众号封面的视觉需求。

第四步：输出 HTML 文件

1. 保存为独立的 HTML 文件（例如：mp_cover_[日期].html）
2. 向用户展示预览效果
3. 提供完整代码和文件路径

第五步：HTML 转图片（可选）

如果用户需要图片格式，可以使用 Playwright 将 HTML 转换为高质量图片。

安装依赖

首次使用前需要安装 Playwright 和浏览器：

cd /mnt/f/work/code/other/skill/mp-cover-generator
npm install
npx playwright install chromium

使用 capture.js 转换图片

基本用法：

node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.png

生成 JPEG 格式（文件更小）：

node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.jpg --quality 95

自定义参数：

node scripts/capture.js cover.html cover.png \
  --width 2560 \
  --height 1097 \
  --scale 2 \
  --wait 2000

参数说明

输出特点

• 高质量：默认 2倍像素密度，实际输出 5120x2194 像素
• 格式支持：PNG（无损）和 JPG（较小文件）
• 自动加载：等待所有图片和字体加载完成
• 精确尺寸：严格按照视口大小截图，无多余空白

示例对话流程

用户输入：

生成一个关于 AI 的公众号封面，标题是"即梦无限画布"

Assistant 执行：

1. 收集信息

   • 主题：AI/科技创新
   • 标题：即梦无限画布
   • 日期：Fri. 11.15（自动获取）
   • 作者：O3sky（固定）

2. 使用 jimeng-mcp-server 生成底图

   • 调用 mcp__jimeng-mcp-server__text_to_image 工具：

     mcp__jimeng-mcp-server__text_to_image(
         prompt="Create a cute, rounded, cartoon 3D illustration with AI/technology theme. Style: Pixar-like animation, toy-like texture, soft edges, matte/clay-like materials, bright and soft lighting, vibrant colors. Main elements: Glowing AI brain icon with floating skill badges, lightbulbs, books, gears and neural network nodes. NO people, NO characters. Composition: Elements positioned in RIGHT 30-40% of frame. LEFT 60-70% clean space with purple-blue gradient background. Aspect ratio: 21:9 ultra-wide. IMPORTANT: NO text, NO people, NO characters, NO borders, NO neon/cyberpunk, NO dark themes, NO abstract tech lines, NO glassmorphism, NO photorealism.",
         width=3024,
         height=1296,
         model="jimeng-3.1",
         sample_strength=0.6
     )
     

   • 从返回的 4 张图片中选择第一张作为底图

3. 构建 HTML

   • 创建包含底图和文字层的完整 HTML 文件
   • 根据背景亮度自动调整文字颜色
   • 使用从 jimeng-mcp-server 返回的图片 URL

4. 输出 HTML

   • 保存为 mp_cover_{当前日期}.html
   • 向用户展示文件路径

5. 转换为图片（可选）

   • 如果用户需要图片格式，使用 Playwright 转换：

     node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.png
     

   • 输出高质量 PNG 图片（5120x2194 像素，2x 像素密度）
   • 或输出 JPEG 格式以减小文件大小：

     node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.jpg --quality 95
     

注意事项

技术要求

• 图片尺寸配置：严格使用 3024x1296（21:9比例），但 jimeng-mcp-server 限制最大 2048 宽度，实际使用 2048x864 或 1536x864
• 模型选择：推荐使用 jimeng-3.1 模型，效果更好
• 采样强度：建议设置为 0.6，平衡创意性和真实性
• 等待时间：图像生成需要 10-20 秒，请耐心等待
• Node.js 环境：图片输出功能需要 Node.js 16+ 和 Playwright（首次使用需安装依赖）

布局要求

• 布局比例调整：主体元素严格位于右侧30%-40%区间，左侧60%-70%必须保持干净留白
• 确保生成的底图完全符合风格规范，特别是可爱圆润的卡通3D风格
• 文字层的定位使用相对单位（vw/%），确保响应式

内容规范

• 标题如果过长，需要智能换行，保持在 2-3 行以内
• 星期和日期格式必须为英文星期缩写格式（如 Fri. 11.15）
• 作者名固定为"O3sky"，不接受用户自定义

故障排查

如果图片生成失败：

1. 确认 jimeng-free-api-all Docker 容器正在运行
2. 检查 JIMENG_API_KEY 是否正确配置
3. 验证后端服务可访问：curl http://localhost:8001
4. 确保有足够的 API 积分（免费层每天 66 积分）
5. 图像生成需要 10-20 秒，请耐心等待

如果 HTML 转图片失败：

1. 确认已安装 Node.js 16+ 环境：node --version
2. 安装 Playwright 依赖：

   cd /mnt/f/work/code/other/skill/mp-cover-generator
   npm install
   npx playwright install chromium
   

3. 检查 HTML 文件路径是否正确（使用绝对路径或相对路径）
4. 如果图片未加载，增加 --wait 时间：--wait 3000
5. 查看详细错误信息，根据提示修复问题

版本更新说明

v3.1.1 (2025-11-15)

• ✅ 新增描边卡通字体效果
• ✅ 标题垂直居中布局
• ✅ 增大字体（4vw → 5vw）
• ✅ 禁止副标题折行（white-space: nowrap）
• ✅ 完整页面截图（修复截断问题）
• ✅ 自动检测内容高度并调整视口
• ✅ 高质量输出（5120x2916，2x 像素密度）

v3.1.0 (2025-11-15)

• ✅ 新增 HTML 转图片功能
• ✅ 集成 Playwright 实现高质量截图
• ✅ 支持 PNG 和 JPEG 两种输出格式
• ✅ 默认 2x 像素密度，输出 5120x2194 高清图片
• ✅ 添加 capture.js 脚本工具
• ✅ 添加完整的参数配置支持

v3.0.0 (2025-11-15)

• ✅ 从 jimeng-image-generator 迁移到 jimeng-mcp-server
• ✅ 使用标准 MCP 协议调用
• ✅ 支持 jimeng-3.1 模型
• ✅ 返回 4 张可选图片，提供更多选择
• ✅ 更新配置说明和故障排查指南

v2.0.0

• 初始版本，使用 jimeng-image-generator

相关资源

• jimeng-mcp-server GitHub: https://github.com/wwwzhouhui/jimeng-mcp-server
• jimeng-free-api-all GitHub: https://github.com/wwwzhouhui/jimeng-free-api-all
• 即梦 AI 官网: https://jimeng.jianying.com/
• MCP 协议文档: https://modelcontextprotocol.io/