visual-note-card
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.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/beilunyang/visual-note-card-skillsWhat This Skill Does
The visual-note-card skill is an advanced infographic generation tool that transforms complex concepts, summaries, or structured information into professional-grade, print-ready, or social-media-ready visual notes. Built specifically for OpenClaw, it treats every information request as a design project, utilizing a strict CSS design system that ensures high information density, balanced typography, and a cohesive, editorial-magazine aesthetic. It handles the complete lifecycle from content structuring to HTML/CSS layout generation and finally rendering via Playwright to ensure a high-fidelity PNG export.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/beilunyang/visual-note-card-skills
Use Cases
- Professional Summarization: Converting long-form technical blogs or research papers into one-page summaries.
- Knowledge Management: Creating visually consistent 'knowledge cards' to index complex frameworks, design patterns, or business strategies.
- Content Marketing: Producing high-quality infographics for social media platforms (Twitter/LinkedIn) to summarize AI concepts or project architecture.
- Education & Mentorship: Designing structured learning maps or study notes for students or junior team members.
Example Prompts
- "Create a visual note card summarizing the key pillars of the transformer architecture based on the 'Attention Is All You Need' paper."
- "I need a professional infographic summary of the latest 2024 AI product design principles. Use the standard teal and orange color palette."
- "Summarize this article on distributed systems consensus algorithms into a structured, one-page visual knowledge card for my dev team."
Tips & Limitations
- Content Density: The layout is optimized for fixed dimensions (1200px width). Ensure your summary content is concise; excessive text may overflow the card layout.
- Customization: While the skill defaults to a professional teal-and-orange theme, you can request specific accent colors for branding.
- Dependencies: This skill requires an active Playwright installation within your agent environment to perform the HTML-to-PNG rendering successfully.
- Format: Always review the generated HTML preview before confirming the final PNG export if you have specific font or layout preferences.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-beilunyang-visual-note-card-skills": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, code-execution