Claude Skills 实战指南：一键生成公众号封面，3D 插画 + 描边标题 3 秒出图 - 文章 - 开发者社区

前言

你是不是经常为了做一张公众号封面图而烦恼？打开PS或者Figma，调色、排版、找素材，折腾大半天还不一定满意。更糟糕的是，有时候灵感来了想立刻发文，却被封面图卡住了进度。作为一个技术博主，我深有体会——我想专注于写作和分享技术，而不是在设计工具上耗费时间。

好消息是，现在有了AI加持，这个问题可以彻底解决了！我最近开发了一个叫 mp-cover-generator 的工具，它能根据你的文章主题和标题，自动生成可爱的3D插画风格封面图。不需要设计功底，不需要PS技能，只要一句话描述，3秒钟就能搞定。最关键的是，生成的封面图还特别有质感，类似皮克斯动画的那种卡通风格，配上醒目的描边标题，视觉冲击力直接拉满。

picture.image

这篇文章我就来手把手教你怎么用这个工具，从环境搭建到实际生成封面，全程图文详解。不管你是公众号作者、技术博主，还是运营小伙伴，看完这篇都能立刻上手，彻底告别封面图制作的烦恼！

picture.image

项目介绍

什么是 mp-cover-generator？

mp-cover-generator（公众号封面生成器）是一个基于 AI 技术的自动化封面图生成工具。它的核心理念很简单：让内容创作者专注于内容本身，而不是在设计上浪费时间 。

这个工具最大的亮点有三个：

1. AI 驱动的底图生成
它集成了即梦 AI（字节跳动旗下的多模态 AI 生成平台），能根据你的主题关键词，自动生成可爱圆润的 3D 插画风格底图。你说"MCP 技术教程"，它就给你生成一个带着可爱电脑、AI 大脑、教程书籍的卡通场景。风格类似皮克斯动画，质感柔和，色彩明快，看着就让人舒服。

2. 描边卡通字体，视觉冲击力爆表
生成的封面标题不是普通的文字，而是带有多层描边效果的卡通字体。主标题用红色配白色描边，副标题用橙黄色配深棕色描边，8 个方向的文字阴影模拟出厚重的轮廓，再加上立体阴影增强视觉冲击力。这种效果在公众号封面上非常吸睛，能大幅提升文章的点击率。

3. 双格式输出，随心所欲
工具会自动生成 HTML 和高清图片两种格式。HTML 文件可以在浏览器中预览和编辑，图片格式则支持 PNG（无损高质量）和 JPEG（压缩节省空间）两种。最终输出的图片分辨率达到 5120x2916 像素，2 倍像素密度，无论是在手机上看还是打印出来，都非常清晰。

picture.image

技术架构

mp-cover-generator 的技术栈非常现代：

• AI 图像生成 ：基于 jimeng-mcp-server（即梦 AI 的 MCP 协议封装），支持文生图功能
• 前端技术 ：HTML5 + CSS3，使用响应式设计，支持多种屏幕尺寸
• 截图引擎 ：Playwright（微软开源的浏览器自动化工具），实现 HTML 到图片的高质量转换
• 容器化部署 ：jimeng-free-api-all Docker 容器，提供稳定的 AI 图像生成服务

picture.image

整个工具的工作流程分为三步：

1. 用户提供主题关键词和标题文字
1. 调用 jimeng-mcp-server 生成 3D 插画风格底图（返回 4 张可选）
1. 叠加文字层生成 HTML，使用 Playwright 转换为高清图片

这个流程完全自动化，从输入到输出只需要 10-20 秒，效率极高。

picture.image

适用场景

mp-cover-generator 特别适合以下场景：

• 公众号文章封面 ：技术博客、生活分享、行业资讯等各类文章
• 社交媒体横幅图 ：微博、知乎、小红书等平台的配图
• 技术博客头图 ：掘金、CSDN、博客园等技术平台的文章配图
• 宣传海报快速设计 ：活动预告、课程推广等轻量级设计需求

只要你需要图文结合的设计，并且想要可爱的 3D 插画风格，mp-cover-generator 都能帮你搞定。

picture.image

部署实战

好了，理论讲完了，咱们直接上手操作！下面我会一步步带你完成环境搭建和实际使用。

第一步：环境准备

在使用 mp-cover-generator 之前，你需要准备以下环境：

1. 安装 Docker

