全部技能 分类浏览
← 返回
未分类

学霸笔记

生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。
生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。
Uncle城
未分类 community v1.0.2 3 版本 93333.3 Key: 无需
★ 0
Stars
📥 14
下载
💾 0
安装
3
版本
#latest

概述

学霸笔记 Skill

生成手写笔记本风格的单文件 HTML 学习笔记。

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

> 1. 禁止使用 emoji 作为任何图标或装饰符号 — 所有图标必须使用平面 UI 库（Lucide 或 Remix Icon）

> 2. 内容页纸的高度不能超过皮革封面的高度 — 如果内容过多，必须压缩精简内容，以模板为参考

两种模板风格

Style A · 学霸笔记本（默认）

视觉：米黄横线纸 + 螺旋装订孔 + 胶带/咖啡渍/回形针装饰

字体：Kalam + Patrick Hand + Zeyada

图标：Lucide SVG（）

交互：单页滚动，write-in 入场动画

适合：技术笔记、知识点总结、科普内容

assets/template.html

Style B · 手账皮革本

视觉：皮革封面 + 金属环装订 + 多页翻页

字体：Kalam + Ma Shan Zheng（毛笔）+ Zeyada

图标：Remix Icon（）

交互：翻页交互（键盘←→ / 点击），封面 + 内容页

适合：攻击链分析、漏洞笔记、深度技术研究

assets/template-journal.html

完整工作流

Step 1 · 需求澄清

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

  1. 笔记主题：标题是什么？副标题？
  2. 风格选择：Style A（学霸笔记本）还是 Style B（手账皮革本）？
  3. 内容大纲：有哪些章节/知识点？
  4. 技术术语：需要高亮的关键词、代码术语？
  5. 视觉元素：需要哪些组件（流程图、对比框、警告框、代码块等）？

Step 2 · 拷贝模板

mkdir -p "项目/XXX/notes"
# Style A
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/notes/index.html"
# Style B
cp "<SKILL_ROOT>/assets/template-journal.html" "项目/XXX/notes/index.html"

