一篇文章压成海报:visual-note-card 这个 Skill 把文字秒变中文信息图

最近被一个 Skill 彻底治好「文字堆积恐惧症」——给一段长文,它 30 秒吐出一张编辑感拉满的中文信息图海报,自带中英标题、深浅双栏、框架分块、悬浮按钮直接导 PNG/JPEG。说它是”小红书 / 公众号封面的私人设计师”一点都不夸张。

这个 Skill 是什么?

beilunyang/visual-note-card-skills 是一个专门给 Claude Code / OpenClaw 用的可视化笔记卡片生成器,核心目标就是把任意文章、概念、技术主题压成一张单页 HTML 信息图,然后一键导出 PNG/JPEG 直接发小红书、公众号、即刻。

为什么设计师该装它?

• 结构化模板自带的”编辑美感”——顶部 TOPIC LABEL + 中英标题对照,中间 4 列框架(M/P/D/G),底部深色 + 浅色双栏叙事,最后一道高亮公式收尾。这套版式本身就是参考优秀信息图设计师做的。
• 配色可调:默认 teal/orange 主调,但你说”换成莫兰迪”或”做一份金融蓝”它会按配色方案重排。
• 导出无依赖:HTML 完全自包含,只引 Google Fonts 和 html2canvas,任意浏览器打开都能直接渲染。
• 三档清晰度:浮动按钮一键导出 1× / 1.5× / 2× PNG,公众号头图、小红书九宫、微博横图全包圆。

上手姿势

最丝滑的姿势是 npx 一行装:

npx skills add https://github.com/beilunyang/visual-note-card-skills --skill visual-note-card

然后跟 Claude 说:”用 visual-note-card 把这段长文做成一张视觉卡片“——它会先拆论点、再选配色、最后渲染 HTML + PNG,大概 30 秒交付。

我个人最爱的用法

• 把每周读的技术博客压成一张 1080×1440 的小红书图,周末复盘用
• 把客户需求做成视觉卡,第一次沟通直接甩图,胜过 5 段会议记录
• 把论文 / 书的某一章压成高亮公式,读书会分享物料直接成型

GitHub: https://github.com/beilunyang/visual-note-card-skills (80+ ⭐,MIT,中文原生)

GitHub: https://github.com/beilunyang/visual-note-card-skills