MMCPMarkets
UL

unclecheng-li/note-skill

Developer tools
159 stars 품질 40 트렌드 40
Repository Install

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

개요

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

README

它能做什么

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

用户输入：TCP 三次握手的原理是什么？

输出：手写笔记本风格的单 HTML 文件，包含手写字体、纸质背景、
     螺旋装订孔、胶带装饰、流程图、代码块等元素。

适用于技术笔记、漏洞分析、安全研究记录、知识点总结、课堂笔记等场景。

快速开始

安装

方式一：手动安装(以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 ``
Style B Remix Icon ``

硬性约束

  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 ⭐

View this README on GitHub

추천 도구

다른 키워드를 입력하거나 필터를 제거해 보세요.

설치

npx skillfish add unclecheng-li/note-skill