Skip to content

Instantly share code, notes, and snippets.

@OrangeViolin

OrangeViolin/SKILL.md

Last active February 22, 2026 04:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save OrangeViolin/326807040fc6abb3c8dd80c076f66de3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save OrangeViolin/326807040fc6abb3c8dd80c076f66de3 to your computer and use it in GitHub Desktop.
Download ZIP
Meeting Infographic Skill for Claude Code — 会议录音转写 → 结构化纪要 + 暖色卡片信息图。触发词：/meeting
Raw
infographic-template.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{会议标题}} · 会议纪要</title>
<!--
============================================================
会议纪要信息图 · 暖色卡片风格模板
============================================================
使用说明：
- 替换 {{}} 占位符为实际内容
- 按需增减 section / card 数量
- 卡片网格最后一行：根据卡片数选择 r3-last1/r3-last2/r3-last3
- 标签颜色：默认珊瑚色，可加 .blue/.green/.amber/.red/.purple/.gray/.teal
- 2列布局：card-grid 加 .cols-2
============================================================
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@600;700;900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
background: #f5f0ea;
color: #2c2420;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/* ====== DOWNLOAD BAR (hidden in print) ====== */
.download-bar {
position: fixed;
top: 0; left: 0; right: 0;
background: rgba(245,240,234,0.95);
backdrop-filter: blur(10px);
padding: 10px 24px;
display: flex;
justify-content: center;
gap: 12px;
z-index: 1000;
border-bottom: 1px solid #e0d6cc;
}
.download-bar button {
padding: 7px 18px;
border: 1px solid #c9bfb3;
background: #fff;
color: #5a4e42;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
}
.download-bar button:hover {
background: #f0e8de;
border-color: #b5a898;
}
/* ====== PAGE WRAPPER ====== */
.page {
width: 820px;
max-width: 100%;
padding: 64px 0 40px;
}
.infographic {
background: #f5f0ea;
padding: 48px 44px 40px;
}
/* ====== HEADER ====== */
.header {
text-align: center;
margin-bottom: 10px;
}
.header h1 {
font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
font-size: 28px;
font-weight: 900;
color: #1a1412;
line-height: 1.5;
letter-spacing: 1px;
}
.header-sub {
font-size: 16px;
color: #5a4e42;
font-weight: 500;
margin-top: 8px;
}
.header-meta {
font-size: 13px;
color: #9a8e82;
margin-top: 12px;
padding-bottom: 32px;
border-bottom: 1px solid #e0d6cc;
}
/* ====== SECTION ====== */
.section {
margin-top: 32px;
}
.section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.section-emoji { font-size: 18px; line-height: 1; }
.section-title {
font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
font-size: 17px;
font-weight: 700;
color: #1a1412;
}
.section-count {
display: inline-block;
padding: 2px 10px;
background: #f0e0d0;
border-radius: 100px;
font-size: 12px;
color: #9a7a5a;
margin-left: 4px;
}
/* ====== CARD GRID ====== */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid #e0d6cc;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
padding: 20px;
border-right: 1px solid #ede6dd;
border-bottom: 1px solid #ede6dd;
background: #fff;
}
.card-grid .card:nth-child(3n) { border-right: none; }
.card-grid.cols-2 .card:nth-child(2n) { border-right: none; }
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.card-title {
font-size: 14.5px;
font-weight: 700;
color: #1a1412;
line-height: 1.5;
flex: 1;
min-width: 0;
}
/* ====== TAG COLORS ====== */
.card-tag {
display: inline-block;
padding: 2px 10px;
background: #c67a5c;
color: #fff;
border-radius: 4px;
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.6;
}
.card-tag.blue { background: #6b8fb5; }
.card-tag.green { background: #7ba67e; }
.card-tag.amber { background: #c49a5c; }
.card-tag.red { background: #c06058; }
.card-tag.purple { background: #8b7ab5; }
.card-tag.gray { background: #8a8078; }
.card-tag.teal { background: #5a9a8a; }
.card-body {
font-size: 13px;
color: #6b5e52;
line-height: 1.85;
}
.card-body strong { color: #3a302a; font-weight: 600; }
/* ====== QUOTE BOX ====== */
.quote-box {
background: #fff;
border: 1px solid #e0d6cc;
border-radius: 10px;
padding: 24px 28px;
margin-top: 16px;
}
.quote-text {
font-size: 15.5px;
font-weight: 500;
color: #3a302a;
line-height: 1.8;
padding-left: 16px;
border-left: 3px solid #c67a5c;
}
.quote-author {
font-size: 12.5px;
color: #9a8e82;
margin-top: 10px;
text-align: right;
}
/* ====== TODO PRIORITY HEADERS ====== */
.todo-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
margin-top: 20px;
}
.todo-priority-badge {
padding: 2px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.todo-priority-badge.p0 { background: #c06058; color: #fff; }
.todo-priority-badge.p1 { background: #c49a5c; color: #fff; }
.todo-priority-badge.p2 { background: #6b8fb5; color: #fff; }
.todo-group-label {
font-size: 14px;
font-weight: 600;
color: #3a302a;
}
/* ====== LAST-ROW BORDER REMOVAL ====== */
/* 3-col grid */
.r3-last1 .card:nth-last-child(1) { border-bottom: none; }
.r3-last2 .card:nth-last-child(-n+2) { border-bottom: none; }
.r3-last3 .card:nth-last-child(-n+3) { border-bottom: none; }
/* 2-col grid */
.r2-last1 .card:nth-last-child(1) { border-bottom: none; }
.r2-last2 .card:nth-last-child(-n+2) { border-bottom: none; }
/* ====== FOOTER ====== */
.footer {
margin-top: 36px;
padding-top: 20px;
border-top: 1px solid #e0d6cc;
text-align: center;
font-size: 12px;
color: #9a8e82;
line-height: 1.8;
}
/* ====== PRINT ====== */
@media print {
.download-bar { display: none !important; }
.page { padding: 0; }
.infographic { padding: 36px 40px; }
@page { size: A3 portrait; margin: 10mm; }
}
</style>
</head>
<body>
<!-- ==================== DOWNLOAD BAR ==================== -->
<div class="download-bar">
<button onclick="window.print()">Save as PDF (Cmd/Ctrl + P)</button>
<button onclick="downloadAsPng()">Download as PNG</button>
</div>
<div class="page">
<div class="infographic" id="infographic">
<!-- ==================== HEADER ==================== -->
<div class="header">
<h1>{{会议标题}}</h1>
<div class="header-sub">会议纪要</div>
<div class="header-meta">{{日期}} &nbsp;·&nbsp; 参会人：{{参会人}} &nbsp;·&nbsp; {{主题简述}}</div>
</div>
<!-- ==================== KEYNOTE QUOTE (可选) ==================== -->
<div class="quote-box">
<div class="quote-text">"{{核心引言原话}}"</div>
<div class="quote-author">—— {{发言人}} · {{上下文}}</div>
</div>
<!-- ==================== 数据速览 (可选) ==================== -->
<div class="section">
<div class="section-head">
<span class="section-emoji">📊</span>
<span class="section-title">{{板块标题}}</span>
<span class="section-count">{{N}} 个关键数据</span>
</div>
<div class="card-grid r3-last1">
<!-- 根据卡片总数选择 r3-last1 / r3-last2 / r3-last3 -->
<div class="card">
<div class="card-head">
<span class="card-title">{{卡片标题}}</span>
<!-- 标签可选，不需要就删掉 -->
<span class="card-tag">{{人名/类别}}</span>
</div>
<div class="card-body">{{卡片正文，支持 <strong>加粗</strong>。}}</div>
</div>
<!-- 更多卡片... -->
</div>
</div>
<!-- ==================== 议题板块 (重复) ==================== -->
<div class="section">
<div class="section-head">
<span class="section-emoji">{{emoji}}</span>
<span class="section-title">{{板块标题}}</span>
<span class="section-count">{{N}} 个{{单位}}</span>
</div>
<div class="card-grid r3-last3">
<div class="card">
<div class="card-head">
<span class="card-title">{{卡片标题}}</span>
<span class="card-tag red">{{标签}}</span>
</div>
<div class="card-body">{{内容}}</div>
</div>
<!-- 更多卡片... -->
</div>
</div>
<!-- ==================== 2列布局示例 ==================== -->
<div class="section">
<div class="section-head">
<span class="section-emoji">{{emoji}}</span>
<span class="section-title">{{板块标题}}</span>
<span class="section-count">{{N}} 个{{单位}}</span>
</div>
<div class="card-grid cols-2 r2-last2">
<div class="card">
<div class="card-head">
<span class="card-title">{{卡片标题}}</span>
<span class="card-tag purple">{{标签}}</span>
</div>
<div class="card-body">{{较长内容，2列卡片适合信息量大的内容}}</div>
</div>
<!-- 更多卡片... -->
</div>
</div>
<!-- ==================== TODO 清单 ==================== -->
<div class="section">
<div class="section-head">
<span class="section-emoji">✅</span>
<span class="section-title">TODO 行动清单</span>
<span class="section-count">{{N}} 项行动</span>
</div>
<!-- P0 组 -->
<div class="todo-header">
<span class="todo-priority-badge p0">P0</span>
<span class="todo-group-label">立即行动</span>
</div>
<div class="card-grid r3-last2">
<div class="card">
<div class="card-head">
<span class="card-title">{{任务标题}}</span>
<span class="card-tag green">{{负责人}}</span>
</div>
<div class="card-body">{{任务描述}}。<strong>{{时间要求}}</strong>。</div>
</div>
<!-- 更多卡片... -->
</div>
<!-- P1 组 -->
<div class="todo-header">
<span class="todo-priority-badge p1">P1</span>
<span class="todo-group-label">近期推进</span>
</div>
<div class="card-grid r3-last3">
<!-- 卡片... -->
</div>
<!-- P2 组 (可选) -->
<div class="todo-header">
<span class="todo-priority-badge p2">P2</span>
<span class="todo-group-label">持续跟进</span>
</div>
<div class="card-grid r3-last1">
<!-- 卡片... -->
</div>
</div>
<!-- ==================== 共识 (可选) ==================== -->
<div class="section">
<div class="section-head">
<span class="section-emoji">🤝</span>
<span class="section-title">团队共识</span>
<span class="section-count">{{N}} 项共识</span>
</div>
<div class="card-grid r3-last2">
<div class="card">
<div class="card-head">
<span class="card-title">{{共识标题}}</span>
</div>
<div class="card-body">{{共识说明}}</div>
</div>
<!-- 更多卡片... -->
</div>
</div>
<!-- ==================== FOOTER ==================== -->
<div class="footer">
{{团队/项目名}} · 会议纪要 · {{日期}}<br>
{{备注信息}}
</div>
</div>
</div>
<!-- ==================== PNG EXPORT ==================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
function downloadAsPng() {
const btn = event.target;
btn.textContent = 'Generating...';
btn.disabled = true;
const el = document.getElementById('infographic');
html2canvas(el, {
scale: 2,
backgroundColor: '#f5f0ea',
useCORS: true,
logging: false,
windowWidth: 820
}).then(canvas => {
const link = document.createElement('a');
link.download = '{{文件名}}.png';
link.href = canvas.toDataURL('image/png');
link.click();
btn.textContent = 'Download as PNG';
btn.disabled = false;
}).catch(err => {
console.error(err);
alert('PNG export failed, please use Cmd/Ctrl+P to save as PDF.');
btn.textContent = 'Download as PNG';
btn.disabled = false;
});
}
</script>
</body>
</html>
Raw
install.sh
#!/bin/bash
# Meeting Infographic Skill — 一键安装脚本
# 会议录音转写 → 结构化纪要 + 暖色卡片信息图
set -e
SKILL_DIR="$HOME/.claude/skills/meeting-infographic"
REF_DIR="$SKILL_DIR/references"
echo "📋 Installing meeting-infographic skill..."
mkdir -p "$REF_DIR"
GIST_RAW="https://gist.githubusercontent.com/OrangeViolin/326807040fc6abb3c8dd80c076f66de3/raw"
curl -sL "$GIST_RAW/SKILL.md" -o "$SKILL_DIR/SKILL.md"
curl -sL "$GIST_RAW/infographic-template.html" -o "$REF_DIR/infographic-template.html"
echo "✅ Installed to $SKILL_DIR"
echo ""
echo "Usage: In Claude Code, say /meeting + drop your meeting transcript file"
Raw
SKILL.md
name description
meeting-infographic
将会议录音转写稿整理为结构化会议纪要 + 暖色卡片风格信息图。支持 docx/txt/pdf 输入，输出 Markdown 纪要 + 可下载 HTML 信息图。触发词："整理会议"、"会议纪要"、"会议信息图"、"/meeting"

会议纪要信息图生成器

将会议录音转写稿（通常口语化、冗长、有重复）整理为：

  1. 结构化 Markdown 会议纪要（保留全部细节）
  2. 暖色卡片风格 HTML 信息图（可下载 PNG/PDF）

触发词

  • "整理会议"
  • "会议纪要"
  • "会议信息图"
  • "整理会议录音"
  • "生成会议纪要"
  • "/meeting"

当用户提供会议录音文件（docx/txt/pdf）并要求整理时触发。

工作流程

输入文件 → 提取文本 → 结构化分析 → 输出 Markdown 纪要 → 生成 HTML 信息图 → 浏览器打开

Step 1：提取文本

根据文件类型选择提取方式：

文件类型 提取方式
.docx macOS textutil -convert txt -stdout <文件路径>
.txt 直接用 Read 工具读取
.pdf 用 Read 工具读取（支持 PDF）
.md 直接用 Read 工具读取

Step 2：结构化分析

会议录音转写稿的特点：口语化、有语气词、有重复、说话人标记不一定准确。

分析框架

从原始文本中提取以下结构：

维度 提取内容
基本信息 会议时间、参会人员（角色/姓名）、会议主题
核心观点 每位发言人的核心主张（去掉口语废话，保留原意）
关键数据 数字、指标、时间节点、规模等定量信息
决策与共识 会议达成的结论性内容
分歧与讨论 不同意见、争论点
风险与挑战 提到的问题、担忧、风险
TODO 行动项 具体任务、负责人、时间（从对话中推断）
金句/定调 有分量的原话，保留原始表述

分析原则

  1. 保留全部细节：不丢失任何实质性信息，口语废话可删但观点不可删
  2. 还原发言人：尽量识别每个观点是谁说的（从"角色A/B/C"或上下文推断）
  3. 推断 TODO：很多 TODO 不是直接说"你去做xxx"，而是从讨论中隐含的，要主动提取
  4. 保留原话金句：有力量的原话保留，用引号标注
  5. 结构化归类：把散乱的讨论归入逻辑清晰的板块

Step 3：输出 Markdown 会议纪要

保存到输入文件同目录，文件名 [原文件名]_会议纪要.md。

纪要结构模板

# [会议主题] · 会议纪要

| 项目 | 内容 |
|------|------|
| **会议时间** | ... |
| **参会人员** | ... |
| **会议主题** | ... |

---

## 一、[第一个议题板块]
### 1.1 [子话题]
### 1.2 [子话题]

## 二、[第二个议题板块]
...

## N、TODO 清单

### 【高优先级 · 立即行动】
| # | 事项 | 负责人 | 时间 |
|---|------|--------|------|

### 【中优先级 · 近期推进】
...

### 【长期 · 持续跟进】
...

Step 4：生成 HTML 信息图

→ 读取 references/infographic-template.html 获取完整模板。

设计风格：暖色卡片式

核心视觉语言（必须严格遵守）：

要素 规范
背景 暖米色 #f5f0ea
卡片 白色 #fff，细线边框 #e0d6cc，圆角 10px
卡片布局 3列网格，卡片间用 1px 细线分隔（不是 gap），外部有圆角边框包裹
标题文字 深棕 #1a1412，思源宋体加粗
正文文字 灰棕 #6b5e52，13px，行高 1.85
强调文字 深棕 #3a302a，font-weight 600
人名标签 珊瑚色 #c67a5c 底，白字，圆角 4px
辅助标签色 蓝 #6b8fb5 / 绿 #7ba67e / 琥珀 #c49a5c / 红 #c06058 / 紫 #8b7ab5 / 灰 #8a8078 / 青 #5a9a8a
板块标题 emoji + 宋体加粗 + 计数胶囊（#f0e0d0 底，#9a7a5a 字）
页面宽度 820px，居中
引言框 白色圆角框，左侧 3px 珊瑚色竖线

信息图板块结构

根据会议内容动态生成以下板块（按需取用，不是每个都必须有）：

  1. 页头：会议标题（宋体大号）+ 副标题 + 时间/参会人/主题
  2. 核心引言：会议最有力量的一句话，引用框样式
  3. 关键数据速览：3-4 张数据卡片（数字 + 说明）
  4. 核心议题板块：每个议题一个 section，内含 3 列卡片网格
  5. TODO 行动清单：按优先级分组（P0/P1/P2），每组是卡片网格
  6. 共识/结论：会议达成的关键共识，卡片展示
  7. 页脚：会议信息 + 备注

卡片 HTML 结构

每张卡片的结构：

<div class="card">
  <div class="card-head">
    <span class="card-title">卡片标题</span>
    <span class="card-tag">标签</span>        <!-- 人名/类别，可选颜色 class -->
  </div>
  <div class="card-body">
    卡片正文，支持 <strong>加粗强调</strong>。
  </div>
</div>

卡片网格最后一行去底线规则

卡片用 border-right + border-bottom 分隔，最后一行需要去掉 border-bottom。用 CSS class 控制：

  • 3列网格最后一行3张：.r3-last3 → nth-last-child(-n+3) 去底线
  • 3列网格最后一行2张：.r3-last2 → nth-last-child(-n+2) 去底线
  • 3列网格最后一行1张：.r3-last1 → nth-last-child(1) 去底线
  • 2列网格同理：.r2-last2 / .r2-last1

下载功能

页面顶部固定两个按钮：

  • Save as PDF：调用 window.print()
  • Download as PNG：用 html2canvas 库导出

Step 5：输出与打开

  1. HTML 信息图保存到输入文件同目录，文件名 [原文件名]_信息图.html
  2. 用 open 命令在浏览器中打开
  3. 告知用户两个文件路径和下载方式

内容提炼原则

从口语到书面的转换

口语特征 处理方式
语气词（嗯、啊、呃） 删除
重复表述（就是就是、然后然后） 合并为一次
口头禅（对吧、是吧、你知道吗） 删除
说了一半改口的 取最终表述
跑题闲聊 如果有信息量则保留，纯闲聊删除
有力量的原话 保留原文，加引号

信息密度控制

  • Markdown 纪要：保留全部细节，宁多勿少
  • HTML 信息图：提炼精华，每张卡片 2-4 行文字，用加粗突出关键词
  • 信息图是纪要的"可视化摘要"，不是完整替代

TODO 提取技巧

会议中的 TODO 经常是隐含的，注意以下信号：

信号 示例
直接分配 "这个你来做" "小王负责"
建议变承诺 "我觉得应该..." + 无人反对
时间节点 "下周之前" "月底前"
问题未解决 讨论了但没结论 → 变成待讨论 TODO
自我承诺 "我回去整理一下" "我来写个文档"

标签颜色选择指南

用途 推荐颜色 class
人名（默认） 珊瑚 无（默认）
技术/工程 蓝 .blue
运营/增长 绿 .green
风险/警告 红 .red
重要/紧急 琥珀 .amber
产品/策略 紫 .purple
中性/状态 灰 .gray
正向/积极 青 .teal
方法论/原则 珊瑚（默认） 无
优先级 P0 红底白字 .p0
优先级 P1 琥珀底白字 .p1
优先级 P2 蓝底白字 .p2

适用场景

场景 适用度 说明
团队会议录音转写 ★★★★★ 最佳场景
1对1 面谈记录 ★★★★☆ 适用，板块会少一些
电话会议/线上会议 ★★★★★ 适用
演讲/分享录音 ★★★☆☆ 可用，但结构偏线性，卡片效果一般
已有结构化纪要 ★★★★☆ 跳过 Step 2，直接生成信息图

故障处理

问题 处理
docx 提取失败 尝试 textutil（macOS 内置），不行则提示用户另存为 txt
参会人无法识别 使用原始标记（角色A/B/C），在纪要中注释"身份待确认"
会议内容太短（<500字） 简化板块，3-5 张卡片即可
会议内容超长（>10000字） 分议题归类，信息图只取最核心内容，纪要保留全部
多语言混杂 保留原文语言，不强制翻译

Skill 版本：v1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment