CourseCode Framework

本地服务

coursecodeframework.com科研与教育73 天前更新

代码仓库访问官网

关于 CourseCode Framework

CourseCode Framework 是用于制作 LMS 课程的本地开源框架，可配合 AI 工具或直接编辑项目文件。它支持课程预览与测试，并可导出为 SCORM、cmi5 和 LTI 格式。

主要功能

01通过 AI 工具或项目文件编写课程
02预览课程幻灯片并生成截图
03检查代码并测试交互
04导出 SCORM、cmi5 和 LTI 包
05将文档转换为课程素材
06提供无障碍交互组件

适用场景

01根据主题或大纲制作课程
02利用现有文档改造课程
03发布前检查幻灯片和交互
04为 LMS 打包课程

MCP 相关

内置 MCP 服务可将 AI 工具连接到课程项目，让 MCP 客户端预览和截图幻灯片、检查代码、测试交互、浏览组件并读取课程状态。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "course-code-framework-coursecode": {
      "command": "npx",
      "args": [
        "-y",
        "coursecode"
      ]
    }
  }
}

启动命令npx -y coursecode

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmcoursecode0.4.4stdio

工具

收录的工具列表 · 更新于 3 天前

此工具无需参数。

详细介绍

CourseCode Framework

使用 Claude Code、Codex 或任何支持 MCP 的 AI 工具构建 LMS 课程。

CourseCode Framework 是开源的，可在你的计算机上运行。你的 AI 工具会将课程编写为常规项目文件，供你检查、进行版本管理和编辑。CourseCode 的 MCP 服务可预览、截图、检查并测试它构建的内容。可导出为 SCORM 1.2、SCORM 2004、cmi5 或 LTI 1.3。

从一个主题，或你自己的 PDF、Word 文档和 PowerPoint 演示文稿开始。无需编写代码即可开始；需要时，你可以完全掌控代码。

查看演示

查看 CourseCode 在线演示课程

CourseCode 生态系统

CourseCode Framework（本仓库）是开源的，可独立使用。CourseCode Cloud 是一项可选的付费托管服务，用于部署和交付课程。

框架文档位于 coursecodeframework.com/docs 和 framework/docs/ 中。

功能

适配你的 AI 工具：为 Claude Code 和 Codex 提供插件，并在每个新项目中提供适用于 Claude Code、Codex、Cursor 和 VS Code 的 MCP 设置。任何其他 MCP 客户端都可以运行 coursecode mcp
无需编写代码即可开始：描述你的需求，让 AI 帮助构建幻灯片、互动内容和课程结构
课程现代化：使用现有的 SCORM 课程、PowerPoint 演示文稿、PDF、Word 文档、脚本和 SME 笔记作为源材料，升级课程
LMS 集成：支持 SCORM 1.2、SCORM 2004 和 cmi5 打包，并提供 LTI 1.3 浏览器合约，用于可信的服务端启动
丰富的 UI 组件：图像、视频、折叠面板、标签页，以及自定义沙盒 HTML/JS 嵌入内容
丰富的互动形式：选择题、拖放、填空、配对、排序等
无障碍访问：旨在满足 WCAG 2.1 AA 标准，支持深色模式、高对比度和减少动态效果
TTS 音频旁白：内置播放器，支持 AI 文本转语音生成（Deepgram、ElevenLabs、OpenAI、Google Cloud 或 Azure，使用你自己的 API 密钥）
智能跟踪：参与度要求、学习目标和进度持久化
可主题化设计：使用 CSS 自定义属性轻松定制品牌风格
自定义端点：可选的 Webhook，用于错误报告和学习记录存储
实时预览：可视化编辑、状态面板、配置面板、目录浏览器，以及配有调试工具的完整 LMS 模拟

快速开始

使用插件（推荐）

