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