Step 1：读取技能参考文件#

1
# 技能 SKILL.md 位于
2
/workspace/.omnibot/skills/guizang-social-card-skill/SKILL.md
3

4
# 关键参考文件
5
references/style-system.md       # 风格系统（Swiss / Editorial 两种模式）
6
references/layout-recipes.md     # 布局食谱
7
references/theme-presets.md      # 主题色板（Ink Classic / IKB Blue 等）
8
references/components.md         # 组件规范（字体、间距、圆角等）
9
references/platform-specs.md     # 平台规格（小红书 1080×1440, 3:4）
10
references/production-workflow.md # 生产工作流
11
assets/template-swiss-card.html   # Swiss 风格 HTML 模板
12
assets/template-editorial-card.html # 杂志风格 HTML 模板

Step 2：规划卡片内容与风格#

小红书规格：1080×1440px（3:4），导出 PNG

推荐风格：

• Swiss International：科技、工程、AI 类文章（IKB Blue 强调色 #002FA7）
• Editorial Magazine x E-ink：文艺、人文、生活类文章
• 手绘可爱风（Doodle）：需要自定义 CSS，参考本指南的”手绘风改造”部分

Step 3：配置素材图片#

三种方案：

• A. 用户自行提供截图/照片（推荐最自然）
• B. 从 Pexels/Unsplash 找免费素材图
• C. AI 生成插画

B 方案操作（以 Pexels 为例）：

1
# 1. 在 Pexels 搜索科技/AI 相关图片
2
# 2. 打开图片详情页，通过 find_elements 找到下载链接
3
# 3. 用 wget 下载到 assets/ 目录
4
cd /workspace/social-card-openclaw/assets
5
wget -O robot-hand-blue.jpg "https://images.pexels.com/photos/8386437/pexels-photo-8386437.jpeg?cs=srgb&dl=pexels-tara-winstead-8386437.jpg&fm=jpg"

⚠️ 注意：Pexels 的图片 ID 随机，具体 URL 需从页面元素中提取。

Step 4：编写 HTML 卡片#

1
social-card-<slug>/
2
├── index.html       # 所有卡片帧的 HTML
3
├── render.cjs       # Puppeteer 渲染脚本
4
├── assets/          # 素材图片
5
└── output/          # 输出 PNG

1
@font-face {
2
  font-family: 'WQ';
3
  src: local('WenQuanYi Zen Hei'), local('文泉驿正黑');
4
}
5
body {
6
  font-family: 'WQ', 'Noto Sans SC', sans-serif;
7
}

Step 5：渲染为 PNG#

1
cd social-card-<slug>/
2
npm init -y
3
npm install puppeteer

1
const puppeteer = require('puppeteer');
2
const path = require('path');
3

4
(async () => {
5
  const browser = await puppeteer.launch({
6
    headless: 'new',
7
    executablePath: '/usr/bin/chromium-browser',
8
    args: ['--no-sandbox', '--disable-gpu', '--disable-software-rasterizer'],
9
  });
10
  const page = await browser.newPage();
11
  await page.setViewport({ width: 1080, height: 1440 });
12

13
  // 关键：添加 cache-busting 参数避免 Chromium 缓存旧文件
14
  const ts = Date.now();
15
  await page.goto('file://' + path.resolve(__dirname, 'index.html') + '?_=' + ts, {
16
    waitUntil: 'networkidle0', timeout: 30000
17
  });
18
  await page.evaluate(() => document.fonts.ready);
19
  await new Promise(r => setTimeout(r, 3000)); // 等字体和图片加载完成
20

21
  // 截取整个视口或特定元素
22
  await page.screenshot({ path: 'output.png', type: 'png' });
23

24
  // 或截取特定元素
25
  const el = await page.$('.frame');
26
  if (el) await el.screenshot({ path: 'output/result.png', type: 'png' });
27

28
  await browser.close();
29
})();

1
node render.cjs

1
chromium-browser --headless --no-sandbox --disable-gpu \
2
  --screenshot=output.png --window-size=1080,1440 \
3
  "file://$(pwd)/index.html?_=$(date +%s)"

Step 6：预览与迭代#

用 file_read 预览生成的 PNG：

1
file_read("path/to/output.png")

风格特征#

• 暖色调纸纹背景（#fcf6eb / #faf3e8）
• SVG 手绘装饰元素：云朵、星星、爱心、波浪线
• 拟人手绘感边框（虚线、波纹线）
• 柔和 pastel 配色：粉色 #ffb5c2、蓝色 #b5d8f7、黄色 #f9d56e
• 圆角、松散的手绘图标（纯 SVG 绘制）
• 无科技感图片，用 SVG 可爱插画代替

手绘装饰 SVG 示例#

1
<!-- 云朵 -->
2
<path d="M28 62 Q10 50 16 33 Q10 16 28 14 Q32 -2 56 4 Q72 -4 90 8 Q108 0 116 20 Q128 26 120 45 Q126 56 108 62 Q88 68 66 58 Q44 68 28 62Z" fill="#f0e0c8" stroke="#d4c4a8" stroke-width="2.5"/>
3

4
<!-- 星星 -->
5
<path d="M16 2 L19 12 L30 12 L21 19 L24 30 L16 23 L8 30 L11 19 L2 12 L13 12Z" fill="#f9d56e" stroke="#e8b84a" stroke-width="2"/>
6

7
<!-- 手绘分割线 -->
8
<path d="M10 13 Q40 6 70 12 Q100 18 130 10 Q160 4 190 14 Q220 22 250 9 Q280 2 295 14 Q310 18 320 12" stroke="#e0b896" stroke-width="3" fill="none" stroke-linecap="round"/>

手机阅读字体大小经验值（1080px 画幅）#

流程卡片布局#

使用垂直时间线布局：

1
[步骤1图标] 步骤1标题
2
             步骤1描述文字
3
     |  (手绘竖线连接)
4
[步骤2图标] 步骤2标题
5
             步骤2描述文字
6
     |
7
[步骤3图标] 步骤3标题
8
             步骤3描述文字

每个步骤由 item 容器实现：

• icn（固定宽度 76-90px，SVG 图标）
• tx（弹性宽度，tit + desc）
• 竖线用绝对定位 step-line 或伪元素

1. 修改 HTML 后渲染图片无变化#

原因：Chromium 会缓存 file:// URL 的内容，即使文件已更新。

解决方案：在 URL 后添加随机查询参数（cache-busting）：

1
const ts = Date.now();
2
await page.goto('file://.../index.html?_=' + ts, ...);

或使用全新的文件名/目录路径，彻底避免缓存。

2. 汉字渲染为方块或乱码#

原因：系统缺少中文字体，或 Google Fonts 在离线环境无法加载。

解决方案：

• 使用本地字体：@font-face { src: local('WenQuanYi Zen Hei'), local('文泉驿正黑'); }
• 不要依赖 @import url(https://fonts.googleapis.com/...) 加载中文字体
• 验证字体可用：fc-list :lang=zh

3. Chromium 截图内容空白#

可能原因：

• --screenshot 参数与文件路径配合问题
• 字体加载超时

解决方案：改用 Puppeteer + waitForSelector + document.fonts.ready 确保完整加载。

4. Puppeteer 找不到 Chromium#

1
# 指定系统预装的 Chromium
2
executablePath: '/usr/bin/chromium-browser'