Claude Code 和 Codex 插件会引导你的 AI 工具从新建项目一直完成 LMS 包，而且无需预先创建项目。目前该插件尚未收录在 Claude Code 或 Codex 插件目录中，因此请从本仓库安装：

# Claude Code
claude plugin marketplace add course-code-framework/coursecode
claude plugin install coursecode@coursecode

# Codex
codex plugin marketplace add course-code-framework/coursecode
codex plugin add coursecode@coursecode

然后在空文件夹中启动 AI 工具，并描述你想要的课程。

插件需要 Node.js 22.15 或更高版本，但无需全局安装 coursecode。如果缺少 Node.js，其 setup 技能会提供安装选项。该插件捆绑了下方的 MCP 服务和六项技能：setup、new-course、outline、build-slides、review 和 publish。请参阅 plugin/README.md。

使用 npx

安装 Node.js 22.15 或更高版本后，创建一个项目：

npx coursecode create my-course

在 Claude Code、Codex、Cursor 或 VS Code 中打开 my-course 文件夹，并描述你想要的课程。项目包含适用于这些工具的 MCP 设置，以及说明创作工作流的 AGENTS.md，因此 AI 工具会自动连接。Claude Code 会提示你一次，以批准项目的 MCP 服务；Codex 会在你信任该文件夹后读取项目设置。

无需使用 AI 工具即可预览：

cd my-course
npx coursecode preview

打开 http://localhost:4173，即可查看并编辑课程。

每个新项目附带的示例课程是一份关于如何使用 CourseCode 的完整指南。

如需完整的操作指南，请从用户指南开始。

要求

需要 Node.js 22.15 或更高版本。你可以通过 npx coursecode 运行所有命令，也可以全局安装 CLI，以使用本指南其余部分中的简短命令 coursecode：

npm install -g coursecode

学习者课程支持 Chrome 111+、Edge 111+、Firefox 114+ 和 Safari 16.4+。SCORM 兼容性描述的是 LMS 通信和打包方式，并不意味着支持 Internet Explorer。

此外，建议准备：

代码或文本编辑器，例如 VS Code、Cursor 等
支持 MCP 的 AI 编码工具，例如 Claude Code、Codex、Cursor 或搭配 GitHub Copilot 使用的 VS Code
用于版本控制的 GitHub Desktop

MCP 集成

CourseCode 内置了 Model Context Protocol（MCP）服务。你的 AI 工具支持 MCP 时，可以直接连接到课程项目，无需将文件粘贴到聊天中。

新项目已包含适用于 Claude Code（.mcp.json）、Codex（.codex/config.toml）、Cursor（.cursor/mcp.json）和 VS Code（.vscode/mcp.json）的 MCP 设置。若要将这些设置添加到现有项目，请运行 coursecode agent-setup。其他任何 MCP 客户端都可以通过以下命令启动服务：

coursecode mcp

从全局安装版本或 npx 运行时，该服务会转交给项目自身的 CourseCode 版本。

通过 MCP，你的 AI 可以：

预览幻灯片并截屏，以检查布局和设计
检查自身代码并自动捕获错误
直接浏览和测试交互
浏览组件目录以查找可用的 UI 元素
读取课程状态，包括参与度、评分和 LMS 数据

请参阅用户指南，了解设置说明。

课程目录

所有课程内容都位于 course/ 文件夹中：

my-course/
├── course/                     # ← Your content goes here
│   ├── course-config.js        # Course structure, format, objectives, settings
│   ├── slides/                 # Slide content files
│   │   ├── intro.js
│   │   ├── content-01.js
│   │   └── assessment.js
│   ├── assets/                 # Images, audio, video
│   │   ├── images/
│   │   └── audio/
│   └── theme.css               # Brand customization
│
├── framework/                  # Framework code (don't edit)
│   └── docs/                   # Guides and templates

你的课程

位置	内容
`course/course-config.js`	课程设置：结构、目标、导航规则
`course/slides/`	幻灯片内容（每张幻灯片一个文件）
`course/theme.css`	品牌颜色和字体排版
`course/assets/`	图片、音频和视频文件

