跳到正文
cccskills
免费在 GitHub 公开

comparison-card

Create shareable comparison cards showing product specifications, differences, or pros and cons. Organize supplied data or research missing details, then produce fixed-size HTML and PNG cards using table, side-by-side, or pros-and-cons layouts with sources and dates.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

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

集成工具Playwright

实测评分 未实测

查看安装方法

适用场景

  • Compare product specifications in one image
  • Show two services side by side
  • Summarize a product's pros and cons
  • Create comparison cards for social media

包含的文件(3)

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

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

对比图 / 一图流

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Generate images from written descriptions, transform existing images with editing instructions, or create several variations. Choose image dimensions and quantity, then save the results using an OpenAI-compatible service or apimart with your own API key.

中文简介正在准备中。当前显示英语简介。

  • Generating an illustration from a written description
  • Changing an image's background using instructions
  • Creating several variations of an existing image
ZJU-REAL/Easel40312026年10月23日 更新

ai-music

免费

Generate background music for short videos, vlogs, and social posts from descriptions of mood, style, and instruments. Download MP3 audio, optionally include sung lyrics, and use shared scripts to trim tracks, adjust loudness, or add music to videos.

中文简介正在准备中。当前显示英语简介。

  • Generating background music for a vlog intro
  • Creating instrumental music to match a social post
  • Generating a sung track from supplied lyrics
ZJU-REAL/Easel40312026年10月23日 更新

Create new videos from written scene descriptions or still images using external AI services. Set the aspect ratio and duration, animate a character image, and request generated audio when the selected model supports it.

中文简介正在准备中。当前显示英语简介。

  • Generate a short video from a scene description
  • Animate a still image
  • Create character motion from a starting image
ZJU-REAL/Easel40312026年10月23日 更新

Organize generated images, videos, and text in outputs/ by date, platform, and type. Add tags, search filenames and content, produce asset lists and reports, and preview archive moves before applying them to make past work easier to reuse.

中文简介正在准备中。当前显示英语简介。

  • Organizing generated assets by date, platform, and type
  • Finding past content through keywords and tags
  • Listing assets for a specific account or platform
ZJU-REAL/Easel40312026年10月23日 更新

Reduce background noise in audio recordings or video soundtracks with three processing levels. Keep the original file, create a cleaned version, and receive a report of the settings used and file details before and after processing.

中文简介正在准备中。当前显示英语简介。

  • Reducing fan or air conditioner noise in recordings
  • Cleaning speech in podcasts and interviews
  • Reducing noise in a video's audio track
ZJU-REAL/Easel40312026年10月23日 更新

Edit audio files by trimming sections, converting formats, matching loudness, or extracting sound from videos. You can also join recordings, add fades, and change playback speed while keeping the original pitch.

中文简介正在准备中。当前显示英语简介。

  • Trim a recording to the section you need
  • Convert audio formats and match loudness
  • Extract audio from a video
ZJU-REAL/Easel40312026年10月23日 更新

查看 ZJU-REAL 的全部技能

报告此技能的问题