visual-note-card

视觉笔记卡片生成器

创建专业、信息密集的视觉笔记卡片（视觉笔记/信息图），生成独立的 HTML 文件，并通过 Playwright 自动导出 PNG。输出是一张结构化的海报式信息图，采用模块化卡片布局，适合在社交媒体分享或打印。

设计系统

编写任何代码之前，请先阅读参考模板 assets/template.html，了解规范的 HTML/CSS 结构。然后根据用户的主题调整内容。

核心视觉风格

设计采用编辑风格的知识卡片美学——信息密度高、视觉层次清晰，灵感来自高端杂志版式和结构化笔记。

配色方案（CSS 变量）：

• --primary：深青色 #1a7a6d——标题、徽章、强调元素
• --primary-dark：深色 #145f54——底部高亮栏
• --primary-deep：更深的青色 #0d3d36——深色强调元素
• --accent：橙色 #e8713a——强调内容、次要徽章、重要标签
• --bg：暖灰色 #f0ebe4——页面背景
• --bg-light：浅色面板背景 #f5f1ec
• --bg-card：框架卡片背景 #e8e3dc
• --black：#1a1a1a——深色面板、主要文本
• --white：#ffffff

用户可能会要求使用其他配色方案。此时，请保持相同的结构性对比关系：一种暖色中性色背景、一种鲜明的主色、一种强调色，以及用于深色面板的黑色。

字体排版：

• 英文展示字体：Playfair Display（衬线体，700/900）——主标题
• 中文正文：Noto Sans SC（400/500/700/900）——所有中文文本
• 等宽字体：JetBrains Mono（500/700）——标签、URL、标记
• 在 <style> 块中通过 Google Fonts 导入

布局 — 固定海报尺寸：

• 容器宽度：1200px
• 内边距：36px 40px 28px
• 背景：var(--bg)

必需的布局部分（从上到下）

每张视觉笔记卡片都必须按顺序包含以下部分：

1. 顶栏

一行弹性布局，包含：

• 左侧：大写等宽字体的主题标签（例如：AI PRODUCT ARCHITECTURE · SYSTEM DESIGN）
• 右侧：来源标签（例如：OPENAI ENGINEERING BLOG）

2. 主标题区域

两栏弹性布局：

• 左侧：双语大标题——英文行使用 Playfair Display 38px，中文行使用 Noto Sans SC 40px，颜色为 var(--primary)
• 右侧：2–3 行的论点陈述（核心观点），概括卡片的核心论点，并用 <strong> 标出关键词。也可在下方添加来源 URL。

3. 框架行（灵活网格，推荐 4 列）

一行等宽卡片，用于展示主题的核心框架/模型。列数灵活，应根据实际内容选择：

• 2 列——二元概念、对比（例如：之前与之后、输入与输出）
• 3 列——三元组、三角模型（例如：人员-流程-技术）
• 4 列——建议的默认值，最常见的框架列数（例如：E-K-C-F、M-P-D-G）
• 5 列——五要素模型（例如：HEART 指标、五力模型）
• 6 列——扩展分类（谨慎使用，描述应非常简短）

分析主题，并选择最适合其自然结构的列数。如果概念自然包含 3 个或 5 个部分，就不要强行使用 4 列。

CSS 实现： 使用 grid-template-columns: repeat(N, 1fr)，其中 N 为所选列数。

卡片结构（无论列数多少，结构相同）：

• 每张卡片包含一个彩色方形字母徽章（概念的首字母）和中文名称
• 徽章下方：1–2 行描述，并用一个 <strong> 标出关键词
• 对于 5–6 列布局，描述应控制在 1 行，以避免溢出

徽章颜色轮换（依照以下顺序循环）：

1. --primary（青色）
2. --primary（青色）
3. --accent（橙色）
4. --primary-deep（深青色）
5. --accent（橙色）——如有第 5 列
6. --primary（青色）——如有第 6 列

框架应采用一个便于记忆的首字母缩写（例如：E-K-C-F、M-P-D-G）。如果源内容未提供，请自行创建一个。

4. 双栏内容区

使用 grid-template-columns: 1fr 1fr 布局：

左侧：深色面板（background: var(--black)，白色文字）

• 带表情符号图标的章节标题（⚡、🔥、🛠 等）
• 2 个子区块，各自包含橙色标题（var(--accent)）和项目符号列表（使用青绿色自定义 ■ 项目符号）
• 列表项使用 <strong> 标记关键短语（白色）
• 底部的“结论”区块，带分隔线和令人印象深刻的引言／见解（关键短语使用薄荷绿 #5ee6d0）

右侧：浅色面板（background: var(--bg-light)）

• 带星形图标（★）的章节标题
• 3–4 条编号见解，每条包含：
  • 大号衬线数字（Playfair Display 36px，青绿色）
  • 粗体标题行
  • 1–2 行描述，关键字使用 <strong> 标记