jimeng-free-api-all 是通过 Docker 容器运行的，所以首先要安装 Docker。

Linux/Mac 用户：


 
 
 
 
   
# 安装 Docker（以 Ubuntu 为例）  
curl -fsSL https://get.docker.com -o get-docker.sh  
sudo sh get-docker.sh  
  
# 启动 Docker 服务  
sudo systemctl start docker  
sudo systemctl enable docker

Windows 用户：
访问 Docker Desktop 官网下载并安装 Docker Desktop。

2. 安装 Node.js

Playwright 需要 Node.js 16+ 环境。我们可以去https://nodejs.org/zh-cn/download 下载

picture.image

Linux/Mac 用户：


 
 
 
 
   
# 使用 nvm 安装 Node.js（推荐）  
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash  
# in lieu of restarting the shell  
\. "$HOME/.nvm/nvm.sh"  
# Download and install Node.js:  
nvm install 22  
# Verify the Node.js version:  
node -v # Should print "v22.19.0".  
# Verify npm version:  
npm -v # Should print "10.9.3".

Windows 用户：
访问 Node.js 官网下载并安装 LTS 版本。

3. 安装 Python 3.10+

jimeng-mcp-server 需要 Python 环境。

Linux/Mac 用户：


 
 
 
 
   
# 检查 Python 版本  
python3 --version

picture.image

Windows 用户：
访问 Python 官网下载并安装 Python 3.10+。

第二步：启动 jimeng-free-api-all 容器

jimeng-free-api-all 是即梦 AI 的免费 API 服务，我们需要先启动这个容器。

下载镜像：


 
 
 
 
   
docker pull wwwzhouhui569/jimeng-free-api-all:latest

启动 Docker 容器：


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

picture.image

验证容器状态：


 
 
 
 
   
# 查看容器是否启动成功  
docker ps | grep jimeng  
  
# 测试 API 是否可用  
curl http://localhost:8001

如果看到类似 {"message":"Welcome to Jimeng Free API"} 的响应，说明容器启动成功。

第三步：获取即梦 API 密钥

要使用即梦 AI 的图像生成服务，需要获取 API 密钥（即 sessionid）。

获取步骤：

1. 访问即梦 AI 官网并登录（可以用抖音账号登录）
1. 按 F12 打开浏览器开发者工具
1. 切换到 Application 标签页（Chrome）或存储标签页（Firefox）
1. 找到 Cookies 下的 sessionid 值，复制它
1. 将这个值保存下来，后面会用到

picture.image

注意： 即梦 AI 免费层每天提供 88 积分 ，每次生成图片消耗 1-2 积分，完全够日常使用。

第四步：安装 jimeng-mcp-server

jimeng-mcp-server 是即梦 AI 的 MCP 协议封装，让我们能在 Claude Code 中直接调用。

克隆项目：


 
 
 
 
   
# 克隆 jimeng-mcp-server 项目  
git clone https://github.com/wwwzhouhui/jimeng-mcp-server.git  
cd jimeng-mcp-server

安装 Python 依赖：

项目使用 uv 作为包管理工具（推荐），也可以使用传统的 pip。

方法一：使用 uv（推荐）


 
 
 
 
   
# 安装 uv（如果尚未安装）  
curl -LsSf https://astral.sh/uv/install.sh | sh  
  
# 创建虚拟环境并安装依赖  
uv venv  
source .venv/bin/activate  # Linux/macOS  
# 或者在 Windows 上使用: .venv\Scripts\activate  
  
uv pip install -e .

方法二：使用 pip


 
 
 
 
   
# 创建虚拟环境  
python -m venv .venv  
source .venv/bin/activate  # Linux/macOS  
# 或者在 Windows 上使用: .venv\Scripts\activate  
  
# 安装依赖  
pip install -e .

picture.image

安装过程中可能需要几分钟时间，请耐心等待。

配置 MCP 服务器：

创建 .env 文件配置后端 API 地址：


 
 
 
 
   
touch .env

编辑 .env 文件，添加以下内容：


 
 
 
 
   
# 即梦API配置  
  
# 您的即梦API密钥（必需）  
JIMENG\_API\_KEY=你的sessionid值  
  
# API基础URL（可选，默认为 https://jimeng.duckcloud.fun）  
JIMENG\_API\_URL=http://127.0.0.1:8001  
  
# 图像生成的默认模型（可选，默认为 jimeng-4.0）  
JIMENG\_MODEL=jimeng-3.1

