1实现原理 · 为什么它能做到
页序被写死为教学闭环：Cover（模块名 + 讲师）→ Learning objectives → 正文（concept + 例子）→ MCQ 自测页 → Wrap-up + 下一模块预告。这是教学设计骨架，不是排版建议。
next/src/lib/templates/skills/deck-course-module/SKILL.md
- Cover (模块名 + 讲师)
注：frontmatter 的 scenario: education 只负责 picker 分组；真正的教学逻辑写在正文页序里
「左侧学习目标常驻」的实现是 260px + 1fr 的 CSS grid 双栏：每张正文页都重复同一份 <ul class="obj-list"> 侧栏，随翻页持续可见，而不是固定定位的浮层。
next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .slide{padding:64px 80px;background:var(--bg);display:grid;grid-template-columns:260px 1fr;gap:56px;align-content:start}
注：用「每页复制」而非 sticky，保证导出 PDF / 逐页截图时每页都带学习目标
学习目标带三态语义：默认 ○、已完成 ●、当前 ▸（由 .obj-list li / li.done / li.current 的 ::before 切换），随课程推进在每页同步更新。
next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}
注：把「现在讲到第几条目标」编码进侧栏符号，比页码更能定位教学进度
MCQ 自测页＝.mcq 列表 + .mcq.correct 标出正确项，侧栏同步「Self-assess / You should get 3/3」，题干是可直接作答的单选（Which function will recurse forever?）。
next/src/lib/templates/skills/deck-course-module/example.html
<p class="dim" style="font-size:13px">You should get 3/3.</p>
注：自测页是教学闭环的收口：题目 → 选项 → 正确项解释，全部在纯 HTML/CSS 内完成
暖纸色板把所有纯白替换掉：背景 #fbfaf6、卡面 #f6f3ea，强调色取青绿 #2d7d6e / 琥珀 #d88a3a，标题走 Playfair Display 72px。
next/src/lib/templates/skills/deck-course-module/example.html
--bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;
注：「warm paper bg + Playfair serif」这条设计细节落成了具体变量
讲义配件齐备：Exercise 虚线框（::before 输出「✎ Exercise」标签）、深褐底 JetBrains Mono 代码块、concept-box 卡片、页脚 slide-number 的 data-current/data-total。
next/src/lib/templates/skills/deck-course-module/example.html
.tpl-course-module .exercise::before{content:"✎ Exercise";display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent-2);margin-bottom:10px;text-transform:uppercase}
注：示例自带可复用的教学组件类，模型不必每次重新发明讲义零件
运行时同样由宿主承担：模板目录零可执行文件，prompt 由 assemblePrompt 拼装后交本地 agent CLI，deck 分页由宿主 deck viewer 拆 <section class="slide">。
next/src/lib/deck.ts
The convention adopted by every deck skill
注：skill 本体只是 prompt + 预览素材
2核心能力
01课程 / workshop 定位：持续显示学习目标
02左侧常驻学习目标列表（含三态进度标记）
03MCQ 自测页（选项 + 正确项解释 + 分数提示）
04Wrap-up 页：本轮「You can now…」+ 下一模块预告
05练习页（虚线框 + ✎ Exercise 标签）
06概念页 / 例子页（concept-box + callout 卡片）
07全局页码 / 进度页脚（data-current / data-total）
08暖纸教学配色 + Playfair 标题
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Playfair Display / Noto Sans SC / JetBrains Mono / Inter） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — template-picker.tsx 的 srcDoc + sandbox="allow-scripts allow-same-origin"；同源脚本可自行摘除沙箱，属宿主实现风险。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由经 invokeAgent 以本地已登录 CLI 执行 prompt，权限边界由宿主决定。
- 产物示例含 CDN 外链 — 字体 @import 与共享指令的 cdn.tailwindcss.com 在渲染时请求外网；离线时降级为系统字体。
- 示例页序并非强制 — SKILL.md 的页序是模板建议，共享指令又强调页数由内容决定；长课程机械照抄 7 页会信息过载，需模型自行拆分。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-course-module/）：目录内只有 SKILL.md、example.html，无 .sh/.py/.mjs/.ts 等可执行文件、无 package.json、无安装脚本；目录内不含任何读取凭证 / 环境变量 / cookie 的代码，也没有写盘指令（HTML 由模型在回复正文输出，落盘由宿主前端负责）。example 里的 <script> 计数＝0。SKILL.md 是纯版式 / 内容规范，未点名任何运行时要访问的生成后端或接口；按批4 口径（产物引用不判级、纯指令模板判 green），本模板属纯指令型。目录内实际出现的端点仅以下（均属产物示例或其元数据，由浏览器端拉取，非 skill 代码发起）：fonts.googleapis.com（见于 example.html）。宿主侧行为不判档，另记于 verdict.risks：convert 路由 spawn 本地 agent CLI 并以 stdin 传 prompt（next/src/lib/agents/invoke.ts）、共享指令要求 CDN 引入 Tailwind / Google Fonts（next/src/lib/templates/shared.ts）、预览 iframe 用 sandbox="allow-scripts allow-same-origin"（next/src/components/template-picker.tsx）。
5第二遍独立确认
- [ok] 「左侧学习目标常驻」在示例中是否真的持续可见 — 5 张内容页（Objectives / Concept / Example / Exercise / Check）各带一份 <aside class="sidebar"> 与 <h5>Learning objectives</h5>；Cover 与 Summary 为整页（.slide.full）无侧栏——符合「持续显示」意图。
- [ok] MCQ 自测页是否可判分 — 正确项带 .mcq.correct 且文案含「✓ Correct.」；侧栏同步把前 4 条标 done、第 5 条标 current。
- [ok] SKILL.md 的「含 MCQ 自测页」是否与示例一致 — 示例第 6 页即 <p class="kicker">CHECK YOUR UNDERSTANDING</p> 的单选题页，claim 无夸大。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 fetch/XHR/env/写盘代码；无凭证读取。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只声明字族（Playfair serif / warm paper bg）与页序，全文无 URL；字体 @import 属 example.html（产物示例）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-course-module，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-course-module（Course module deck），与目录内容相符。
6结论
适合：适合高校课程模块、企业内训、workshop 讲义、编程教学（含代码与练习）：需要「目标—讲解—练习—自测」闭环且要能发 PDF 给学员的场景。
不适合：不适合营销 / 发布会（暖纸低对比、无动效）；不适合纯数据汇报（无图表页型，只有卡片与代码）；不适合需要演讲者备注与逐键动画的场合（示例无 JS，翻页由宿主提供）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-course-module.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf859affcf97be929…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE = Apache License, Version 2.0；GitHub API license.spdx_id = Apache-2.0；模板目录内无独立 LICENSE 文件）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。