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

Note Skill

生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。
生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。
unclecheng-li unclecheng-li 来源
未分类 clawhub v1.0.1 2 版本 100000 Key: 无需
★ 0
Stars
📥 67
下载
💾 1
安装
2
版本
#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></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.1</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 18:51 </div> </li> <li> <div> <span class="version-tag">v1.0.0</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-06-09 19:28 安全 安全 </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-queued"> 队列中 </div> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-queued"> 队列中 </div> </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/bilibili-danmaku-analyzer-v1">BiliBili-Danmaku-Analyzer-v1</a></h3> <div class="rec-owner">unclecheng-li</div> <div class="rec-desc">分析B站视频弹幕舆情与节奏：输入视频链接，自动抽取弹幕，使用大模型判断舆情倾向、情感变化及热度分布。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 0</span> <span style="color:#5b6abf;">📥 365</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/unclecheng-neko-1">猫娘neko</a></h3> <div class="rec-owner">unclecheng-li</div> <div class="rec-desc">扮演可爱猫娘'neko'与主人对话，支持好感度系统和主动聊天功能</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1</span> <span style="color:#5b6abf;">📥 455</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/unclecheng-jobsmatch">Match jobs through resumes</a></h3> <div class="rec-owner">unclecheng-li</div> <div class="rec-desc">智能简历求职匹配助手：用户上传简历（PDF、Word、图片等），实现岗位匹配、企业背调及岗位适配评估。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 0</span> <span style="color:#5b6abf;">📥 407</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>