picture.image

注意： 将 JIMENG\_API\_KEY 替换为你在第三步获取的 sessionid 值。

第五步：Cherry Studio配置

如果你使用的是 Claude Desktop 或 Cherry Studio，需要配置 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": "python",  
      "args": ["-m", "jimeng\_mcp.server"],  
      "env": {  
        "JIMENG\_API\_KEY": "你的sessionid值",  
        "JIMENG\_API\_URL": "http://127.0.0.1:8001"  
      }  
    }  
  }  
}

或者，如果你已经配置了 .env 文件，可以直接使用：


 
 
 
 
   
{  
  "mcpServers": {  
    "jimeng-mcp-server": {  
      "command": "python",  
      "args": ["-m", "jimeng\_mcp.server"]  
    }  
  }  
}

Cherry Studio SSE 模式配置：

如果你使用 Cherry Studio，可以用 SSE 模式：

1. 启动 SSE 服务器：


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

1. 在 Cherry Studio 中添加 MCP 服务器：

picture.image

配置完成后，重启 Claude Desktop 或 Cherry Studio，MCP 服务器就会自动加载。

第六步：安装 mp-cover-generator

现在可以安装 mp-cover-generator 了：


 
 
 
 
   
# 克隆或下载项目  
git clone https://github.com/wwwzhouhui/skills\_collection.git  
cd skills\_collection/mp-cover-generator  
  
# 安装依赖  
npm install  
  
# Playwright 会自动安装 Chromium 浏览器  
# 如果没有自动安装，手动执行：  
npx playwright install chromium

安装完成后，项目目录结构如下：


 
 
 
 
   
mp-cover-generator/  
├── SKILL.md              # Skill 详细文档  
├── README.md             # 使用说明  
├── package.json          # npm 配置文件  
├── scripts/  
│   └── capture.js        # HTML 转图片脚本  
└── resources/            # 示例文件

第七步：生成第一张封面图

环境搭建完成，现在来生成第一张封面图！

在 Claude Code 中直接输入：


 
 
 
 
   
请使用 mp-cover-generator skill 生成一个 MCP案例分享 claude调用AI生图视频教程 介绍的文章的公众号封面

Claude 会自动执行以下步骤：

调用 jimeng-mcp-server 生成 3D 插画底图（返回 4 张可选图片）

选择第一张图片 ，叠加文字层生成 HTML

使用 Playwright 转换为 PNG 和 JPEG 图片

整个过程大约 20 秒 ，你会得到：

• mcp\_tutorial\_cover\_YYYYMMDD.html

HTML 文件

• mcp\_tutorial\_cover\_YYYYMMDD.png

PNG 图片（约 4-5 MB）

• mcp\_tutorial\_cover\_YYYYMMDD.jpg

JPEG 图片（约 1.5 MB）

生成过程截图：

picture.image

方式二：手动转换 HTML 为图片

如果你已经有了 HTML 文件，想单独转换为图片：


 
 
 
 
   
# 转换为 PNG（无损高质量）  
node scripts/capture.js your\_cover.html your\_cover.png  
  
# 转换为 JPEG（压缩版本）  
node scripts/capture.js your\_cover.html your\_cover.jpg --quality 95  
  
# 自定义参数  
node scripts/capture.js cover.html cover.png \  
  --width 2560 \  
  --height 1097 \  
  --scale 2 \  
  --wait 3000

参数说明：

• --width : 视口宽度（像素），默认 2560
• --height : 视口高度（像素），默认 1097
• --quality : JPEG 质量（1-100），默认 95
• --wait : 等待时间（毫秒），默认 2000
• --scale : 设备像素比，默认 2（输出 2 倍高清图）

第八步：查看生成效果

生成完成后，用浏览器打开 HTML 文件，或者直接查看图片。

封面图特点：

视觉风格：

• 主题风格：可爱、圆润、简洁的 3D 插画
• 质感：类似皮克斯动画或黏土定格动画
• 色彩：和谐明快，低饱和度渐变背景
• 构图：右图左文，主体位于右侧 30-40% 区域
• 留白：左侧 60-70% 干净留白供文字显示

文字样式（核心亮点）：