关键文档

所有指南都位于 framework/docs/：

文档	适用对象	用途
`USER_GUIDE.md`	人类	完整指南：工作流、功能、导出和分享
`COURSE_AUTHORING_GUIDE.md`	AI Agent	幻灯片编写、交互、CSS 样式
`COURSE_OUTLINE_GUIDE.md`	AI Agent	如何编写有效的课程大纲
`COURSE_OUTLINE_TEMPLATE.md`	AI Agent	用于开始编写大纲的空白模板
`DATA_MODEL.md`	AI Agent	LMS 数据模型和跟踪字段
`FRAMEWORK_GUIDE.md`	AI Agent	框架内部机制（高级）

AI 驱动的编写工作流

四个步骤，从源材料开始，制作出可用于 LMS 的课程。

步骤 1：转换源材料

将现有内容（PDF、Word 文档、PowerPoint）放入 course/references/，然后运行：

coursecode convert

此命令会将内容转换为 Markdown，并保存到 course/references/converted/。如果从头开始创建课程，可跳过此步骤。

步骤 2：创建课程大纲

让 AI 根据你的内容创建课程大纲。

使用 MCP：AI 会自动读取参考资料和大纲模板
不使用 MCP：将转换后的文档、COURSE_OUTLINE_TEMPLATE.md 和 COURSE_OUTLINE_GUIDE.md 提供给 AI

在开始构建前，先审阅并完善大纲。

步骤 3：构建课程

让 AI 根据你批准的大纲制作幻灯片。

使用 MCP：AI 会读取所有文档、检查自身代码，并截取幻灯片截图以进行验证
不使用 MCP：将大纲和 COURSE_AUTHORING_GUIDE.md 提供给 AI

第 4 步：预览、迭代和导出

coursecode preview

预览服务器提供：

实时重新加载：更改会立即显示
可视化编辑：点击元素即可直接编辑内容
状态面板：一目了然地查看课程健康状况、错误和构建状态
配置面板：调整设置、交互和评估
组件目录：浏览可用的 UI 元素及其实时预览
调试工具：检查 LMS 状态、测试交互、验证跟踪

准备就绪后，构建一个软件包并将其上传到 LMS。ZIP 文件会写入项目文件夹：

coursecode build                    # cmi5 (default)
coursecode build --format scorm1.2  # or scorm2004, lti

其他分享方式：

**单个文件，无需服务器：**便携式 HTML 课程，接收者双击即可打开。进度仅保存在该浏览器中。
```
coursecode export html
```
**审核网站：**用于 GitHub Pages、Netlify 或任何静态托管服务的预览静态副本。
```
coursecode preview --export
```
托管交付（可选）：CourseCode Cloud 是一项面向 CourseCode 课程的付费托管服务。coursecode deploy 会上传一个构建版本；随后，Cloud 会托管该版本、提供可分享的预览链接，并按需生成任何 LMS 格式。请参阅用户指南中的 CourseCode Cloud。

核心命令

命令	描述
`coursecode create <name>`	创建新的课程项目；`create .` 会根据当前文件夹生成标题式课程标题和连字符格式的 npm 名称
`coursecode init [name]`	初始化当前目录，可选择指定课程标题
`coursecode preview`	在本地预览课程
`coursecode export html`	创建一个可分享的课程文件，无需 LMS 或服务器即可打开
`coursecode convert`	将 PDF、Word、PowerPoint 转换为 markdown
`coursecode mcp`	启动 MCP 服务以进行 AI 集成
`coursecode agent-setup`	为 Claude Code、Codex、Cursor 和 VS Code 添加 MCP 设置，并将 `AGENTS.md` 添加到现有项目
`coursecode lint`	验证课程结构和内容
`coursecode build`	构建用于上传到 LMS 的软件包
`coursecode narration`	根据文本生成音频旁白
`coursecode deploy`	将构建版本上传到 CourseCode Cloud（可选；`deployments`、`promote` 和 `preview-link` 可对其进行管理）

