Note Skill

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

学霸笔记 Skill

生成手写笔记本风格的单文件 HTML 学习笔记，视觉模拟真实笔记本：螺旋装订孔、横线纸、胶带、咖啡渍、手写字体、涂鸦装饰。

⚠️ 硬性约束（P0 级别，必须遵守）

• 禁止使用 emoji 作为任何图标或装饰符号
• 所有图标必须使用 Lucide SVG 图标库（通过 CSS class 引入，如 <i class="lucide-bug"></i>）
• 包括但不限于：标题前缀、小节图标、便签装饰、涂鸦装饰、日期徽章等
• 如果需要图标，必须从 references/components.md 的 Lucide 图标表中选取

适用场景

• 技术笔记、漏洞分析、安全研究记录
• 知识点总结、课程笔记、读书笔记
• 需要"手写感"和"个人风格"的内容呈现
• 社交媒体分享的技术科普内容

不适用场景

• 正式报告、商业文档（太随意）
• 需要打印的内容（深色背景浪费墨水）
• 大量表格数据（手写风格不适合密集表格）

---

完整工作流

Step 1 · 需求澄清

如果用户未提供完整内容，需澄清以下问题：

1. 笔记主题：标题是什么？副标题？
2. 内容大纲：有哪些章节/知识点？
3. 技术术语：需要高亮的关键词、代码术语？
4. 视觉元素：需要哪些组件（流程图、对比框、警告框、代码块等）？
5. 图标主题：需要哪些装饰图标（bug、锁、代码、AI 等）？使用 Lucide SVG 图标。

Step 2 · 拷贝模板

mkdir -p "项目/XXX/notes"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/notes/index.html"

立即修改 <title> 标签中的占位符 [必填] 替换为笔记标题。

Step 3 · 填充内容

1. 预检：读取模板的 <style> 块，确认所有可用的组件类名。
2. 选择布局：从 references/layouts.md 中选择合适的页面布局。
3. 使用组件：从 references/components.md 中挑选组件（流程图、对比框、攻击链、代码块等）。
4. 添加入场动画：所有内容元素添加 write-in 类和递增的 animation-delay。
5. 添加便签：在关键位置添加 .side-note 做旁注提醒。
6. 添加装饰图标：必须使用 Lucide SVG 图标（<i class="lucide-xxx"></i>），绝对禁止使用 emoji。参考 references/components.md 中的图标表。

Step 4 · 对照检查清单自检

生成后，打开 references/checklist.md 逐项检查。

Step 5 · 本地预览

直接在浏览器中打开生成的 HTML 文件即可预览。

Step 6 · 迭代

根据用户反馈修改，调整内容、样式、动画延迟等。

---

设计原则

1. 手写感第一：字体用 Kalam/Patrick Hand/Zeyada，模拟真实手写。
2. 纸质质感：米黄背景 + 横线 + 红色装订线 + 阴影。
3. 装饰克制：胶带、咖啡渍、涂鸦是点缀，不能喧宾夺主。
4. 颜色编码：红=警告/强调、蓝=信息/术语、绿=安全/正面、紫=技术/代码。
5. 动画节奏：write-in 动画按内容顺序递增延迟，模拟"边写边出现"。
6. 便签即旁注：.side-note 用于补充说明，旋转角度增加真实感。
7. 单文件输出：所有 CSS/JS 内联，浏览器直接打开。
8. 禁止 emoji：不使用 emoji 作为图标。需要图标时，使用 Lucide SVG 图标库（通过 CSS class 引入，如 <i class="lucide-bug"></i>）。

---

资源文件结构

note-skill/
├── SKILL.md                    # 本文件
├── assets/
│   └── template.html           # 基础模板
└── references/
    ├── layouts.md              # 页面布局库
    ├── components.md           # 组件手册
    └── checklist.md            # 质量检查清单

加载顺序：SKILL.md → 读取模板 → 参考 layouts.md → 参考 components.md → 自检 checklist.md