beilunyang

Visual Note Card Skills — Design skill for Claude Code

Design community

A custom skill for Claude Code and OpenClaw that generates professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics.

How to install Visual Note Card Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open beilunyang/visual-note-card-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Visual Note Card Skills does

A custom skill for Claude Code and OpenClaw that generates professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics.

Alternatives in Design

Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
Poco Claw — A more beautiful and easier-to-use alternative to OpenClaw 1.3k ★

README

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.

![Claude Code Skill](https://img.shields.io/badge/Claude_Code-Skill-blue) ![OpenClaw Compatible](https://img.shields.io/badge/OpenClaw-Compatible-purple) ![License](https://img.shields.io/badge/License-MIT-green)

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

![Demo](demo.png)

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
├──────────────────