--- name: "公众号封面生成器" description: "根据主题和标题生成现代风格的公众号封面图，使用jimeng-mcp-server生成3D插画风格底图，叠加文字层生成HTML，并可选择性转换为高质量PNG/JPG图片" version: "3.1.1" dependencies: - "jimeng-mcp-server (基于即梦AI的MCP服务器)" - "HTML/CSS 知识" - "Python 3.10+ 环境" - "即梦AI Session ID (JIMENG_API_KEY)" - "jimeng-free-api-all Docker 容器" - "Node.js 16+ 环境（图片输出功能需要）" - "Playwright (HTML转图片功能)" --- # 公众号封面生成器 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 容器运行** ```bash 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` ```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 服务器： ```bash 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;` * 底图作为 `` 标签置于容器底层，`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` 工具生成底图： ```python # 调用 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 结构模板 ```html 公众号封面
封面背景
[当前日期，格式: Fri. 11.15]

[用户指定的标题]

O3sky
``` #### 智能文字样式决策 **描边标题方案（推荐）：** - 使用**鲜艳色彩 + 描边**的组合，确保在任何背景下都醒目突出 - **主标题**：红色/橙红色文字 + 白色描边（`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 和浏览器： ```bash cd /mnt/f/work/code/other/skill/mp-cover-generator npm install npx playwright install chromium ``` #### 使用 capture.js 转换图片 **基本用法：** ```bash node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.png ``` **生成 JPEG 格式（文件更小）：** ```bash node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.jpg --quality 95 ``` **自定义参数：** ```bash node scripts/capture.js cover.html cover.png \ --width 2560 \ --height 1097 \ --scale 2 \ --wait 2000 ``` #### 参数说明 | 参数 | 说明 | 默认值 | |------|------|--------| | `--width` | 视口宽度（像素） | 2560 | | `--height` | 视口高度（像素） | 1097（21:9 比例） | | `--quality` | JPEG 质量（1-100） | 95 | | `--wait` | 等待时间（毫秒） | 2000 | | `--scale` | 设备像素比（高清） | 2 | #### 输出特点 - **高质量**：默认 2倍像素密度，实际输出 5120x2194 像素 - **格式支持**：PNG（无损）和 JPG（较小文件） - **自动加载**：等待所有图片和字体加载完成 - **精确尺寸**：严格按照视口大小截图，无多余空白 ## 示例对话流程 **用户输入：** ``` 生成一个关于 AI 的公众号封面，标题是"即梦无限画布" ``` **Assistant 执行：** 1. **收集信息** - 主题：AI/科技创新 - 标题：即梦无限画布 - 日期：Fri. 11.15（自动获取） - 作者：O3sky（固定） 2. **使用 jimeng-mcp-server 生成底图** - 调用 `mcp__jimeng-mcp-server__text_to_image` 工具： ```python 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 转换： ```bash node scripts/capture.js mp_cover_20251115.html mp_cover_20251115.png ``` - 输出高质量 PNG 图片（5120x2194 像素，2x 像素密度） - 或输出 JPEG 格式以减小文件大小： ```bash 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 依赖： ```bash 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/