comparison-card · 对比卡片
A vs B 参数对比与一图流 skill：将 2–4 个对比对象的关键参数整理成可视化卡片，HTML+CSS 渲染为固定尺寸图片，适合截图分享。
三种布局（参数表 / VS 对阵 / 优劣分栏），小红书/微博/微信三档尺寸预设；缺数据可联网调研并标注来源，支持风格库统一视觉、按需标注胜出项。
调用示例：在聊天框中说"做一张 A 和 B 的参数对比图，用 versus 布局"。
产品详解
定位
comparison-card 是"一张截图说清楚差异"的对比可视化工具：把 2–4 个对象的多维度参数整理成卡片，一张图讲完对比结论，直接用于社媒分享。它只负责对比表/一图流这一种版式。
核心能力
- 三种布局：
table（经典参数对比表，行=维度、列=对象）、versus（左右对称 VS 布局）、pros_cons（优劣势分栏，优势/劣势分区呈现）。 - 数据整理：用户提供结构化数据则直接成表；只给对象名时可联网调研关键参数、交叉验证来源，并在卡片底部标注数据来源与日期。
- 尺寸预设：
xiaohongshu(1080×1440) /weibo(1080×1080) /wechat(1080×1920)，卡片尺寸固定，截图即所见。 - 风格锁定：生成前遵循 card-design 设计系统，按内容品类锁定一套配色与字体，全表一致，不自造配色。
- 胜出项标注：可选
winner参数，用高亮或图标标记各维度占优项。
工作流程
- 确认对比对象（2–4 个）与对比维度（用户指定则用，未指定则自动推断）
- 收集并整理对比数据（用户提供或联网调研，交叉验证后成标准矩阵）
- 套用基础模板生成 HTML，按所选布局与风格填充配色/字体
- 视觉检查：文字不溢出、数值右对齐/文本左对齐、底部加数据来源与日期
- 写入
outputs/目录，用共享脚本自动渲染成图（不手动截图）
输入与输出
| 输入 | 说明 |
|---|---|
| items | 必填，对比对象名称（2–4 个） |
| dimensions | 选填，对比维度；不指定则自动提取 |
| data | 选填，结构化对比数据；不提供则联网调研填充 |
| layout | 选填，table / versus / pros_cons |
| size | 选填，xiaohongshu / weibo / wechat / auto |
| style | 选填，走 card-design 风格库 |
| winner | 选填，是否标注胜出项 |
输出：完整的 HTML 文件（可浏览器打开截图），以及自动渲染的 PNG 图片，均落盘于 outputs/。
与相邻 skill 的区别
| skill | 分工 |
|---|---|
| comparison-card（本） | A vs B 对比表/一图流，专注呈现"差异" |
| chart-visualization | 数据图表（柱状图/折线图等），呈现"数值关系" |
| infographic | 多维信息图，呈现"复杂信息结构" |
适用场景
- 产品选购指南：两款手机/耳机/笔记本的参数一图流
- 平台/服务横向评测：多方案优劣对比表
- 社媒干货分享：把调研结论压缩成一张可转发的图
使用前准备
- 无需 API key；联网调研能力依赖可用的搜索能力。
- 数据准确性依赖输入质量：重要参数建议提供官方来源，用户对调研填充的数据应做二次核对。
- 首次渲染需
pip install playwright && playwright install chromium。
comparison-card 隶属于 Aiglade Skill 库。在 Aiglade 聊天框中用自然语言描述需求即可调用。