# Academic Blog > 生成 metauto.ai/neuralcomputer 风格的学术研究随笔 HTML 页面。多文件架构（CSS/JS 静态不动，agent 只生成内容 HTML）。支持封面图、多章节、对比表格、代码卡片（syntax highlight）、KaTeX 公式（颜色标注）、多类型边注（术语/符号/译注）、内联引用、BibTeX 引用块、可折叠摘要、story-aside callout、图片 lightbox。适用于：把论文/博客/技术随笔生成为精美 HTML 发布页面。 - Skill: `justcyl/academic-blog` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add justcyl/academic-blog` - Raw SKILL.md: https://api.skillmd.com/api/skills/justcyl/academic-blog/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: justcyl (https://skillmd.com/u/justcyl) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/justcyl/academic-blog --- # Research Essay Page 将研究笔记、论文解读、技术随笔生成为精美 HTML 页面，风格参考 [metauto.ai/neuralcomputer](https://metauto.ai/neuralcomputer/index_cn.html)。 ## 何时使用 - "把我的论文写成网页" / "生成博客页面" / "做个研究随笔网站" - 需要 publication-quality HTML 页面用于发布/分享 - 将论文内容转为带设计感的 HTML，含图表、对比表、参考文献 - **论文解读**：不仅分析论文全文，还应检查 GitHub 官方实现，用代码卡片展示简化后的关键代码片段 ## 核心设计偷好 1. **多文件架构优先**：CSS/JS 从 skill 目录复制，agent 只生成内容 HTML（通常 <40KB），避免大文件写入失败 2. **边注密集**：对关键名词、术语、符号、公式变量、翻译大量使用右侧边注，降低读者认知负荷 3. **代码即解读**：如果论文有 GitHub 实现，用 code-card 展示简化后的关键代码，帮助用户建立「论文→代码」的映射 4. **公式可视化**：用 KaTeX 渲染公式，用颜色标注解释公式各部分含义 5. **生成后必须 refine**：运行 `refine_check.py` 自动校验，迭代修复直到全部通过 ## 模板文件 Skill 目录下有两套模板： ### 推荐：多文件架构（agent 只写内容） | 文件 | 大小 | 说明 | |------|------|------| | `style.css` | ~2015 行 | **复制即用**，含所有组件样式 + 代码卡片 + 公式块 + 多类型边注 | | `script.js` | ~536 行 | **复制即用**，lightbox + summary scroll + contact toggle | | `index-template.html` | ~210 行 | **内容骨架**，agent 基于此生成，只有内容 HTML | **工作流：** 复制 `style.css` + `script.js` → 基于 `index-template.html` 生成 `index.html` → 运行 refine_check 这样 agent 只需要写一个 <40KB 的内容文件。**`write` 工具单次上限约 15KB，内容 HTML 必须按 Step 4 的分片构建流程生成，禁止一次写入整个文件。** ### 备选：单文件架构（双击可开） | 文件 | CSS 大小 | 适用场景 | |------|----------|--------| | `template-minimal.html` | ~1781 行 | 自包含单文件，含所有实用组件 | | `template.html` | ~2676 行 | 完整版，含视频 demo gallery | ## 组件是否强耦合？ **不强耦合。** CSS 按命名空间严格分组，各组件互不依赖（除共享 CSS 变量外）。可以安全删除任意组件的 HTML 块，对应 CSS 不会影响其他部分。 ### CSS 组件地图 ``` 组件 CSS 行数 是否必须 ───────────────────────────────────────────── Core (布局+排版) ~498 ✅ 必须 Route Compare Table ~197 图表用 Figures (图片块) ~76 图片用 Story Aside (callout) ~99 ⚠️ 可选 Code Card (代码卡片) ~120 🆕 代码展示用 Formula Block (公式块) ~60 🆕 KaTeX 公式用 Enhanced Margin Notes ~50 🆕 术语/符号/译注 Summary Block ~94 ⚠️ 可选 Image Lightbox ~237 图片放大用 Divider ~6 ✅ 必须 Contract Table ~86 表格用 Citation Card ~74 ⚠️ 可选 Page Footer ~12 ✅ 必须 Media Queries ~237 ✅ 必须 ───────────────────────────────────────────── style.css ~2015 (多文件推荐) ``` 如需进一步瘦身：删除对应 HTML 块，然后从 `