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
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
INLINECODE3 : #145f54 — bottom highlight bar
INLINECODE5 : #0d3d36 — deep accent
INLINECODE7 : Orange #e8713a — emphasis, secondary badges, important labels
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
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):
- Each card has a colored square letter badge (first letter of the concept) + Chinese name
Below the badge: 1–2 lines of description with one <strong> keyword
For 5–6 columns, keep descriptions to 1 line to avoid overflow
Badge color rotation (cycles through these in order):
1. --primary (teal)
INLINECODE35 (teal)
INLINECODE36 (orange)
INLINECODE37 (deep teal)
INLINECODE38 (orange) — if 5th column exists
INLINECODE39 (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)
- Section title with emoji icon (⚡, 🔥, 🛠, etc.)
2 sub-blocks, each with an orange title (var(--accent)) and a bulleted list (custom ■ bullets in teal)
List items use <strong> for key phrases (white color)
A bottom "conclusion" block with a divider line and a memorable quote/insight (key phrase in #5ee6d0 mint color)
Right: Light Panel (background: var(--bg-light))
- Section title with star icon (★)
3–4 numbered insight items, each with:
- 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):
- Left: The framework formula (e.g., Architecture = M × P × D × G) in mint highlight color INLINECODE51
Right: A closing thought in lighter text
6. Footer
Flex row:
- Left: Framework label in monospace
Right: Brand / framework name with a small teal dot separator
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.
Write a provocative thesis — the right-side subtitle should be a strong, opinionated claim, not a bland description.
Dark panel = "Story + Transformation" — use this for narrative content: problems, transitions, role changes, paradigm shifts.
Light panel = "Pitfalls or Insights" — use this for actionable numbered takeaways.
Bottom formula — distill the entire card into one equation-style summary.
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/.
Generate the PNG — run the bundled scripts/html2png.py script to render the HTML into a high-quality PNG image.
CODEBLOCK0
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:
CODEBLOCK1
Scale options:
- --scale=1 — standard (1200px wide), smallest file
INLINECODE58 — default, recommended for social media (1800px wide)
