Comparison Card

Q: What does the Comparison Card AI skill do?

对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流。 用 HTML+CSS 渲染成可截图的视觉卡片，适合小红书/微博等平台分享。 使用时机：用户说"做个对比图"、"A vs B"、"参数对比"、"优劣对比"、 "一图流"、"对比表"、"哪个好"、"对比一下"。 和 chart-visualization 的区别：chart 做数据图表（柱状图/折线图），comparison-card 做对比表/一图流。 和 infographic 的区别：infographic 做多维信息图，comparison-card 专注 A vs B 对比。

OrganizationPopular

ZJU-REAL

comparison-card

对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流。用 HTML+CSS 渲染成可截图的视觉卡片，适合小红书/微博等平台分享。使用时机：用户说"做个对比图"、"A vs B"、"参数对比"、"优劣对比"、 "一图流"、"对比表"、"哪个好"、"对比一下"。和 chart-visualization 的区别：chart 做数据图表（柱状图/折线图），comparison-card 做对比表/一图流。和 infographic 的区别：infographic 做多维信息图，comparison-card 专注 A vs B 对比。

Overview

Publisher	ZJU-REAL
Repository	`Easel`
Skill name	`comparison-card`
Stars	1.2K
Forks	175
Bundled files	2
License	Apache-2.0
Links	Skill source Repository Homepage

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
2 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by ZJU-REAL on GitHub. Read the source before you install it.

Installation

Install the Comparison Card AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/ZJU-REAL/Easel.git /tmp/Easel
mkdir -p .claude/skills
cp -r /tmp/Easel/skills/openclaw/comparison-card .claude/skills/comparison-card

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Comparison Card in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Comparison Card on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Comparison Card is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

对比图 / 一图流

生成 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 — 解析对比需求

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

Step 2 — 数据收集与整理

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

直接结构化为对比矩阵

如果用户只给了对象名，没给数据：

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

将数据整理为标准矩阵：

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

Step 3 — 生成 HTML 卡片

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

Step 4 — 视觉优化

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

Step 5 — 写入文件

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

Step 6 — 渲染出图（勿手动截图）

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

bash
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。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

EASEL-META.md1 KB
references/comparison-template.html9 KB

Frequently asked questions

What does the Comparison Card AI skill do?

Why use Comparison Card on TypingMind?

Because you install it once and use it with any model. Comparison Card is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Comparison Card in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Comparison Card?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Comparison Card?

As many as you like. As long as a model supports skills, you can use Comparison Card with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Comparison Card AI skill free?

Yes. It is published on GitHub by ZJU-REAL under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Brand

nextlevelbuilder

OrganizationPopular

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

Design System

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide…

Design

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML…

Slides

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

对比图 / 一图流

输入

布局模式说明

输出

执行步骤

Step 1 — 解析对比需求

Step 2 — 数据收集与整理

Step 3 — 生成 HTML 卡片

Step 4 — 视觉优化

Step 5 — 写入文件

Step 6 — 渲染出图（勿手动截图）

Profile 感知

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now