Visual Note Card Skills

Visual Note Card Generator

A custom skill for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [OpenClaw](https://openclaw.ai/) that generates professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics.

  

Overview

This skill turns any topic, article, or concept into a beautifully structured visual note card — a poster-style infographic optimized for social media sharing or printing. All output is a single self-contained HTML file with no external dependencies (except Google Fonts and html2canvas CDN).

Features

• Single HTML output — no build tools, no frameworks, fully self-contained
• Bilingual support — Chinese body text with English display titles
• Built-in export — floating action button with PNG/JPEG export at multiple resolutions (1×, 1.5×, 2×)
• Structured layout — editorial knowledge card aesthetic with framework grid, dark/light panels, and highlight bar
• Customizable palette — default teal/orange theme with support for user-requested color schemes

Example Output


The card follows a fixed layout structure:

┌──────────────────────────────────────────┐
│ TOPIC LABEL              SOURCE LABEL    │  ← Top Bar
├────────────────────┬─────────────────────┤
│ English Title      │ Thesis statement    │  ← Title Area
│ 中文标题            │ with key insight    │
├─────┬─────┬─────┬──┴──────────────────────┤
│  M  │  P  │  D  │  G  │                  │  ← Framework Row (4 cards)
├─────┴─────┴─────┴─────┴──────────────────┤
│ ⚡ Dark Panel      │ ★ Light Panel        │  ← Two-Column Content
│ (narrative/story)  │ (numbered insights)  │
├──────────────────────────────────────────┤
│ Formula = M × P × D × G    Closing note  │  ← Highlight Bar
├──────────────────