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.
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.
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.
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: #ffffffUsers 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:
Playfair Display (serif, 700/900) — main titleNoto Sans SC (400/500/700/900) — all Chinese textJetBrains Mono (500/700) — labels, URLs, tags<style> blockLayout — Fixed Poster Dimensions:
1200px36px 40px 28pxvar(--bg)Every visual note card MUST include these sections in order:
A single-line flex row with:
AI PRODUCT ARCHITECTURE · SYSTEM DESIGN)OPENAI ENGINEERING BLOG)Two-column flex layout:
Playfair Display 38px, Chinese line in Noto Sans SC 40px colored with var(--primary)<strong>. Optionally include a source URL below.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):
<strong> keywordBadge color rotation (cycles through these in order):
--primary (teal)--primary (teal)--accent (orange)--primary-deep (deep teal)--accent (orange) — if 5th column exists--primary (teal) — if 6th column existsThe 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.
A grid-template-columns: 1fr 1fr layout:
Left: Dark Panel (background: var(--black), white text)
var(--accent)) and a bulleted list (custom ■ bullets in teal)<strong> for key phrases (white color)#5ee6d0 mint color)Right: Light Panel (background: var(--bg-light))
Playfair Display 36px, teal)<strong> keywordsFull-width bar with background: var(--primary-dark):
Architecture = M × P × D × G) in mint highlight color #5ee6d0Flex row:
When the user provides a topic (or an article URL/text):
By default, generate both an HTML file and a PNG image:
.html file with all CSS inline. No external dependencies except Google Fonts and html2canvas CDN. Save to /mnt/user-data/outputs/.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.
scripts/html2png.pyA 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:
--scale=1 — standard (1200px wide), smallest file--scale=1.5 — default, recommended for social media (1800px wide)--scale=2 — print quality (2400px wide)Dependencies: playwright (pip install playwright && playwright install chromium). Pre-installed on Claude's compute environment.
Every generated HTML card MUST include a floating action button (FAB) in the bottom-right corner with a dropdown menu for export options:
Implementation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> before </body>div.fab-wrap) is placed OUTSIDE .poster so it won't appear in the exported imagedocument.title + scale suffixSee assets/template.html for the complete FAB HTML, CSS, and JS.
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>
| 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 |