概要

visual-note-card-skills は、Claude Code と OpenClaw 上で動作する「視覚ノートカード（Visual Note Card）」を生成するカスタムスキルです。入力した要点やテキストをプロンプト経由で受け取り、単一ページの HTML インフォグラフィックとして出力します。主に中国語（简体/繁体想定）にフォーカスしたタイポグラフィやレイアウトを備え、テンプレートやスタイルをカスタマイズして学習用メモ、プレゼン資料、SNS 向けのビジュアル化に使える軽量ソリューションを提供します。MIT ライセンスで配布され、HTML を中心としたシンプルな実装です。

リポジトリの統計情報

スター数: 36
フォーク数: 1
ウォッチャー数: 36
コミット数: 3
ファイル数: 8
メインの言語: HTML

主な特徴

Claude Code と OpenClaw に対応したスキル定義でシームレスに統合可能
単一ページの HTML インフォグラフィックを出力し、即座に表示・共有できる
中国語の視覚表現（タイポグラフィ、レイアウト）に最適化されたテンプレート
MIT ライセンスで商用利用も含めて利用しやすい

技術的なポイント

このプロジェクトは「生成 -> HTML 出力」というシンプルだが実用的なワークフローに特化しています。スキルは Claude Code / OpenClaw のスキル仕様に沿った形で作られており、SKILL.md や README によってプロンプト例や出力仕様が示されています。出力は単一 HTML ファイル（CSS を含む）を想定しており、外部依存を減らすことで配布性やプライバシーを高めています。

レイアウト面ではカード型の情報ブロック、アイコンや色での情報階層、明瞭な見出しと箇条書きによる要点抽出といったインフォグラフィックの基本原則を踏襲しています。中国語のレンダリングに配慮したフォント指定や文字サイズの調整、行間設定などが考慮されている点も特徴です。テンプレートはカスタマイズ可能で、配色やコンテンツブロックの順序を変えることで用途（学習メモ、要約、手順解説など）に合わせられます。

実装上の利点としては、HTML 出力なのでブラウザ表示、印刷、PDF 変換、スクリーンショットでの画像化といった二次利用が容易な点が挙げられます。また、スキルとしての設計により、自然言語生成モデルからの結果を受け取りテンプレートに注入するだけでビジュアル化でき、API ベースの自動化やバッチ生成にも組み込みやすい構造です。拡張としては、JS を追加して動的なインタラクションやアニメーションを付ける、SVG を用いて高解像度の図表を埋め込む、テンプレート群を増やすことで多言語・多目的化する、といった道が考えられます。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
CONTRIBUTING.md: file
LICENSE: file
README.md: file
SKILL.md: file

…他 3 ファイル

まとめ

Claude/OpenClaw 連携で即座に使える、軽量で実用的な HTML ベースの視覚ノート生成ツール。

リポジトリ情報：

名前: visual-note-card-skills
説明: A custom skill for Claude Code and OpenClawd that generates professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics.
スター数: 36
言語: HTML
URL: https://github.com/beilunyang/visual-note-card-skills
オーナー: beilunyang
アバター: https://avatars.githubusercontent.com/u/13795713?v=4

READMEの抜粋：

Visual Note Card Generator

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

Visual Note Card スキル（视觉笔记卡片生成）