• 主标题 ：红色（#FF3333）+ 白色描边，8 方向文字阴影
• 副标题 ：橙黄色（#FFB84D）+ 深棕色描边，单行不折行
• 立体感 ：多层阴影模拟描边 + 额外立体阴影
• 位置：垂直居中（ transform: translateY( 50%; transform: translateY(-50%); ）
• 字号：5vw（大字体，响应式）

自动生成信息：

• 日期：自动显示当前日期（格式：Fri. 11.15）
• 作者：固定显示"O3sky"
• 分辨率 ：5120x2916 像素（完整页面截图，无截断）

如果对底图不满意，可以重新生成。jimeng-mcp-server 每次会返回 4 张不同风格的图片 ，你可以选择最喜欢的一张。

第九步：自定义封面样式

如果你想自定义封面的样式，可以编辑 HTML 文件。主要可调整的部分：

1. 修改标题颜色
在 CSS 中找到 .headline-main 和 .headline-secondary，修改 color 属性：


 
 
 
 
   
.headline-main {  
    color: #FF3333;  /* 主标题颜色，改为你喜欢的颜色 */  
}  
  
.headline-secondary {  
    color: #FFB84D;  /* 副标题颜色 */  
}

2. 调整标题位置
默认是垂直居中，你也可以改成靠上或靠下：


 
 
 
 
   
.headline {  
    top: 50%;  /* 垂直居中 */  
    /* transform: translateY( 20%; 改为靠上 */  
    /* top: 70%; 改为靠下 */  
    transform: translateY(-50%);  
}

3. 修改字体大小
默认字号是 5vw（响应式），可以根据需要调整：


 
 
 
 
   
.headline {  
    font-size: 5vw;  /* 改为 6vw 会更大，4vw 会更小 */  
}

4. 更换作者名
在 HTML 中找到 .author 部分，修改文字内容：


 
 
 
 
   
<div class="author">O3sky</div>  <!-- 改为你的名字 -->

修改完成后，重新运行 capture.js 转换为图片即可。

总结

今天主要带大家了解并实现了 mp-cover-generator（公众号封面生成器） 的完整部署与使用流程，该开源自动化工具以 "AI图像生成 + 描边卡通字体 + 完整页面截图" 为核心优势，结合内容创作效率提升需求，通过 jimeng-mcp-server集成与 Playwright浏览器自动化，形成了一套从 AI底图生成 到 高清封面输出 的全链路 公众号封面制作解决方案 。

通过这套实践方案，公众号作者与技术博主能够高效突破传统设计工具学习成本高、制作周期长的效率瓶颈 —— 借助三层技术栈（包括即梦AI图像生成层、HTML/CSS响应式设计层、Playwright截图转换层），无需掌握PS、Figma等专业设计工具，就能快速实现AI生成3D插画底图、智能叠加描边字体、自动转换高清图片三大核心功能（如本次演示的 "一句话生成MCP教程封面，20秒拿到HTML+PNG+JPG三种格式"）。无论是技术博客封面设计、公众号文章配图，还是社交媒体横幅图、宣传海报快速制作，都能通过自然语言描述主题完成，极大提升内容创作效率和视觉呈现质量。

在实际应用中，该 封面生成器 不仅 支持可爱圆润的3D插画风格（类似皮克斯动画） ，还 提供多层描边卡通字体效果（8方向文字阴影 + 立体阴影） ，视觉冲击力远优于 传统纯文字或简单图片叠加方案 ；特别是通过 Playwright完整页面截图，有效解决了传统截图工具内容截断和分辨率不足的难题（输出分辨率达到 5120x2916像素，2倍像素密度）。同时，方案具备良好的可定制性 —— 小伙伴们可以基于生成的HTML文件自定义标题颜色、字体大小、位置布局等样式，进一步发挥 CSS响应式设计能力在个人品牌视觉统一、系列文章封面风格一致性等场景的应用价值。感兴趣的小伙伴可以按照文中提供的步骤进行实践，根据实际内容主题和视觉需求调整主题关键词、标题文字、颜色方案等配置项。今天的分享就到这里结束了，我们下一篇文章见。

mcp-server案例分享-即梦MCP-Server实战教程-让Claude直接调用AI生图视频能力

Claude Skills 新玩法：用 skill-creator 10 分钟搞定 Excel 报表自动化，职场人必学

Claude Skills 从零到一：手把手打造专属公众号文风生成器，10 分钟搞定 AI 技能定制

Claude Skills 实战指南：3 分钟搞定 PPT、海报与 Logo，AI 办公效率翻倍！

Claude+Codex协同开发，让AI编程效率翻倍成本直降近半