# Experiment Report Skill > 实验报告工作流 Skill - Skill: `lyzbcy/experiment-report-skill` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add lyzbcy/experiment-report-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/lyzbcy/experiment-report-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: lyzbcy (https://skillmd.com/u/lyzbcy) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/lyzbcy/experiment-report-skill --- # 实验报告工作流 Skill 一个通用的实验报告生成工作流。你只需要描述实验内容，它帮你完成：实验实现 → 前端可视化 → 截图 → 多轮自检修复 → 实验报告。 ## 何时使用 - 用户要做任何实验报告（强化学习、机器学习、算法对比、数据分析等）。 - 用户要一个能直观展示实验结果的前端页面，而不是只有终端输出。 - 用户要求数据真实、不能编造、要能截图进实验报告。 - 用户明确要求先确认效果，再开始写实验报告。 - 用户希望实验报告贴近 docx 结构，后续还要转 Word、插图、统一标题样式和目录。 ## 工作原则 - 先做计划，再动手实现。 - 先保证实验数据真实，再谈展示和排版。 - 任何图表、数据都必须来自实际运行结果，不许用"看起来合理"的替代品。 - 前端必须先做出来，而且要先给用户确认，再进入最终报告写作。 - 前端优先服务于展示结果，样式要清晰、美观、可截图，截图要能直接放进实验报告。 - 最终报告中的图片优先来自前端实际渲染结果，不允许手工拼图或伪造图表。 - 公式一律优先使用正式公式格式书写（Markdown/KaTeX），不要手工截成图片。 - 用户未确认前端效果前，不要直接写最终版实验报告。 - 报告要写得足够详尽，不能只像任务摘要，要体现出完整实验思路、结果、分析和反思。 - 实验报告中至少要有 4 张真实截图，而且截图要能看出页面确实经过认真排版。 - 最后一章心得感悟要先压掉模板腔、总结腔和 AI 味，再放进报告。 - **交付前必须完成至少 3 轮自检修复循环，直到问题基本清零。**（见"多轮自检修复流程"章节） ## 推荐执行顺序 ### 1. 先做计划 先输出简短计划，明确下面几件事： - **实验内容**：用户要做什么实验？（算法对比、数据分析、系统测试等） - **环境/数据设定**：输入数据、参数空间、评价指标等。 - **算法/方法范围**：需要跑哪些方法，对比什么。 - **交付物**：前端展示页面、实验报告.md、截图等。 - **验收点**：怎样算实验完成。 ### 2. 先实现真实实验 先把实验跑通，再做展示。 - 明确实验环境、输入输出、评价指标。 - 记录原始训练结果，不要只保存一张漂亮图。 - 输出可复查的数据文件。 - 如果需要多次实验，保留每次运行的原始结果，便于后面对比。 ### 3. 再做前端展示 优先做一个能直观看懂的页面，帮助后面截图，这是写最终报告前的必做步骤。 - 页面要清楚展示实验的核心结果（策略图、对比图、曲线图等）。 - 如果有多个实验结果版本，页面要标清楚参数和运行条件。 - 页面完成后先让用户确认，确认通过后再从前端里截图整理进报告。 - 截图优先保留完整页面和关键区域，避免只截局部。 - **前端样式必须遵循"去 AI 味设计规范"**（见下方专门章节）。 ### 4. 截图与报告 用户确认前端效果后，再从前端里截图并写实验报告.md。 - 报告里的图表必须来自前端实际渲染结果。 - 截图时尽量保证字体清晰、布局完整、比例统一。 - 至少保留 4 张真实截图。 - 截图不要只截一小块，尽量保留标题、统计信息、图例和上下文。 - 每张截图都要自检：无白边、无截断、无错位、无滚动条。 - **按截图清单方法论执行**（见下方专门章节）。 - 写报告时尽量靠近 docx 结构：标题层级清楚、图注完整、每张关键图对应一段分析。 ### 5. 定稿前做人味化处理 - 报告最后一章心得感悟先做自然化处理，去掉套话和过度工整的句式。 - 不要把心得写成"总结一切、升华主题"的模板段落。 - 保持真实、克制、像学生本人写的。 ### 6. 多轮自检修复（必做） **这是交付前的最后一道关卡，不可跳过。** 完成上述 1-5 步后，进入自检修复循环： #### 每轮自检的检查维度 | 维度 | 检查要点 | |------|----------| | 代码质量 | 逻辑 bug、类型错误、浅拷贝/深拷贝陷阱、未使用的变量、边界条件 | | 运行时行为 | 控制台有无报错、算法输出是否符合预期、交互是否流畅 | | UI/UX | 布局是否整齐、有无截断溢出、配色是否一致、是否残留 AI 味元素 | | 数据一致性 | 报告中的数字是否与前端实际运行结果完全吻合 | | 报告文字 | 错别字、描述是否与代码实现一致、心得感悟是否自然 | | 截图有效性 | 截图是否反映修复后的最新状态，如果修复了 UI 变化则需重新截图 | | 资源清理 | 是否遗留无用文件、临时变量、调试代码 | #### 自检流程 1. **逐文件审查**：遍历所有源代码文件，逐行检查逻辑和类型问题。 2. **浏览器验证**：用 `evaluate_script` 或 `take_snapshot` 在浏览器中验证每个功能模块。 3. **控制台检查**：用 `list_console_messages` 确认无错误日志。 4. **报告交叉校验**：将报告中的关键数据与前端实际运行结果逐一比对。 5. **输出问题清单**：列出本轮发现的所有问题，按严重程度排序。 6. **逐一修复**：修复所有发现的问题。 7. **回归验证**：修复后重新加载页面，确认修复有效且未引入新问题。 #### 退出条件 - 连续两轮自检均未发现实质性问题（即仅剩"可以但没必要"级别的建议）。 - 或已完成至少 3 轮，且最后一轮仅剩极低优先级的外观微调。 #### 自检记录格式 每轮自检后输出简要记录： ``` 第N轮审查发现： 1. [严重] xxx bug → 已修复 2. [中等] xxx 不一致 → 已修复 3. [轻微] xxx 可优化 → 已修复/跳过（附理由） 第N轮验证通过： - 所有功能正常 ✓ - 无控制台错误 ✓ - 报告数据一致 ✓ ``` ## 交付检查清单 写完后至少确认以下内容： - 实验已经按要求实现，数据真实。 - 所有图表都来自实际运行结果，非手工伪造。 - 前端可直接展示，截图清晰，样式统一。 - 前端必须先完成并经过用户确认，再写最终报告正文。 - 用户确认效果之后，才写最终报告。 - **最终报告同时产出两份：`实验报告.md` 和 `实验报告.docx`（缺一不可，详见「docx 交付规范」）。** - 心得感悟已做自然化处理。 - 报告中所有图、表、结论都能追溯到实际数据。 - **已完成至少 3 轮自检修复循环，且最后一轮无实质性问题。** - **每张截图已按 screenshot-manifest 执行，非随意截取。** - **截图自检通过：核心数据完整、标题未截断、无多余滚动条、无大面积空白。** - **截图文件路径与报告中的引用路径一致。** - **docx 自检通过：原生公式（非图片）/ 正文宋体五号 / 活序号 / 封面 / 目录 五项全部满足（见「docx 交付规范」）。** ## docx 交付规范（强制，每次都要产出 docx） 每次实验报告，在 `实验报告.md` 之外，**必须**同时产出一份 `实验报告.docx`。docx 不是 md 的简单导出，而是用 Node + `docx` 库按下列标准重新构建。三条硬性要求，**自检必须逐项验证**： ### 三条硬性要求 1. **公式必须是原生 OMML，禁止用图片。** 用 docx 的 `Math`（`OoxmlMath`）/`MathFraction`/`MathSuperScript`/`MathSubScript`/`MathRadical`/`MathSum` 等组件构造分数、上下标、根号、求和。只有当公式嵌套超过 3 层、或为矩阵/分段函数时，才允许 matplotlib PNG 兜底（极少见，需在自检里注明）。详见 `references/math-formulas.md` 的 LaTeX→docx 映射表。 2. **正文一律宋体五号。** 五号 = 10.5pt = **21 half-points**（`size: 21`）。字体必须三属性齐全：`font: { ascii: "Times New Roman", hAnsi: "Times New Roman", eastAsia: "宋体" }`——**只设 ascii 不设 eastAsia 是最常见的坑**，会导致中文落到默认字体上。标题用黑体，正文用宋体。 3. **序号用活序号（Word 自动编号），禁止死序号（手敲 1.2.3.）。** 用 `numbering` 的 abstractNum + `Paragraph({ numbering: { reference, level } })`。这样增删条目后序号自动重排。`步骤列表、目标列表、改进方向`等有顺序的内容都用活序号；无顺序的用项目符号。 ### docx 结构标准 - **封面页**：校名/课程名/作业名/姓名学号（占位待填）/日期。封面单独成节，封面节末尾不留多余 PageBreak。 - **目录页**：用 `TableOfContents` 自动生成，目录后**必须紧跟一个含 PageBreak 的段落**（否则目录和正文挤一页）。目录页提示用户右键「更新域」刷新页码。 - **正文**：从「一、实验名称」开始的十章结构（见 `references/templates/report_template.md`），正文页码从 1 开始重新计数。 - **行距 1.5 倍**（`line: 360`），正文首行缩进 2 字符（`firstLine: 480`）。 - **图片**：截图必须带 `type: "png"`，按真实宽高比缩放，不要硬编宽高导致拉伸。 ### docx 自检（产出后必做，逐项确认） 用脚本解压 docx 检查 `word/document.xml`： - [ ] 存在 ``（原生公式），且无 ``/`` 仅用于公式（公式不是图） - [ ] 正文段落 `w:sz w:val="21"` 且含 `w:eastAsia="宋体"`（宋体五号） - [ ] 存在 `` 且有 `word/numbering.xml` part（活序号自动编号） - [ ] 存在封面节 + `TableOfContents`（目录） - [ ] 报告中所有数字与 `results/*.json` 一致（沿用 md 自检逻辑） ### docx 生成器模板 完整的、可直接改用的 Node 生成脚本见 `references/templates/report_template_docx.js`。它封装了：宋体五号正文 helper、活序号 numbering、OMML 公式构造、封面、自动目录。**产出 docx 时以此为基础改造，不要从零写**（避免重复踩字体/序号的坑）。 ### 工具链前提 - Node ≥ 18 + `docx` 库（`npm install docx image-size`）。 - 若环境只有 python-docx、无 Node：python-docx 也能做 OMML（手注 oxml）和宋体五号，但自动编号和多级列表更繁琐，**优先用 Node + docx**。 ## 参考文件 - 详细报告模板见 references/templates/report_template.md - **docx 生成器模板见 references/templates/report_template_docx.js** - 交付检查与用户回收提醒见 references/checklist.md ## 如果用户没有给出更多限制 默认这样处理： - 先给出简短计划。 - 先做真实实验数据。 - 先做前端展示并让用户确认。 - 从前端里截图，整理到实验报告中。 - 等用户确认后再写报告。 - **最终报告同时产出 `实验报告.md` 和 `实验报告.docx` 两份（见「docx 交付规范」）。** - 最后一章心得感悟使用 humanizer 风格处理。 - **交付前执行至少 3 轮自检修复循环（md 自检 + docx 自检都要过）。** ## 截图清单方法论（Screenshot Manifest） ### 背景 上一轮（强化学习项目）暴露的问题：截图不准确，截取位置靠感觉，截出来的图要么截断了关键信息，要么截了不该截的区域。 ### 解决方案：在前端开发阶段就规划截图 **核心思路：截图不是事后补救，而是前端开发时就要规划好的产物。** #### 步骤 1：前端开发时预设截图标记 在写前端代码时，给每个需要截图的区域加上明确的 DOM id： ```html
``` #### 步骤 2：编写截图清单文件 在项目根目录创建 `screenshot-manifest.md`，明确每张截图的参数： ```markdown | # | DOM id / 描述 | 前置操作 | 视口宽度 | 全页面 | 文件路径 | |---|---------------|----------|----------|--------|----------| | 1 | 进程调度运行结果 | 点击"一键运行全部" | 1100px | 是 | screenshots/01-process.png | | 2 | 作业调度三算法对比 | 点击"运行三算法对比" | 1100px | 是 | screenshots/02-job.png | ``` #### 步骤 3：按清单逐一执行截图 截图时严格按照 manifest 执行： 1. 先执行「前置操作」（点击按钮、填入数据等） 2. 等待页面渲染完成（用 evaluate_script 加 setTimeout 或 wait_for 工具） 3. 按指定参数截图 4. **自检**：确认目标元素可见、无截断、无滚动条、无白边 #### 步骤 4：自检规则 每张截图完成后检查： - 核心数据区域是否完整可见 - 标题/图例是否被截断 - 页面是否有多余的滚动条 - 是否有空白区域占过大比例 ## 去 AI 味设计规范 ### 背景 上一轮暴露的问题：生成的网站 AI 味很重，一眼就能看出是 AI 生成的。 ### 典型 AI 味特征（要避免的） 1. **渐变色背景**：大量使用 linear-gradient、紫色到蓝色渐变 2. **圆角卡片 + 阴影**：所有元素都是圆角 12px + box-shadow 的卡片 3. **Emoji 图标**：在标题和按钮里大量使用 emoji 4. **套话 Header**："欢迎来到XX系统"、"让我们开始吧" 5. **过度动画**：每个元素都有 fadeIn / slideUp 动画 6. **彩色标签**：使用高饱和度的红绿蓝黄标签 7. **千篇一律的布局**：左侧导航 + 右侧内容区的后台管理模板 ### 推荐的学术简洁风设计 1. **配色**：低饱和度灰蓝系，主色 `#2a5aa7`，背景 `#f7f8fa`，边框 `#d9dce1` 2. **字体**：系统字体栈，不要 Google Fonts 3. **圆角**：极小或无圆角（2px 以内） 4. **布局**：参考教材/论文风格，重数据展示轻装饰 5. **表格**：border-collapse，细边框，表头用浅色背景 6. **图表**：用 SVG 原生渲染，不用第三方图表库的花哨样式 7. **按钮**：扁平风格，边框分明，hover 时背景微变 8. **标题**：直接用功能名，不要"欢迎""开始"等套话 ### CSS 变量模板 ```css :root { --bg: #f7f8fa; --surface: #ffffff; --border: #d9dce1; --text: #1a1a2e; --text-muted: #5c6070; --accent: #2a5aa7; --accent-light: #e8eff9; --radius: 2px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; --font-mono: "Cascadia Code", Consolas, monospace; } ``` ## 前端需要本地服务器时的处理 当前端页面不能通过直接双击 `index.html` 打开（例如使用了 `fetch()`/`XMLHttpRequest` 加载 JSON、ES Module import Three.js 等场景），就必须拉起本地 HTTP 服务器。 ### 判断条件 出现以下任一情况时，前端需要本地服务器： 1. 前端代码中使用了 `fetch()` 或 `XMLHttpRequest` 加载外部 JSON/数据文件。 2. 前端使用了 `