comparison-card · Comparison Cards
An A-vs-B comparison visualizer: it turns the key parameters of 2–4 subjects into a rendered card — HTML+CSS output at fixed dimensions, ready to screenshot and share on social platforms.
Three layouts are available: parameter table (table), side-by-side VS (versus), and pros/cons columns (pros_cons). Built-in size presets cover Xiaohongshu 1080×1440, Weibo 1080×1080, and WeChat 1080×1920. When no data is provided, it can research key specs online and cite sources, apply a locked visual style from the design library, and optionally mark the winning item per dimension.
Example invocation: "Make an A vs B spec comparison card using the versus layout."
Full brief
Positioning
comparison-card is a comparison-visualization tool built around one promise: explain the differences in a single screenshot. It organizes multi-dimensional specs for 2–4 subjects into a shareable card for social platforms. It does exactly one layout family — comparison tables and one-shot summary cards.
Core capabilities
- Three layouts:
table(classic spec matrix, dimensions as rows, subjects as columns),versus(symmetrical left-right VS layout),pros_cons(split pros/cons columns). - Data assembly: provided structured data is laid out directly; with only subject names, it researches key specs online, cross-checks sources, and stamps the card with data sources and date.
- Size presets:
xiaohongshu(1080×1440) /weibo(1080×1080) /wechat(1080×1920) — fixed card dimensions, what you screenshot is what you get. - Locked styling: follows the card-design design system — one palette and typeface per job, applied consistently, no ad-hoc color mixing.
- Winner marking: optional
winnerflag highlights the leading item per dimension with color or icon.
Workflow
- Confirm subjects (2–4) and dimensions (user-specified or auto-inferred)
- Collect and normalize data (user-provided or researched online, cross-checked into a standard matrix)
- Fill the base template as HTML per the chosen layout and style
- Visual check: no text overflow, numeric values right-aligned / text left-aligned, source line and date at the bottom
- Write to
outputs/and auto-render to image via the shared script (no manual screenshots)
Inputs & outputs
| Input | Notes |
|---|---|
| items | Required — subject names (2–4) |
| dimensions | Optional — comparison dimensions; auto-extracted if omitted |
| data | Optional — structured comparison data; researched online if omitted |
| layout | Optional — table / versus / pros_cons |
| size | Optional — xiaohongshu / weibo / wechat / auto |
| style | Optional — from the card-design style library |
| winner | Optional — whether to mark winning items |
Output: a complete HTML file (openable in a browser for screenshotting) plus the auto-rendered PNG, both under outputs/.
Boundaries with adjacent skills
| Skill | Lane |
|---|---|
| comparison-card (this) | A-vs-B comparison tables and one-shot cards — presents "differences" |
| chart-visualization | Data charts (bar/line) — presents "numeric relationships" |
| infographic | Multi-dimensional infographics — presents "complex information structures" |
Fit
- Buying guides: one-shot spec cards for two phones, earbuds, or laptops
- Service/platform shootouts: side-by-side pros-and-cons matrices
- Shareable social content: compressing research conclusions into one repostable image
Before you start
- No API key needed; online research depends on available search capability.
- Data quality depends on input quality: for critical specs, supply official sources and double-check researched figures.
- First render requires
pip install playwright && playwright install chromium.
comparison-card is part of the Aiglade Skill library. Invoke it from the Aiglade chat box in plain language.