5. 底部高亮栏

全宽栏，背景为 var(--primary-dark)：

• 左侧：框架公式（例如，Architecture = M × P × D × G），使用薄荷绿 #5ee6d0 高亮
• 右侧：使用较浅文字呈现收尾观点

6. 页脚

弹性行布局：

• 左侧：等宽字体的框架标签
• 右侧：品牌／框架名称，中间用一个小青绿色圆点分隔

内容策略

用户提供主题（或文章 URL／文本）时：

1. 提取或构建四部分框架——找出核心结构模型。如果没有现成模型，就创建有意义的拆解，并配上令人印象深刻的首字母缩写。
2. 撰写具有挑衅性的论点——右侧副标题应当是鲜明、有主见的主张，而不是平淡的描述。
3. 深色面板 =“故事 + 转变”——用于叙事内容：问题、过渡、角色变化、范式转变。
4. 浅色面板 =“陷阱或见解”——用于可付诸行动的编号要点。
5. 底部公式——用一个方程式风格的摘要提炼整张卡片的内容。
6. 所有文字均使用中文，但以下内容除外：英文主标题、技术术语、框架首字母缩写和页脚标签。

输出

默认：HTML + PNG

默认情况下，生成 HTML 文件和 PNG 图片：

1. 生成 HTML——生成单个自包含的 .html 文件，所有 CSS 均内嵌。除 Google Fonts 和 html2canvas CDN 外，不使用外部依赖。保存到 /mnt/user-data/outputs/。
2. 生成 PNG——运行打包的 scripts/html2png.py 脚本，将 HTML 渲染为高质量 PNG 图片。

python <skill-path>/scripts/html2png.py /mnt/user-data/outputs/card.html /mnt/user-data/outputs/card.png --scale=1.5

向用户提供这两个文件（先 PNG，后 HTML）。PNG 是便于分享的主要交付内容；HTML 则支持在浏览器中进一步导出或编辑。

如果用户明确要求“只要 HTML”或“HTML only”，则跳过 PNG 步骤。

PNG 生成脚本：scripts/html2png.py

基于 Playwright 的无头渲染器。它会在 Chromium 中打开 HTML，等待 Google Fonts 加载，隐藏 FAB 按钮，然后对 .poster 元素截图。

用法：

python html2png.py <input.html> [output.png] [--scale=N]

缩放选项：

• --scale=1 — 标准尺寸（宽 1200px），文件最小
• --scale=1.5 — 默认值，推荐用于社交媒体（宽 1800px）
• --scale=2 — 印刷品质（宽 2400px）

依赖项：playwright（pip install playwright && playwright install chromium）。已预装在 Claude 的计算环境中。

下载按钮（HTML 中必需）

每张生成的 HTML 卡片都必须在右下角包含一个悬浮操作按钮（FAB），并带有导出选项下拉菜单：

• 标准 PNG — 1× 缩放，便于快速分享
• 高清 PNG — 1.5× 缩放，推荐用于社交媒体
• 超清 PNG — 2× 缩放，用于打印
• JPEG — 1.5× 缩放，文件更小

实现方式：

1. 在 </body> 前添加 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
2. 将 FAB（div.fab-wrap）放在 .poster 外部，避免出现在导出的图片中
3. 点击 FAB 可向上切换显示下拉菜单；点击菜单外部可关闭菜单
4. 截取期间隐藏 FAB，并显示提示旋转图标（“正在导出…”）
5. FAB 图标在下载箭头和关闭 × 之间切换
6. 导出文件名由 document.title + 缩放后缀组成

完整的 FAB HTML、CSS 和 JS 请参见 assets/template.html。

版权信息（必需）

每张卡片都必须在 .poster div 内部包含版权栏（位于页脚下方，并以细边框分隔），使其同时显示在 HTML 页面和导出的 PNG 中：

<div class="copyright-bar">
  <svg></svg>
  <span>Generated by <a href="https://github.com/beilunyang/visual-note-card-skills">https://github.com/beilunyang/visual-note-card-skills</a></span>
</div>

示例提示词 → 预期行为

用户输入	操作
"帮我做一张关于 RAG 架构的视觉笔记"	生成关于 RAG 架构的 HTML + PNG
"把这篇文章做成信息图" + 文章文本	提取关键观点，综合提炼框架，生成 HTML + PNG
"生成一张同风格的卡片，主题是微服务"	生成关于微服务的 HTML + PNG
"Create a visual note about product-market fit"	生成关于 PMF 的双语 HTML + PNG
"只要 HTML，不要图片"	仅生成 HTML，不生成 PNG
"生成一张 2x 高清的 PNG"	使用 --scale=2 生成 HTML + PNG