Claude Skills 实战指南：一键生成公众号封面，3D 插画 + 描边标题 3 秒出图

前言

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

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

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

项目介绍

什么是 mp-cover-generator？

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

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

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

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

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

技术架构

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

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

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

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

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

适用场景

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

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

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

部署实战

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

第一步：环境准备

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

1. 安装 Docker

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

Linux/Mac 用户：

bash 复制代码

# 安装 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+ 环境。我们可以去nodejs.org/zh-cn/downl... 下载

Linux/Mac 用户：

bash 复制代码

# 使用 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 用户：

bash 复制代码

# 检查 Python 版本
python3 --version

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

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

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

下载镜像：

bash 复制代码

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

启动 Docker 容器：

bash 复制代码

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

验证容器状态：

bash 复制代码

# 查看容器是否启动成功
docker ps | grep jimeng

# 测试 API 是否可用
curl http://localhost:8001

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

第三步：获取即梦 API 密钥

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

获取步骤：

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

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

第四步：安装 jimeng-mcp-server

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

克隆项目：

bash 复制代码

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

安装 Python 依赖：

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

方法一：使用 uv（推荐）

bash 复制代码

# 安装 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

bash 复制代码

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

# 安装依赖
pip install -e .

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

配置 MCP 服务器：

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

bash 复制代码

touch .env

编辑 .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

注意： 将 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

编辑配置文件，添加以下内容：

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 文件，可以直接使用：

json 复制代码

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

Cherry Studio SSE 模式配置：

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

启动 SSE 服务器：

bash 复制代码

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

在 Cherry Studio 中添加 MCP 服务器：

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

第六步：安装 mp-cover-generator

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

bash 复制代码

# 克隆或下载项目
git clone https://github.com/wwwzhouhui/skills_collection.git
cd skills_collection/mp-cover-generator

# 安装依赖
npm install

# Playwright 会自动安装 Chromium 浏览器
# 如果没有自动安装，手动执行：
npx playwright install chromium

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

bash 复制代码

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）

生成过程截图：

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

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

bash 复制代码

# 转换为 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）+ 深棕色描边，单行不折行
立体感：多层阴影模拟描边 + 额外立体阴影
位置：垂直居中（top: 50%; transform: translateY(-50%);）
字号：5vw（大字体，响应式）

自动生成信息：

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

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

第九步：自定义封面样式

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

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

css 复制代码

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

.headline-secondary {
    color: #FFB84D;  /* 副标题颜色 */
}

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

css 复制代码

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

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

css 复制代码

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

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

html 复制代码

<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响应式设计能力在个人品牌视觉统一、系列文章封面风格一致性等场景的应用价值。感兴趣的小伙伴可以按照文中提供的步骤进行实践，根据实际内容主题和视觉需求调整主题关键词、标题文字、颜色方案等配置项。今天的分享就到这里结束了，我们下一篇文章见。