beilunyang

beilunyang / visual-note-card-skills

Public

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

37
1
100% credibility
Found Mar 18, 2026 at 37 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

A skill for AI chat tools that generates self-contained HTML visual note cards summarizing topics or articles into shareable infographics.

How It Works

1
🔍 Discover the tool

You stumble upon this handy skill that lets your AI turn topics or articles into eye-catching visual summary cards.

2
📥 Add to your AI

You copy the skill into your AI helper's special folder, and it's automatically ready to go.

3
💬 Chat with your AI

You just tell your AI something like 'Create a visual note about product-market fit' and it gets to work.

4
✨ Receive your card

Your AI hands you a beautiful, ready-to-view webpage poster with structured highlights, English titles, and Chinese details.

5
🖼️ Export the image

Click the floating button on the page to save it as a crisp PNG or JPEG picture at your chosen size.

🎉 Share and impress

Post your professional infographic on social media, print it, or keep it as a handy reference—everyone loves it!

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 37 to 37 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is visual-note-card-skills?

This repo delivers a custom skill for Claude Code and OpenClawd that transforms any topic, article, or concept into a professional Chinese visual note card—a single-page HTML infographic ready for social sharing or printing. You prompt in English or Chinese, like "帮我做一张关于 RAG 架构的视觉笔记," and it spits out a self-contained HTML file with bilingual text, structured layout, and built-in PNG/JPEG export via a floating button at multiple resolutions. Built in HTML with a Python helper for offline rendering using Playwright, it solves the hassle of manually designing infographics from AI summaries.

Why is it gaining traction?

It stands out with zero dependencies beyond Google Fonts and html2canvas CDN—no build steps or frameworks needed—making it dead simple to drop into your Claude or OpenClawd skills folder for instant use on visual note requests. The fixed editorial layout (top bar, framework grid, dark/light panels, highlight formula) delivers consistent, print-ready polish that feels like a custom GitHub profile README or custom GitHub pages domain, but for knowledge cards. Developers dig the customizable palettes and bilingual support, hooking those tweaking custom GitHub Copilot instructions or custom skills frameworks.

Who should use this?

Chinese content creators and educators using Claude Code for quick WeChat/Twitter infographics. AI prompt engineers building custom skills menus, like custom skill trees for structured outputs. Tech bloggers or product managers needing one-pagers from articles without design tools.

Verdict

Grab it if you're in the Claude/OpenClawd ecosystem and want fast visual summaries—docs are solid, install is a one-line git clone. At 37 stars and 1.0% credibility score, it's early-stage with no tests, so treat as a fun prototype rather than production-ready.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.