手写笔记本风格的单 HTML 学习笔记生成器，将技术内容转化为视觉精美的网页笔记。
给 AI Agent 用的笔记生成 Skill，输入技术内容，输出手写风格的 HTML 笔记。
配合 WorkBuddy、OpenClaw 等 AI Agent 使用，将技术文本自动转换为手写笔记本风格的精美网页笔记。
输入一段技术内容，AI 自动生成手写风格笔记：
用户输入：TCP 三次握手的原理是什么？
输出：手写笔记本风格的单 HTML 文件，包含手写字体、纸质背景、
螺旋装订孔、胶带装饰、流程图、代码块等元素。
方式一：手动安装(以workbuddy为例)
- 下载本项目
- 将
note-skill文件夹复制到~/.workbuddy/skills/目录 - 重启 WorkBuddy
方式二：命令行安装
git clone https://github.com/Unclecheng-li/note-skill.git ~/.workbuddy/skills/note-skill- 在对话中输入技术内容，说「帮我做成学霸笔记」
- 选择风格（Style A 学霸笔记本 / Style B 手账皮革本）
- Skill 自动生成精美笔记 HTML 文件
| 维度 | 描述 |
|---|---|
| 视觉 | 米黄横线纸 + 螺旋装订孔 + 胶带/咖啡渍装饰 |
| 字体 | Kalam + Patrick Hand + Zeyada（Google Fonts） |
| 图标 | Lucide SVG |
| 交互 | 单页滚动 + write-in 入场动画 |
| 适合 | 技术笔记、知识点总结、科普内容 |
| 维度 | 描述 |
|---|---|
| 视觉 | 皮革封面 + 金属环装订 + 翻页交互 |
| 字体 | Kalam + Ma Shan Zheng + Zeyada（Google Fonts） |
| 图标 | Remix Icon |
| 交互 | 翻页动画（键盘←→ / 点击） |
| 适合 | 攻击链分析、漏洞笔记、深度技术研究 |
| 类名 | 效果 | 用途 |
|---|---|---|
.highlight |
黄色高亮背景 | 关键术语、重点概念 |
.highlight-pink |
粉色高亮背景 | 危险操作、警告内容 |
.code-term |
等宽字体 + 下划线 | 代码术语、命令 |
.red-text |
红色加粗 | 强调、警告 |
.blue-text |
蓝色 | 信息、术语 |
| 组件 | 用途 | 适用风格 |
|---|---|---|
.flow-box |
流程图 | A |
.compare-box |
对比框 | A |
.attack-chain |
攻击链 | B |
.concept-cards |
概念卡片 | B |
.code-block |
代码块 | A, B |
.side-note / .sticky-note |
便签 | A, B |
.key-point-box |
重点框 | B |
.big-warning |
警告框 | A |
| 风格 | 图标库 | 使用方式 |
|---|---|---|
| Style A | Lucide SVG | <i class="lucide-xxx"></i> |
| Style B | Remix Icon | <i class="ri-xxx-line"></i> |
- 禁止使用 emoji 作为任何图标 — 必须使用平面 UI 库（Lucide / Remix Icon）
- 内容页纸的高度不能超过皮革封面的高度 — 内容过多时压缩精简
note-skill/
├── SKILL.md # Skill 主文件（工作流定义）
├── README.md # 本文件
├── LICENSE # MIT 开源协议
├── assets/
│ ├── template.html # Style A 模板
│ └── template-journal.html # Style B 模板
└── references/
├── layouts.md # Style A 布局库（18 种）
├── layouts-journal.md # Style B 布局库（10 种）
├── components.md # 组件手册
└── checklist.md # 质量检查清单
米黄横线纸 + 螺旋装订孔 + 手写字体，适合通用技术笔记。
皮革封面 + 金属环装订 + 翻页交互，适合深度技术研究。
- 前端：HTML5 + CSS3 + JavaScript（原生，无框架依赖）
- 字体：Google Fonts（Kalam, Patrick Hand, Zeyada, Ma Shan Zheng）
- 图标：Lucide SVG / Remix Icon
- 兼容性：现代浏览器（Chrome、Firefox、Safari、Edge）
本项目采用 MIT License。
如果对你有帮助，欢迎 Star ⭐