card-quote · Quote Cards
Generate 16:9 landscape quote and data cards for sharing on Weibo, Zhihu, WeChat Official Accounts, or X/Twitter.
Two layouts: quote cards (one hero statement, large centered type + attribution) and data cards (a key number set — one oversized headline figure with supporting metrics in a row). Deterministic HTML rendering screenshotted to image, typeset under the card-design system. Portrait Xiaohongshu cards and marketing posters are covered by sibling skills.
Example invocation: "Turn this line into a quote card: 'Compound interest is the eighth wonder of the world.'"
Full brief
Positioning
card-quote is a landscape share-card generator: turn one statement or one set of numbers into a 16:9 card. It does deterministic layout rendering — not AI image generation.
Core capabilities
- Quote-card layout: 16:9 landscape, one hero quote centered (large but light type, 2–3 lines max), attribution below, small tag top-left, brand watermark bottom-right.
- Data-card layout: one oversized headline number centered + 2–4 supporting metrics in a row; optional conclusion/source footnote for credibility.
- Design-system constraints: reads the card-design system first (pick stance, lock palette, larger-means-lighter type); bans gradient text, heavy black headlines, and center-everything AI cheapness.
- Deterministic rendering: HTML → shared render script (playwright + chromium) screenshotted to image; never manual screenshots.
- Platform adaptation: Weibo (landscape with caption), Zhihu (data card + conclusion), Official Accounts (in-article art), X/Twitter (handle attribution allowed).
Workflow
- Decide "statement" vs. "numbers"; pick the quote or data layout
- Pick style and lock palette per the card-design system
- Generate the HTML (1600×900)
- Run the render script → image under
outputs/<topic>/
Inputs & outputs
| Input | Notes |
|---|---|
| Quote / statement text | Required for quote cards |
| Headline number + supporting metrics | Required for data cards |
| Attribution / source | Optional; brand or source name when no personal handle |
| Style preference | Optional; stance per card-design |
Output: 1600×900 PNG card under outputs/<topic>/.
Boundaries with adjacent skills
All three are "HTML → screenshot"; they differ only in format and scenario:
| Skill | Lane |
|---|---|
| card-quote (this) | 16:9 landscape quote/data cards for Weibo/Zhihu/X/Official Accounts |
| card-xiaohongshu | 1080×1440 portrait Xiaohongshu knowledge cards, swipeable sets; for multi-point, packaged insights |
| poster-hero | 1080×1920 portrait marketing posters/moments graphics; headline + selling points + QR |
| ai-image-gen | AI-generated imagery, not deterministic layout |
Fit
- Quote-spreading cards for opinion-driven accounts
- Visual sharing of data reports and research conclusions
- Official Account article art and cover extensions
- X/Twitter visuals for global accounts
Before you start
- No API key; first use needs playwright + chromium installed.
- The render script bounds CDN/font loading (default 20s timeout) so it never hangs; needs an env proxy for Tailwind/Google Fonts.
card-quote is part of the Aiglade Skill library. Invoke it from the Aiglade chat box in plain language.