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. Start from
assets/card-template.html; its --card-width value is the canonical width and the screenshot
script reads the rendered element width automatically.
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, color variables, width, and noise texture live in assets/card-template.html. The
guidance below covers only choices that vary by content.
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).
- Copy
assets/card-template.html to the requested workspace location and fill in the content.
- Screenshot the
.card element using the bundled script (path is relative to this skill's directory):node scripts/screenshot.mjs <file>.html .card
It uses Playwright to open the file directly, reads the rendered card width, renders at 2x DPR,
writes <file>.png next to the HTML, and prints that path. 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.
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 an available frontend-building skill.
- The user wants a print poster or document artifact → use an available document or image-design skill.
Keep create-visual-card scoped to one decorative, single-frame card image.
1---2name: create-visual-card3description: Creates one decorative, single-frame visual card from supplied content as self-contained HTML and a shareable PNG. Use for information, quote, knowledge, social, summary, or cover cards, including “把要点做成一张图” and “做张卡片”. Use hai-visual-report for multi-section or scroll-length reports; use an available frontend or document-design skill for interactive pages or print artifacts.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`. Start from13`assets/card-template.html`; its `--card-width` value is the canonical width and the screenshot14script reads the rendered element width automatically.1516For the final handoff format, read `references/output-template.md` after generating and checking the card, and fill every field it lists.1718## Design System1920The font link, color variables, width, and noise texture live in `assets/card-template.html`. The21guidance below covers only choices that vary by content.2223### Type Scale2425| Role | Size | Weight | Notes |26|-------------|------------|--------|------------------------------------|27| Super title | 72-84px | 900 | Core visual hook, lh: 1.0, ls: -0.04em |28| Section | 56px | 700 | lh: 1.1 |29| Sub section | 32px | 700 | lh: 1.2 |30| Body | 18-20px | 400 | lh: 1.6, color: #1a1a1a |31| Caption | 15-16px | 400 | lh: 1.5, color: #555 |32| Tag/meta | 13px | 700 | ls: 0.15em, uppercase |3334### Spacing3536- Container padding: 40-50px37- Paragraph gap: ≤ 1.5em38- Component gap: 30-40px3940### Visual Decorations4142- Noise texture: SVG data-URI at 4% opacity (in skeleton)43- Heavy divider: 4-6px solid bar in accent color, width ~100px44- Background blocks: `rgba(0,0,0,0.03)`45- Base background: `#f5f3ed` (warm paper)4647## Layout Strategy4849Pick layout by content density — this drives the whole composition:5051**Low density** (few key points): "Big character" — blow up titles to 80px+, core data to 120px+. Let typography be the design.5253**Medium density**: Balanced sections with accent bars and background blocks.5455**High density** (lots of data): Multi-column newspaper grid, 2-3 columns, vertical dividers.5657## Workflow58591. Analyze content density (high/medium/low) in one sentence.602. Choose layout strategy based on density (see Layout Strategy above).613. Copy `assets/card-template.html` to the requested workspace location and fill in the content.624. Screenshot the `.card` element using the bundled script (path is relative to this skill's directory):63 ```bash64 node scripts/screenshot.mjs <file>.html .card65 ```66 It uses Playwright to open the file directly, reads the rendered card width, renders at 2x DPR,67 writes `<file>.png` next to the HTML, and prints that path. If Chromium is missing, run68 `npx playwright install chromium` first.695. Present the PNG to the user inline and provide the absolute HTML and PNG paths.706. 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.7172## Design Philosophy7374Swiss internationalism structure + modern magazine visual impact. Rigorous grid, bold typography, warm paper texture. Every element earns its space.7576## Use a different skill when7778- 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.79- The user wants an interactive page, app, or reusable UI component → use an available frontend-building skill.80- The user wants a print poster or document artifact → use an available document or image-design skill.8182Keep create-visual-card scoped to one decorative, single-frame card image.
hylarucoder