社区收录 技能
学霸笔记 Skill
UncleCheng 维护的手写笔记本风格学习笔记生成 skill，输入技术内容即可输出单文件 HTML 网页笔记，提供学霸笔记本与手账皮革本两种视觉风格，内置布局库、组件手册和质量检查清单。
学霸笔记 Skill
学霸笔记 Skill 是 UncleCheng 维护的手写笔记本风格学习笔记生成器。输入技术内容（原理讲解、漏洞分析、知识点总结等），输出单文件 HTML 网页笔记，自带手写字体、纸质背景、螺旋装订孔、胶带装饰和入场动画，无需任何框架依赖，浏览器直接打开即可预览。
来源
- 上游仓库：https://github.com/Unclecheng-li/note-skill
- 默认 SKILL.md：https://github.com/Unclecheng-li/note-skill/blob/main/SKILL.md
- 模板与参考：https://github.com/Unclecheng-li/note-skill/tree/main/references
- 许可证：MIT
适合什么时候用
- 需要把 TCP 握手、漏洞攻击链、算法原理等枯燥技术内容，转成视觉精美、便于分享和回顾的网页笔记。
- 想在两种风格之间选择：Style A 学霸笔记本（米黄横线纸 + 螺旋装订）偏通用科普，Style B 手账皮革本（皮革封面 + 翻页交互）偏深度研究。
- 需要现成的布局库、组件手册和质量检查清单，让 agent 一致地产出非半成品的完整笔记。
两种模板风格
Style A · 学霸笔记本（默认）
| 维度 | 描述 |
|---|---|
| 视觉 | 米黄横线纸 + 螺旋装订孔 + 胶带 / 咖啡渍 / 回形针装饰 |
| 字体 | Kalam + Patrick Hand + Zeyada（Google Fonts） |
| 图标 | Lucide SVG（<i class="lucide-xxx"></i>） |
| 交互 | 单页滚动 + write-in 入场动画 |
| 适合 | 技术笔记、知识点总结、科普内容 |
模板：assets/template.html，布局库：references/layouts.md（18 种）。
Style B · 手账皮革本
| 维度 | 描述 |
|---|---|
| 视觉 | 皮革封面 + 金属环装订 + 多页翻页 |
| 字体 | Kalam + Ma Shan Zheng（毛笔）+ Zeyada |
| 图标 | Remix Icon（<i class="ri-xxx-line"></i>） |
| 交互 | 翻页交互（键盘 ←→ / 点击），封面 + 内容页 |
| 适合 | 攻击链分析、漏洞笔记、深度技术研究 |
模板：assets/template-journal.html，布局库：references/layouts-journal.md（10 种）。
组件系统
文字样式：.highlight（黄色高亮）、.highlight-pink（粉色高亮）、.code-term（等宽 + 下划线）、.red-text（红色强调）、.blue-text（蓝色信息）。
布局组件：.flow-box（流程图）、.compare-box（对比框）、.attack-chain（攻击链）、.concept-cards（概念卡片）、.code-block（代码块）、.side-note / .sticky-note（便签）、.key-point-box（重点框）、.big-warning（警告框）。组件手册见 references/components.md。
工作流
Skill 定义了完整的六步工作流：
- 需求澄清 — 确认主题、风格、大纲、需要高亮的术语和视觉组件。
- 拷贝模板 — 按风格复制对应
template*.html到目标目录并改<title>。 - 填充内容 — 先读取模板
<style>预检类名，再从layouts*.md选布局、从components.md选组件。 - 对照检查清单自检 — 逐项过
references/checklist.md。 - 本地预览 — 浏览器直接打开生成的 HTML。
- 迭代 — 根据反馈调整内容、样式和动画延迟。
硬性约束
Skill 在 P0 级别强制两条规则，agent 必须遵守：
- 禁止使用 emoji 作为任何图标或装饰符号 — 所有图标必须用平面 UI 库（Lucide 或 Remix Icon）。
- 内容页纸的高度不能超过皮革封面的高度 — 内容过多时必须压缩精简，以模板为参考。
安装提示
上游仓库根目录即 SKILL.md，可直接安装：
npx skills add https://github.com/Unclecheng-li/note-skill
上游 README 也提供了手动安装方式，将 note-skill 文件夹复制到 ~/.workbuddy/skills/（以 WorkBuddy 为例）即可。
使用注意
- Skill 主要面向 WorkBuddy、OpenClaw 等 agent，在对话中输入「帮我做成学霸笔记」并提及触发词（学霸笔记 / 笔记 / 手写笔记 / 漏洞笔记 / note 等）即可激活。
- 两套模板依赖 Google Fonts，离线环境需要替换字体源。
- 输出是单文件 HTML，所有 CSS / JS 内联，可直接嵌入 iframe、邮件附件或静态托管，不需要构建工具。
- 深度技术研究和攻击链分析优先选 Style B 手账皮革本；通用知识点总结优先选 Style A 学霸笔记本。