Visual Note Card Generator

---

name: visual-note-card

description: Generate professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics with automatic PNG export. Use this skill whenever the user asks to create a visual note, knowledge card, infographic, one-pager summary, visual summary, 知识卡片, 视觉笔记, 信息图, 一页纸总结, or any poster-style knowledge visualization. Also trigger when the user wants to summarize an article, blog post, book chapter, or concept into a structured visual card format, or when they reference an existing visual note and ask to create one in the same style. This skill produces both a self-contained HTML file and a high-quality PNG image, ready for sharing on social media or printing.

---

# Visual Note Card Generator

Create professional, information-dense visual note cards (视觉笔记/信息图) as self-contained HTML files with automatic PNG export via Playwright. The output is a structured, poster-style infographic with modular card layout, suitable for social media sharing or printing.

Design System

Before writing any code, read the reference template at `assets/template.html` for the canonical HTML/CSS structure. Then adapt the content to the user's topic.

Core Visual Identity

The design follows an **editorial knowledge card** aesthetic — high information density with clear visual hierarchy, inspired by premium magazine layouts and structured note-taking.

**Color Palette (CSS Variables):**

Users may request alternate color schemes. If so, maintain the same structural contrast ratios: one warm neutral background, one strong primary color, one accent color, and black for dark panels.

**Typography:**

**Layout — Fixed Poster Dimensions:**

Mandatory Layout Sections (Top to Bottom)

Every visual note card MUST include these sections in order:

#### 1. Top Bar

A single-line flex row with:

#### 2. Main Title Area

Two-column flex layout:

#### 3. Framework Row (Flexible Grid, Recommended 4 Columns)

A row of equal-width cards representing the core framework/model of the topic. The number of columns is flexible — choose based on the actual content:

Analyze the topic and choose the column count that best fits the natural structure. Don't force 4 columns if the concept has 3 or 5 natural parts.

**CSS implementation:** Use `grid-template-columns: repeat(N, 1fr)` where N is the chosen column count.

**Card structure (same regardless of column count):**

**Badge color rotation** (cycles through these in order):

1. `--primary` (teal)

2. `--primary` (teal)

3. `--accent` (orange)

4. `--primary-deep` (deep teal)

5. `--accent` (orange) — if 5th column exists

6. `--primary` (teal) — if 6th column exists

The framework should be a **memorable acronym** (e.g., E-K-C-F, M-P-D-G). Invent one if the source doesn't provide it.

#### 4. Two-Column Content Area

A `grid-template-columns: 1fr 1fr` layout:

**Left: Dark Panel** (`background: var(--black)`, white text)

**Right: Light Panel** (`background: var(--bg-light)`)

- A large serif number (`Playfair Display 36px`, teal)

- Bold title line

- 1–2 lines of description with `<strong>` keywords

#### 5. Bottom Highlight Bar

Full-width bar with `background: var(--primary-dark)`:

#### 6. Footer

Flex row:

Content Strategy

When the user provides a topic (or an article URL/text):

1. **Extract or synthesize a 4-part framework** — find the core structural model. If one doesn't exist, create a meaningful decomposition with a memorable acronym.

2. **Write a provocative thesis** — the right-side subtitle should be a strong, opinionated claim, not a bland description.

3. **Dark panel = "Story + Transformation"** — use this for narrative content: problems, transitions, role changes, paradigm shifts.

4. **Light panel = "Pitfalls or Insights"** — use this for actionable numbered takeaways.

5. **Bottom formula** — distill the entire card into one equation-style summary.

6. **All text is Chinese** except for: the main English title line, technical terms, framework acronyms, and footer labels.

Output

Default: HTML + PNG

By default, generate **both** an HTML file and a PNG image:

1. **Generate the HTML** — single self-contained `.html` file with all CSS inline. No external dependencies except Google Fonts and html2canvas CDN. Save to `/mnt/user-data/outputs/`.

2. **Generate the PNG** — run the bundled `scripts/html2png.py` script to render the HTML into a high-quality PNG image.

python <skill-path>/scripts/html2png.py /mnt/user-data/outputs/card.html /mnt/user-data/outputs/card.png --scale=1.5

Present **both** files to the user (PNG first, then HTML). The PNG is the primary deliverable for sharing; the HTML enables further browser-based export or editing.

If the user explicitly asks for "只要 HTML" or "HTML only", skip the PNG step.

PNG Generation Script: `scripts/html2png.py`

A Playwright-based headless renderer. It opens the HTML in Chromium, waits for Google Fonts to load, hides the FAB button, then screenshots the `.poster` element.

**Usage:**

python html2png.py <input.html> [output.png] [--scale=N]

**Scale options:**

**Dependencies:** `playwright` (pip install playwright && playwright install chromium). Pre-installed on Claude's compute environment.

Download Button (Mandatory in HTML)

Every generated HTML card MUST include a **floating action button (FAB)** in the bottom-right corner with a dropdown menu for export options:

Implementation:

1. Add `<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>` before `</body>`

2. The FAB (`div.fab-wrap`) is placed OUTSIDE `.poster` so it won't appear in the exported image

3. Clicking the FAB toggles a dropdown menu upward; clicking outside closes it

4. During capture, the FAB is hidden and a toast spinner ("正在导出…") is shown

5. The FAB icon toggles between a download arrow and a close ×

6. The exported filename is derived from `document.title` + scale suffix

See `assets/template.html` for the complete FAB HTML, CSS, and JS.

Copyright (Mandatory)

Every card MUST include a copyright bar **inside** the `.poster` div (below the footer, separated by a thin border-top), so it appears in both the HTML page and the exported PNG:

<div class="copyright-bar">
  <svg><!-- GitHub icon --></svg>
  <span>Generated by <a href="https://github.com/beilunyang/visual-note-card-skills">https://github.com/beilunyang/visual-note-card-skills</a></span>
</div>

Example Prompts → Expected Behavior

| User Says | Action |

|-----------|--------|

| "帮我做一张关于 RAG 架构的视觉笔记" | Generate HTML + PNG about RAG architecture |

| "把这篇文章做成信息图" + article text | Extract key ideas, synthesize framework, generate HTML + PNG |

| "生成一张同风格的卡片，主题是微服务" | Generate HTML + PNG about microservices |

| "Create a visual note about product-market fit" | Generate bilingual HTML + PNG about PMF |

| "只要 HTML，不要图片" | Generate HTML only, skip PNG |

| "生成一张 2x 高清的 PNG" | Generate HTML + PNG with `--scale=2` |