完整命令列表和分享选项，请参阅用户指南，或运行 coursecode --help。

UI 组件

使用交互元素制作引人入胜的幻灯片。先借助 AI，再按需直接编辑生成的文件，以获得更多控制权。

媒体和小组件

组件	描述
选项卡	在内容面板之间切换
折叠面板	可展开或折叠的分区
翻转卡片	点击即可显示内容
轮播	滑动浏览幻灯片
模态框	弹出的详细信息视图
交互式时间线	可点击的时间线事件
交互式图像	图像上的热点
嵌入框架	沙箱化的 HTML/JS 内容
音频播放器	带控制功能的旁白播放器
视频播放器	原生、YouTube 或 Vimeo

幻灯片模板

为常见幻灯片类型预先设计的布局。只需告诉 AI 助手你需要什么。

模板	用途
简介卡片	下方列出要点的概览幻灯片
步骤	按顺序排列的说明（带编号）
功能	突出显示 3-4 项关键功能
对比	并排展示不同选项
统计数据	展示有影响力的指标和数字
内容 + 图像	在图示旁展示文本
主视觉	全宽介绍页，带有行动号召
时间线	按时间顺序排列的事件
引言	推荐语和引文
检查清单	任务列表和要求

交互类型

通过吸引学习者参与并检验其理解情况的练习活动。

类型	描述
多项选择	选择一个或多个正确答案
判断题	简单的是／否问题
填空题	输入缺失的文本（支持容错拼写错误）
匹配题	将相关项目连接起来
拖放题	将项目分类
排序题	按正确顺序排列项目
数值题	输入数字（精确值或范围）
热点题	点击图像上的正确区域
李克特量表	用于调查的评分量表

所有交互都会提供即时反馈，也可以设为完成幻灯片的必做项。

跟踪与评分

参与度

要求学习者完成活动后才能继续：

查看所有标签页或手风琴面板
完成交互
观看视频或收听音频
在幻灯片上停留最短时间

门控

在满足条件前锁定幻灯片：

通过评估
达成学习目标
在幻灯片上停留最短时间
设置自定义标记，例如在分支选择后设置

评估

决定课程完成情况的评分测验：

随机排列问题顺序
使用题库增加多样性
配置及格分数
提供带有补救指导的重试机会
将分数报告给你的 LMS

学习目标

根据定义的目标跟踪学习者的进度：

自动：跟踪幻灯片的访问情况
关联：将目标与评估分数关联
报告：将完成状态发送至 LMS

了解更多

用户指南详细介绍了所有内容：

使用预览和可视化编辑工具
所有交互类型（多项选择、拖放、匹配等）
评估和评分
音频和视频
主题和品牌设计
导航和学习者流程控制
导出和分享选项
故障排除

许可证

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。

CourseCode Framework

关于 CourseCode Framework

主要功能

适用场景

MCP 相关

配置

工具

详细介绍

CourseCode Framework

查看演示

CourseCode 生态系统

功能

快速开始

使用插件（推荐）

使用 npx

要求

MCP 集成

课程目录

你的课程

关键文档

AI 驱动的编写工作流

步骤 1：转换源材料

步骤 2：创建课程大纲

步骤 3：构建课程

第 4 步：预览、迭代和导出

核心命令

UI 组件

媒体和小组件

幻灯片模板

交互类型

跟踪与评分

参与度

门控

评估

学习目标

了解更多

许可证

评论

第一次接触 MCP？

MCP（Model Context Protocol）是什么？

MCP 服务和客户端有什么区别？

本地服务与远程服务怎么选？

如何在 Claude、Cursor 等客户端中安装服务？

收录的项目经过审核吗？“认证”标识代表什么？

我维护的项目已被收录，怎样认领？