--- 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 `

视觉笔记卡片生成器

Description

Latest Changes

Install 视觉笔记卡片生成器 with One Click