对比图 / 一图流

SkillMedia

Comparison image / one-pager: generates A vs B parameter comparison graphics, pros-and-cons comparison tables, and product spec one-pagers. Renders as screenshot-ready visual cards with HTML+CSS, suitable for sharing on platforms like Xiaohongshu/Weibo. Use when the user says "做个对比图" (make a compari

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the 对比图 / 一图流 skill

What this skill tells your AI

The instructions your AI receives, as published by zju-real/easel in skills/openclaw/comparison-card/SKILL.md and read by ahel’s review.

生成 A vs B 可视化对比卡片,一张截图说清楚差异,适合社媒分享。

⚠️ 生成前先读 card-design 设计系统(锁配色/字体层级/填满画幅/去 AI 廉价感)。对比图用「对比表」骨架(左右双栏、≥5 对比行、行高一致),避免渐变、emoji、底部死空白。

输入

字段必填说明
items要对比的 2-4 个对象(名称)
dimensions对比维度列表(如价格、性能、功能等);不指定则自动提取
data结构化对比数据(JSON/表格);不提供则由 SKILL 调研填充
layout布局模式:table(默认)/ versus / pros_cons
size尺寸预设:xiaohongshu(1080x1440) / weibo(1080x1080) / wechat(1080x1920) / auto
style视觉风格:走 card-design 风格库(瑞士极简/杂志编辑/高奢黑金…),不指定则按内容品类/Profile 选一个立场
winner是否标注胜出项:true / false(默认 false

布局模式说明

模式描述适用场景
table经典参数对比表,行=维度,列=对象多维度、多参数的产品对比
versus左右对称 VS 布局,中间分割线两个对象的直观对比
pros_cons优劣势分栏,绿色优势/红色劣势单一产品的优劣分析

输出

  • 完整的 HTML 文件,可在浏览器打开并截图
  • 卡片尺寸固定(px),截图即所见
  • 写入 outputs/ 目录

执行步骤

Step 1 — 解析对比需求

  1. 确认对比对象(2-4 个)
  2. 确认对比维度:
    • 用户指定了 → 直接用
    • 用户没指定 → 根据对象类型自动推断常见对比维度(如手机:价格/屏幕/芯片/电池/摄像头)
  3. 确认布局模式和尺寸

Step 2 — 数据收集与整理

如果用户提供了完整数据:

  • 直接结构化为对比矩阵

如果用户只给了对象名,没给数据:

  • 用 WebSearch 查询各对象的关键参数
  • 交叉验证数据准确性(至少 2 个来源)
  • 标注数据来源

将数据整理为标准矩阵:

{
  "items": ["A", "B"],
  "dimensions": [
    {"name": "价格", "values": ["¥2999", "¥3499"], "winner": "A"},
    {"name": "性能", "values": ["骁龙 8 Gen3", "A17 Pro"], "winner": "B"}
  ]
}

Step 3 — 生成 HTML 卡片

  1. 读取 references/comparison-template.html 作为基础模板
  2. 根据 layout 模式选择布局结构
  3. 填充数据到模板
  4. 应用 card-design 选定风格的配色/字体(锁 spec,全表一致;不自造配色)
  5. 设置卡片尺寸(size 参数)
  6. 如果 winner 为 true,用视觉标记(高亮/皇冠图标)标注胜出项

Step 4 — 视觉优化

  • 确保文字不溢出单元格
  • 数值类数据右对齐,文本类左对齐
  • 胜出项用 card-design 选定风格的强调色高亮,劣势项用中性灰(不写死某个绿)
  • 底部加数据来源说明和日期
  • 遵守 card-design 铁律:禁蓝紫科技渐变、禁 emoji 当图标、填满不留死空白

Step 5 — 写入文件

将 HTML 写入 outputs/ 目录,文件名格式:{A}_vs_{B}_对比_{日期}.html

Step 6 — 渲染出图(勿手动截图)

用共享脚本自动渲染成图:

python skills/shared/scripts/render_card.py \
  --html outputs/主题名/assets/A_vs_B_对比.html \
  --out outputs/主题名/A_vs_B_对比.png \
  --full-page --width 1080 --height 1440

尺寸按 Profile 匹配的平台预设调整(默认小红书 1080×1440)。脚本用 playwright+chromium,对 CDN/字体有界超时不卡死;首次需 pip install playwright && playwright install chromium

Profile 感知

  • 有 Profile:从 style.md 读取品牌配色,替换模板默认色;从 identity.md 读取账号名作为水印;从 platforms.md 读取主力平台,自动匹配尺寸
  • 无 Profile:使用默认清新风格配色,无水印,默认小红书尺寸(1080x1440)

自研溯源与参考项目见同目录 EASEL-META.md

Signals

GitHub stars
1k
Forks
143
Last commit
Sep 2026

ahel review

  • K1binfo
    installs-packages

Automated review, not a security audit. Ruleset v1+k2.

Advanced
Catalog kind
skill
Gateway key
comparison-card
Source
github.com/zju-real/easel