Visual Note Card

---

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):

--primary: Deep teal #1a7a6d — headers, badges, accent elements

--primary-dark: #145f54 — bottom highlight bar

--primary-deep: #0d3d36 — deep accent

--accent: Orange #e8713a — emphasis, secondary badges, important labels

--bg: Warm gray #f0ebe4 — page background

--bg-light: #f5f1ec — light panel background

--bg-card: #e8e3dc — framework card background

--black: #1a1a1a — dark panel, primary text

--white: #ffffff

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:

English display: Playfair Display (serif, 700/900) — main title

Chinese body: Noto Sans SC (400/500/700/900) — all Chinese text

Monospace: JetBrains Mono (500/700) — labels, URLs, tags

Import via Google Fonts in the