Create Visual Card
Generate magazine-quality visual information cards as self-contained HTML files, then render them to a shareable PNG.
Output
A single .html file with embedded CSS, rendered to a .png. The card width must equal the screenshot width argument (default 1024px) so the .card element fills the frame with no uneven margins — keep .card { width }, the screenshot command's width arg, and this value in sync.
For the final handoff format, read references/output-template.md after generating and checking the card, and fill every field it lists.
Design System
The font <link>, :root color variables, and noise-texture SVG live in the Template Skeleton below (the copy-pasteable artifact). This section holds only the decisions the skeleton can't encode: type scale, spacing, and density intent.
Type Scale
| Role |
Size |
Weight |
Notes |
| Super title |
72-84px |
900 |
Core visual hook, lh: 1.0, ls: -0.04em |
| Section |
56px |
700 |
lh: 1.1 |
| Sub section |
32px |
700 |
lh: 1.2 |
| Body |
18-20px |
400 |
lh: 1.6, color: #1a1a1a |
| Caption |
15-16px |
400 |
lh: 1.5, color: #555 |
| Tag/meta |
13px |
700 |
ls: 0.15em, uppercase |
Spacing
- Container padding: 40-50px
- Paragraph gap: ≤ 1.5em
- Component gap: 30-40px
Visual Decorations
- Noise texture: SVG data-URI at 4% opacity (in skeleton)
- Heavy divider: 4-6px solid bar in accent color, width ~100px
- Background blocks:
rgba(0,0,0,0.03)
- Base background:
#f5f3ed (warm paper)
Layout Strategy
Pick layout by content density — this drives the whole composition:
Low density (few key points): "Big character" — blow up titles to 80px+, core data to 120px+. Let typography be the design.
Medium density: Balanced sections with accent bars and background blocks.
High density (lots of data): Multi-column newspaper grid, 2-3 columns, vertical dividers.
Workflow
- Analyze content density (high/medium/low) in one sentence.
- Choose layout strategy based on density (see Layout Strategy above).
- Write complete HTML with embedded CSS to the workspace, starting from the Template Skeleton.
- Screenshot the
.card element using the bundled script (path is relative to this skill's directory):node scripts/screenshot.mjs <file>.html .card 1024
It uses Playwright to open the file directly (no server), renders at 2x DPR, writes <file>.png next to the HTML, and prints that path to stdout — capture it for the handoff. If chromium is missing, run npx playwright install chromium first.
- Present the PNG to the user inline and provide the absolute HTML and PNG paths.
- Self-check against the four QA items in
references/output-template.md (screenshot generated, body text ≥ 18px, mobile readability, visual hierarchy) — it is the single source of truth for the handoff.
Template Skeleton
Start from this. The card width is 1024px to match the screenshot width arg (step 4).
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root { --color-accent: #d4440f; --color-bg: #f5f3ed; --color-text: #1a1a1a; --color-muted: #555; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--color-bg); }
.card { width: 1024px; max-width: 100%; margin: 0 auto; background: var(--color-bg); padding: 50px; }
/* noise overlay */
.card::before { content: ''; position: fixed; inset: 0; opacity: 0.04; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.main-title { font-family: 'Noto Serif SC', serif; font-size: 80px; font-weight: 900; line-height: 1.0; color: #0a0a0a; letter-spacing: -0.04em; }
.accent-bar { height: 6px; width: 100px; background: var(--color-accent); margin: 10px 0; }
.body { font-family: 'Inter', 'Noto Sans SC', sans-serif; font-size: 19px; line-height: 1.6; color: var(--color-text); }
.tag { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted); }
.caption { font-size: 15px; line-height: 1.5; color: var(--color-muted); }
</style>
</head>
<body>
<div class="card">
<!-- build content here -->
</div>
</body>
</html>
(assets/ is intentionally empty — it's where local font fallbacks or bundled images would go if added later; the skeleton currently loads fonts from a CDN.)
Design Philosophy
Swiss internationalism structure + modern magazine visual impact. Rigorous grid, bold typography, warm paper texture. Every element earns its space.
Use a different skill when
- The user wants a multi-section / scroll-length report (idea, PRD, plan, review turned into a presentation-like web page) → use
hai-visual-report, not a single card.
- The user wants an interactive page, app, or reusable UI component → use
frontend-design.
- The user wants a print poster as PNG/PDF (canvas/document output, not a web card) → use
canvas-design.
Keep create-visual-card scoped to one decorative, single-frame card image.
1---2name: create-visual-card3description: Generate a magazine-quality visual card as a single self-contained HTML file (embedded CSS, Swiss-grid + bold-type design system), then screenshot it to a shareable PNG and hand back both files. Use this whenever the user wants content turned into a visually rich card or shareable image — even if they don't say the word "card." Triggers: make/create/generate/design a visual card, info card, knowledge card, quote card, social card, summary/takeaway/cheatsheet card; 信息卡, 知识卡片, 金句卡, 语录卡, 做张卡片, 设计一张卡片, 把这段内容做成卡片, 把要点排成一张图, 总结成一张图, 小红书封面, 公众号封面图, 朋友圈配图. Prefer this over generic HTML/frontend skills when the goal is one decorative card image. When the content is a multi-section report instead of a single card, use hai-visual-report.4---56# Create Visual Card78Generate magazine-quality visual information cards as self-contained HTML files, then render them to a shareable PNG.910## Output1112A single `.html` file with embedded CSS, rendered to a `.png`. The card width must equal the screenshot width argument (default **1024px**) so the `.card` element fills the frame with no uneven margins — keep `.card { width }`, the screenshot command's width arg, and this value in sync.1314For the final handoff format, read `references/output-template.md` after generating and checking the card, and fill every field it lists.1516## Design System1718The font `<link>`, `:root` color variables, and noise-texture SVG live in the **Template Skeleton** below (the copy-pasteable artifact). This section holds only the decisions the skeleton can't encode: type scale, spacing, and density intent.1920### Type Scale2122| Role | Size | Weight | Notes |23|-------------|------------|--------|------------------------------------|24| Super title | 72-84px | 900 | Core visual hook, lh: 1.0, ls: -0.04em |25| Section | 56px | 700 | lh: 1.1 |26| Sub section | 32px | 700 | lh: 1.2 |27| Body | 18-20px | 400 | lh: 1.6, color: #1a1a1a |28| Caption | 15-16px | 400 | lh: 1.5, color: #555 |29| Tag/meta | 13px | 700 | ls: 0.15em, uppercase |3031### Spacing3233- Container padding: 40-50px34- Paragraph gap: ≤ 1.5em35- Component gap: 30-40px3637### Visual Decorations3839- Noise texture: SVG data-URI at 4% opacity (in skeleton)40- Heavy divider: 4-6px solid bar in accent color, width ~100px41- Background blocks: `rgba(0,0,0,0.03)`42- Base background: `#f5f3ed` (warm paper)4344## Layout Strategy4546Pick layout by content density — this drives the whole composition:4748**Low density** (few key points): "Big character" — blow up titles to 80px+, core data to 120px+. Let typography be the design.4950**Medium density**: Balanced sections with accent bars and background blocks.5152**High density** (lots of data): Multi-column newspaper grid, 2-3 columns, vertical dividers.5354## Workflow55561. Analyze content density (high/medium/low) in one sentence.572. Choose layout strategy based on density (see Layout Strategy above).583. Write complete HTML with embedded CSS to the workspace, starting from the Template Skeleton.594. Screenshot the `.card` element using the bundled script (path is relative to this skill's directory):60 ```bash61 node scripts/screenshot.mjs <file>.html .card 102462 ```63 It uses Playwright to open the file directly (no server), renders at 2x DPR, writes `<file>.png` next to the HTML, and prints that path to stdout — capture it for the handoff. If chromium is missing, run `npx playwright install chromium` first.645. Present the PNG to the user inline and provide the absolute HTML and PNG paths.656. Self-check against the four QA items in `references/output-template.md` (screenshot generated, body text ≥ 18px, mobile readability, visual hierarchy) — it is the single source of truth for the handoff.6667## Template Skeleton6869Start from this. The card width is **1024px** to match the screenshot width arg (step 4).7071```html72<!DOCTYPE html>73<html lang="zh-CN">74<head>75<meta charset="UTF-8">76<meta name="viewport" content="width=device-width, initial-scale=1.0">77<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">78<style>79 :root { --color-accent: #d4440f; --color-bg: #f5f3ed; --color-text: #1a1a1a; --color-muted: #555; }80 * { margin: 0; padding: 0; box-sizing: border-box; }81 body { background: var(--color-bg); }82 .card { width: 1024px; max-width: 100%; margin: 0 auto; background: var(--color-bg); padding: 50px; }83 /* noise overlay */84 .card::before { content: ''; position: fixed; inset: 0; opacity: 0.04; pointer-events: none;85 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");86 }87 .main-title { font-family: 'Noto Serif SC', serif; font-size: 80px; font-weight: 900; line-height: 1.0; color: #0a0a0a; letter-spacing: -0.04em; }88 .accent-bar { height: 6px; width: 100px; background: var(--color-accent); margin: 10px 0; }89 .body { font-family: 'Inter', 'Noto Sans SC', sans-serif; font-size: 19px; line-height: 1.6; color: var(--color-text); }90 .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted); }91 .caption { font-size: 15px; line-height: 1.5; color: var(--color-muted); }92</style>93</head>94<body>95<div class="card">96 <!-- build content here -->97</div>98</body>99</html>100```101102(`assets/` is intentionally empty — it's where local font fallbacks or bundled images would go if added later; the skeleton currently loads fonts from a CDN.)103104## Design Philosophy105106Swiss internationalism structure + modern magazine visual impact. Rigorous grid, bold typography, warm paper texture. Every element earns its space.107108## Use a different skill when109110- The user wants a multi-section / scroll-length **report** (idea, PRD, plan, review turned into a presentation-like web page) → use `hai-visual-report`, not a single card.111- The user wants an interactive page, app, or reusable UI component → use `frontend-design`.112- The user wants a print poster as PNG/PDF (canvas/document output, not a web card) → use `canvas-design`.113114Keep create-visual-card scoped to one decorative, single-frame card image.
rabbit-ivan