立即修改 </code> 标签。</p><h3>Step 3 · 填充内容</h3><ol><li><strong>预检</strong>：读取模板的 <code><style></code> 块，确认所有可用的组件类名。</li><li><strong>选择布局</strong>：</li><ul><li>Style A：从 <code>references/layouts.md</code> 中选择</li><li>Style B：从 <code>references/layouts-journal.md</code> 中选择</li></ul><li><strong>使用组件</strong>：从 <code>references/components.md</code> 中挑选组件。</li><li><strong>添加装饰图标</strong>：<strong>必须使用平面 UI 库图标</strong>，<strong>绝对禁止使用 emoji</strong>。</li><ul><li>Style A：Lucide SVG（<code><i class="lucide-xxx"></i></code>）</li><li>Style B：Remix Icon（<code><i class="ri-xxx-line"></i></code>）</li></ul><li><strong>控制内容量</strong>：<strong>内容页纸的高度不能超过皮革封面的高度</strong>，如果内容过多，压缩精简。</li></ol><h3>Step 4 · 对照检查清单自检</h3><p>生成后，打开 <code>references/checklist.md</code> 逐项检查。</p><h3>Step 5 · 本地预览</h3><p>直接在浏览器中打开生成的 HTML 文件即可预览。</p><h3>Step 6 · 迭代</h3><p>根据用户反馈修改，调整内容、样式、动画延迟等。</p><hr><h2>设计原则</h2><ol><li><strong>手写感第一</strong>：字体用 Kalam 系列，模拟真实手写。</li><li><strong>纸质质感</strong>：横线纸 + 装订线 + 阴影。</li><li><strong>装饰克制</strong>：胶带、咖啡渍、涂鸦是点缀，不能喧宾夺主。</li><li><strong>颜色编码</strong>：红=警告/强调、蓝=信息/术语、绿=安全/正面、紫=技术/代码。</li><li><strong>单文件输出</strong>：所有 CSS/JS 内联，浏览器直接打开。</li><li><strong>禁止 emoji</strong>：不使用 emoji 作为图标。Style A 用 Lucide，Style B 用 Remix Icon。</li><li><strong>内容适配</strong>：内容页纸的高度不能超过皮革封面的高度，内容过多时压缩精简。</li></ol><hr><h2>资源文件结构</h2><pre><code>note-skill/ ├── SKILL.md # 本文件 ├── assets/ │ ├── template.html # Style A 模板 │ └── template-journal.html # Style B 模板 └── references/ ├── layouts.md # Style A 布局库 ├── layouts-journal.md # Style B 布局库 ├── components.md # 组件手册 └── checklist.md # 质量检查清单 </code></pre><p><strong>加载顺序</strong>：SKILL.md → 确定风格 → 读取对应模板 → 参考对应布局文件 → 参考 components.md → 自检 checklist.md</p><hr><h2>示例输出</h2><h3>Style A · 学霸笔记本示例</h3><pre><code>examples/style-a/ ├── Note1.html # HTTP/2 协议笔记（基础篇） ├── Note2.html # HTTP/2 协议笔记（进阶篇） ├── Note3.html # HTTP/2 协议笔记（攻击篇） ├── Note4.html # HTTP/2 协议笔记（防御篇） └── Note5.html # HTTP/2 协议笔记（总结篇） </code></pre><p><strong>特点</strong>：米黄横线纸 + 螺旋装订 + 胶带/咖啡渍装饰，单页滚动，write-in 入场动画。</p><h3>Style B · 手账皮革本示例</h3><pre><code>examples/style-b/ ├── Note1.html # HTTP/2 攻击链笔记（协议基础） ├── Note2.html # HTTP/2 攻击链笔记（HPACK 压缩） └── Note3.html # HTTP/2 攻击链笔记（内存放大攻击） </code></pre><p><strong>特点</strong>：皮革封面 + 金属环装订 + 翻页交互，毛笔字体，攻击链可视化组件。</p><h3>使用示例</h3><ol><li><strong>预览效果</strong>：直接在浏览器中打开任意示例 HTML 文件</li><li><strong>参考布局</strong>：查看示例中的 HTML 结构，学习如何组合布局和组件</li><li><strong>复制修改</strong>：以示例为基础，替换内容生成自己的笔记</li></ol><hr><h2>版本历史</h2><table><thead><tr><th>版本</th><th>日期</th><th>变更</th></tr></thead><tbody><tr><td>------</td><td>------</td><td>------</td></tr><tr><td>v1.0</td><td>2026-06-11</td><td>初始版本，支持 Style A 和 Style B 两种风格</td></tr></tbody></table></div> </div> </div> <div id="tab-versions" class="detail-content"> <div class="detail-section"> <h2>版本历史</h2> <p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 2 个版本</p> <ul class="version-list"> <li> <div> <span class="version-tag">v1.0.2</span> <span style="font-size:13px;color:#64748b;margin-left:8px;">Initial release</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-06-11 14:34 安全 安全 </div> </li> <li> <div> <span class="version-tag">v1.0.0</span> <span style="font-size:13px;color:#64748b;margin-left:8px;">Initial release</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-06-08 00:04 安全 安全 </div> </li> </ul> </div> </div> <div id="tab-security" class="detail-content"> <div class="detail-section"> <h2>安全检测</h2> <div class="sec-grid"> <div class="sec-card"> <h4>腾讯云安全 (Keen)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://tix.qq.com/search/skill?keyword=95a0485fa978eb9313d718e922a53c55" target="_blank">查看报告</a> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://static.cloudsec.tencent.com/html-report-v2/2026/06/11/552164_b2e0df4beb8396ac67e1e80a7fb3da55.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781170035%3B1812706035&q-key-time=1781170035%3B1812706035&q-header-list=host&q-url-param-list=&q-signature=8b2c3842ce50c6b0f32d105960ac5af9bcad9dc8" target="_blank">查看报告</a> </div> </div> </div> </div> <!-- Recommended Skills --> <div style="margin-top:24px;"> <h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2> <div class="rec-grid"> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/unclecheng-reduce-ai-perception-v2">文章去AI味工具</a></h3> <div class="rec-owner">user_ab5ae6ee</div> <div class="rec-desc">去除文本中的AI写作痕迹，让文字读起来更像人类写作。当用户要求'去AI味'、'降AI味'、'让回复更像人话'、'润色'、'改写得更自然'时使用。检测并修复：AI高频词汇、过度结构化、虚假客观性、机械化连接词、完美主义陷阱、公式化结尾、过度修</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 9</span> <span style="color:#5b6abf;">📥 5,499</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/unclecheng-ai-resume-judge">简历打分Skill</a></h3> <div class="rec-owner">user_ab5ae6ee</div> <div class="rec-desc">AI简历评分助手。根据用户上传的简历（含Markdown文本、PDF或文件），按照AI领域满分/及格线两份参考简历为基准，计算简历能力值（满分100分）。若简历非AI领域，则进行跨行业等价换算，评估该简历在其所属行业的能力水平。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 0</span> <span style="color:#5b6abf;">📥 366</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/unclecheng-bilibili-analyzer-v2">B站视频-弹幕评论获取与深度分析</a></h3> <div class="rec-owner">user_ab5ae6ee</div> <div class="rec-desc">B站视频评论与弹幕深度分析。输入B站视频链接或BV号，自动采集评论、弹幕数据，进行情感分析、关键词提取、热度分析，生成结构化分析报告。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1</span> <span style="color:#5b6abf;">📥 392</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('.detail-tab').forEach(function(btn){ btn.addEventListener('click',function(e){ var tab = this.getAttribute('data-tab'); document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')}); document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')}); this.classList.add('active'); var el = document.getElementById('tab-'+tab); if(el) el.classList.add('active'); }); }); }); </script> <div class="footer"> <p>Skill工具集 © 2026</p> </div></body> </html>