Self-Contained HTML Pages
SourceWeft/SourceWeft
Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.
对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流. An agent skill from ZJU-REAL/Easel.
Install Comparison Card
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ZJU-REAL/Easel comparison-card --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/openclaw/comparison-card .claude/skills/comparison-card && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .claude/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-cardType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ZJU-REAL/Easel comparison-card --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/openclaw/comparison-card .agents/skills/comparison-card && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .agents/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ZJU-REAL/Easel comparison-card --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/openclaw/comparison-card .cursor/skills/comparison-card && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .cursor/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ZJU-REAL/Easel.git --path skills/openclaw/comparison-card--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ZJU-REAL/Easel comparison-card --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/openclaw/comparison-card .gemini/skills/comparison-card && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .gemini/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ZJU-REAL/Easel comparison-cardInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/openclaw/comparison-card .github/skills/comparison-card && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .github/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ZJU-REAL/Easel --skill comparison-card -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ZJU-REAL/Easel comparison-card --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZJU-REAL/Easel.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/openclaw/comparison-card .opencode/skills/comparison-card && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "comparison-card" agent skill from https://github.com/ZJU-REAL/Easel/tree/main/skills/openclaw/comparison-card into .opencode/skills/comparison-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "comparison-card", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
comparison-card- GitHub stars
- 3.4k
- Token cost
- ~699 tokens
- SKILL.md length
- 184 words
- Files
- 3 (incl. references)
- Skills in repo
- 114
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流. An agent skill from ZJU-REAL/Easel.
- Works in 6 steps: 解析对比需求 → 数据收集与整理 → 生成 HTML 卡片 → …
- Tasks that involve Infographics
- SKILL.md covers 输入, 输出, 执行步骤 and Profile 感知
- Calls python, pip and playwright
What it does
Comparison Card is an agent skill from ZJU-REAL/Easel. 对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流。 用 HTML+CSS 渲染成可截图的视觉卡片，适合小红书/微博等平台分享。 使用时机：用户说"做个对比图"、"A vs B"、"参数对比"、"优劣对比"、 "一图流"、"对比表"、"哪个好"、"对比一下"。 和 chart-visualization 的区别：chart 做数据图表（柱状图/折线图），comparison-card 做对比表/一图流。 和 infographic 的区别：infographic 做多维信息图，comparison-card 专注 A vs B 对比。
Its SKILL.md is about 700 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `EASEL-META.md`).
It sits in Media & Creative, covering Infographics. It works with Playwright. The repository describes itself as: An open-source AI agent for social media — discover trends, create content, publish everywhere, and learn what works across Xiaohongshu, Douyin, Zhihu, Bilibili, and more.🎨一个开源的… The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Infographics
Example prompts
- “A vs B”
- “/comparison-card”
Requirements
- Python 3
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 278f420. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
pythonpipplaywright
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Comparison Card loads about 699 tokens when it runs, and up to ~2.9k if it reads all its reference files. Until then it costs about 75 tokens; SKILL.md has 184 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from ZJU-REAL/Easel at commit 278f420, republished under its Apache-2.0 licence (© ZJU-REAL). 184 words, ~699 tokens.
Download SKILL.mdSave it as
.claude/skills/comparison-card/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- comparison-card
- description
- 对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流。 用 HTML+CSS 渲染成可截图的视觉卡片，适合小红书/微博等平台分享。 使用时机：用户说"做个对比图"、"A vs B"、"参数对比"、"优劣对比"、 "一图流"、"对比表"、"哪个好"、"对比一下"。 和 chart-visualization 的区别：chart 做数据图表（柱状图/折线图），comparison-card 做对比表/一图流。 和 infographic 的区别：infographic 做多维信息图，comparison-card 专注 A vs B 对比。
- layer
- produce
对比图 / 一图流
生成 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 个来源）
- 标注数据来源
将数据整理为标准矩阵：
{
"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 — 渲染出图（勿手动截图）
用共享脚本自动渲染成图：
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。
© ZJU-REAL, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references) in skills/openclaw/comparison-card of ZJU-REAL/Easel.
- SKILL.md
- EASEL-META.md
- references/comparison-template.html
Open the folder on GitHubat commit 278f420
Compare with similar skills
Comparison Card next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Comparison Card this skillZJU-REAL/Easel | 3.4k | — | ~699 | Automated safety check: Pass | Apache-2.0 | |
| Self-Contained HTML PagesSourceWeft/SourceWeft | 196 | — | ~817 | Automated safety check: Pass | Custom licence | |
| Guizang Social Cardsop7418/guizang-social-card-skill | 7.4k | 1 repos | ~7.8k | Automated safety check: Pass | AGPL-3.0 | |
| Visual Explainernicobailon/visual-explainer | 10k | — | ~3.5k | Automated safety check: Pass | MIT | |
| Lanshu Create AI Presenter Videocclank/lanshu-create-ai-presenter-video | 2.6k | — | ~3.6k | Automated safety check: Pass | MIT | |
| Image Generationonyx-dot-app/onyx | 32k | 1 repos | ~1.7k | Automated safety check: Pass | Custom licence |
Similar skills
Guizang Social Cards
op7418/guizang-social-card-skill
Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.
Visual Explainer
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
Lanshu Create AI Presenter Video
cclank/lanshu-create-ai-presenter-video
Turn a topic or finished script into a complete, publish-ready explainer video — led by an AI presenter from an authorized adult presenter image, or performed in one of nine visual explainer styles…
Image Generation
onyx-dot-app/onyx
Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via onyx-cli image.
Math Explainer
GordenSun/mathVideoMaker
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
More from ZJU-REAL/Easel
All 114 skills in this repoGzh Design
ZJU-REAL/Easel
微信公众号文章排版引擎：把 Markdown / Word(.docx) / PDF / 纯文本转成可直接粘贴进公众号编辑器的 HTML，自动章节编号、关键词标记、引言卡、目录、代码块、图片/GIF、作者签名；主题从 references/theme-index.md…
Skill Wechat Publisher
ZJU-REAL/Easel
微信公众号文章自动创作与发布工具。给定参考文章、文字或文档，自动搜索整理全网相关信息、生成图文并茂的公众号文章，并发布到微信公众号草稿箱。特别强调反 AI 检测写作。
Card Design
ZJU-REAL/Easel
社媒卡片视觉设计系统：提供配色、中文字体层级、满画幅布局、品类骨架和死空白/密度质检，避免模板化 PPT 与廉价 AI 感。
Ecom Details Image
ZJU-REAL/Easel
生成电商商品视觉方案：主图概念、场景图、详情页视觉方向和 AI 生图 Prompt. An agent skill from ZJU-REAL/Easel.
Infographic
ZJU-REAL/Easel
将数据或文字内容转化为可视化信息图，支持静态（AntV）和动画 GIF 两种模式。当用户需要制作信息图、数据可视化、流程图、对比图、动画图表、GIF 图表、思维导图、SWOT 分析图时调用。本地渲染信息图/GIF 动画；要单张静态图片 URL 用 chart-visualization，要 CSV/JSON→整页报告用 data-report
Novel Writer
ZJU-REAL/Easel
长篇小说/网文连载创作：从世界观、人设和三级大纲写到逐章正文，并用文件化状态维护伏笔、前情和跨章一致性. An agent skill from ZJU-REAL/Easel.
Related
Works with
Categories
Questions about Comparison Card
What does Comparison Card do?
对比图/一图流：生成 A vs B 参数对比图、优劣势对比表、产品参数一图流. An agent skill from ZJU-REAL/Easel. Comparison Card is an agent skill from ZJU-REAL/Easel.
When should I use Comparison Card?
Comparison Card fits situations like: tasks that involve Infographics.
How do I install Comparison Card in Claude Code?
Run `npx skills add ZJU-REAL/Easel --skill comparison-card -a claude-code`. Or copy the skill folder (skills/openclaw/comparison-card in ZJU-REAL/Easel) into .claude/skills/comparison-card in your project. Claude Code loads it when a task matches its description.
How do I install Comparison Card in Codex?
Run `npx skills add ZJU-REAL/Easel --skill comparison-card -a codex`. Or copy the skill folder (skills/openclaw/comparison-card in ZJU-REAL/Easel) into .agents/skills/comparison-card in your project. Codex loads it when a task matches its description.
Can I use Comparison Card in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ZJU-REAL/Easel --skill comparison-card -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/comparison-card, .gemini/skills/comparison-card, .github/skills/comparison-card and .opencode/skills/comparison-card in your project.
What does Comparison Card need to run?
Going by SKILL.md and its folder, Comparison Card needs the command-line tools its instructions call (python, pip and playwright). Our summary lists: Python 3.
Does Comparison Card access the network?
SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Comparison Card safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Comparison Card use?
Comparison Card is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Comparison Card use?
About 699 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.2k tokens, read only when the agent opens those files.
What are the alternatives to Comparison Card?
Skills that share tags, products or a category with Comparison Card: Self-Contained HTML Pages (SourceWeft/SourceWeft, 196 stars), Guizang Social Cards (op7418/guizang-social-card-skill, 7.4k stars), Visual Explainer (nicobailon/visual-explainer, 10k stars) and Lanshu Create AI Presenter Video (cclank/lanshu-create-ai-presenter-video, 2.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Comparison Card?
ZJU-REAL (a GitHub organization) maintains it in ZJU-REAL/Easel, which has 3,376 GitHub stars. The repository holds 114 skills in this directory. The repository was last updated on October 9, 2026.
Source: ZJU-REAL/Easel on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.