Skip to content

Unclecheng-li/note-skill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

学霸笔记 Skill

手写笔记本风格的单 HTML 学习笔记生成器,将技术内容转化为视觉精美的网页笔记。

License: MIT WorkBuddy HTML5

给 AI Agent 用的笔记生成 Skill,输入技术内容,输出手写风格的 HTML 笔记。

配合 WorkBuddy、OpenClaw 等 AI Agent 使用,将技术文本自动转换为手写笔记本风格的精美网页笔记。

快速开始 · 两种风格 · 组件系统 · 效果示例


它能做什么

输入一段技术内容,AI 自动生成手写风格笔记:

用户输入:TCP 三次握手的原理是什么?

输出:手写笔记本风格的单 HTML 文件,包含手写字体、纸质背景、
     螺旋装订孔、胶带装饰、流程图、代码块等元素。
image image image
适用于技术笔记、漏洞分析、安全研究记录、知识点总结、课堂笔记等场景。

快速开始

安装

方式一:手动安装(以workbuddy为例)

  1. 下载本项目
  2. note-skill 文件夹复制到 ~/.workbuddy/skills/ 目录
  3. 重启 WorkBuddy

方式二:命令行安装

git clone https://github.com/Unclecheng-li/note-skill.git ~/.workbuddy/skills/note-skill

使用

  1. 在对话中输入技术内容,说「帮我做成学霸笔记」
  2. 选择风格(Style A 学霸笔记本 / Style B 手账皮革本)
  3. Skill 自动生成精美笔记 HTML 文件

两种风格

Style A · 学霸笔记本(默认)

维度 描述
视觉 米黄横线纸 + 螺旋装订孔 + 胶带/咖啡渍装饰
字体 Kalam + Patrick Hand + Zeyada(Google Fonts)
图标 Lucide SVG
交互 单页滚动 + write-in 入场动画
适合 技术笔记、知识点总结、科普内容

Style B · 手账皮革本

维度 描述
视觉 皮革封面 + 金属环装订 + 翻页交互
字体 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>

硬性约束

  1. 禁止使用 emoji 作为任何图标 — 必须使用平面 UI 库(Lucide / Remix Icon)
  2. 内容页纸的高度不能超过皮革封面的高度 — 内容过多时压缩精简

项目结构

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              # 质量检查清单

效果示例

Style A · 学霸笔记本

米黄横线纸 + 螺旋装订孔 + 手写字体,适合通用技术笔记。

Style B · 手账皮革本

皮革封面 + 金属环装订 + 翻页交互,适合深度技术研究。


技术栈

  • 前端:HTML5 + CSS3 + JavaScript(原生,无框架依赖)
  • 字体:Google Fonts(Kalam, Patrick Hand, Zeyada, Ma Shan Zheng)
  • 图标:Lucide SVG / Remix Icon
  • 兼容性:现代浏览器(Chrome、Firefox、Safari、Edge)

开源协议

本项目采用 MIT License


如果对你有帮助,欢迎 Star ⭐

About

生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages