技能介绍

要解决什么问题

技术笔记、漏洞研究或科普总结往往堆在 Markdown 或文档里，排版像说明书，缺少「写在纸上」的阅读节奏。若你希望单文件 HTML 就能在浏览器直接打开、带手写字体与纸质装饰，又不必搭静态站点或依赖外部 CDN 打包，这个技能把输出约束成可维护的模板工作流。

技能如何工作

技能提供 Style A · 学霸笔记本 与 Style B · 手账皮革本 两套视觉体系：前者是米黄横线纸、螺旋装订与单页滚动 + write-in 动画；后者是皮革封面、金属环装订与键盘/点击翻页，并搭配毛笔类字体，更适合攻击链、深度技术页。

典型流程会先澄清主题、风格、大纲与需要的组件（流程图、警告框、代码块等），再拷贝对应模板并改 <title>，从 references/layouts.md 或 references/layouts-journal.md 选布局，从 references/components.md 选组件类名填充内容。图标一律用平面 UI 库：Style A 用 Lucide SVG，Style B 用 Remix Icon；生成后按 references/checklist.md 自检，本地用浏览器打开 HTML 预览并迭代。

设计侧强调手写感（Kalam 等字体）、纸质质感与克制装饰；颜色编码约定为红强调、蓝术语、绿正面、紫技术/代码，且 CSS/JS 全部内联。

适用边界与注意点

P0：禁止用 emoji 当图标，违反即不符合规范。
Style B 内容页纸高度不得超过皮革封面高度；内容过多时必须压缩精简，以模板为参照，而不是无限加长页面。
资源加载顺序为：先读 SKILL.md 定风格 → 模板 → 对应布局文件 → components.md → checklist.md；未给全内容时需先问清主题与大纲再动手。