本文へ移動
cccskills
無料GitHub で公開

comparison-card

对比图/一图流:生成 A vs B 参数对比图、优劣势对比表、产品参数一图流。用 HTML+CSS 渲染成可截图的视觉卡片,适合小红书/微博等平台分享。使用时机:用户说"做个对比图"、"A vs B"、"参数对比"、"优劣对比"、 "一图流"、"对比表"、"哪个好"、"对比一下"。

和 chart-visualization 的区别:chart 做数据图表(柱状图/折线图),comparison-card 做对比表/一图流。和 infographic 的区别:infographic 做多维信息图,comparison-card 专注 A vs B 对比。

インストール方法を見る

含まれるファイル(3)

  • SKILL.md4.8 KB
  • EASEL-META.md920 B
  • references/comparison-template.html8.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

对比图 / 一图流

生成 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。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

通用 AI 生图:文生图 / 图生图 / 图像变体。当用户说 AI 生图、AI 画图、文生图、图生图、生成图片、生成配图、图像生成、AI 出图、AI 作图、换图、改图、图像编辑、给我画一张、生成一张图 时使用。支持 OpenAI 兼容 API 与 apimart 异步 API,用户自备 API key。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

ai-music

無料

AI 音乐 / BGM 生成:给短视频、社媒内容生成原创背景音乐 / 配乐 / 纯音乐。通过可插拔 provider(阿里 DashScope / Suno 类第三方 API)文生音乐,异步提交→轮询→下载,产物可再裁剪/归一化或加到视频。当用户说“AI 音乐”“AI 配乐”“生成 BGM”“背景音乐”“原创音乐”“AI 作曲”“纯音乐”“给视频配乐”“做首曲子”时使用。与 tts-voiceover 的区别:tts-voiceover 生成人声口播/旁白,ai-music 生成背景音乐/配乐(无人声或带演唱)。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

AI 视频生成:文生视频 / 图生视频 / 数字人首帧驱动。通过可插拔 provider(通义万相 Wan / 火山 Seedance / 快手可灵 / OpenAI 兼容)异步生成视频,用户自备 API key。当用户说 AI 视频生成、文生视频、图生视频、AI 生成视频、AI 短视频、让图片动起来、数字人视频、生成一段视频 时使用。与 video-strategy(选型/策略)、video-editing(剪辑处理)、clipify(切片)区别:本 SKILL 是从 0 用 AI 生成新视频。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

outputs/ 目录下的产物管理:按日期/平台/类型归档、打标签、搜索历史内容、生成素材清单。 当用户说"整理素材"、"归档"、"找之前的内容"、"搜索历史"、"素材管理"、 "outputs 整理"、"之前做的"时使用。 与其他 produce 层 SKILL 的区别:produce 层负责生成内容, asset-manager 负责生成后的产物管理(归档、检索、标签)。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

音频降噪:去除录音中的背景噪声、电流声、风噪、嗡嗡声,基于 ffmpeg 滤镜链(afftdn/highpass/lowpass)。 当用户说"降噪""去噪""去杂音""消除背景噪声""电流声""风噪""录音有杂音""音频降噪"时使用。 和 audio-editing 的区别:audio-editing 做剪辑/转码/音量等通用音频操作(内置 denoise 兜底),本 SKILL 专做降噪调参。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

通用音频处理:音频剪辑/裁剪、格式转码(mp3/wav/m4a/aac)、音量归一化、从视频提取音轨、多段拼接、淡入淡出、变速(保音高)。当用户说“剪音频”“裁一段”“转成 mp3”“调音量/响度”“提取音轨/扒音频”“拼接音频”“淡入淡出”“加速/减速音频”“变速不变调”时使用。与 audio-denoise 的区别:audio-denoise 专做降噪,audio-editing 做除降噪外的通用音频操作(也内置 denoise 作为兜底)。

日本語の概要は準備中です。原文の説明を表示しています。

ZJU-REAL/Easel3,5882026年10月12日 更新

ZJU-REAL のスキルをすべて見る

このスキルの問題を報告する