---
name: 课前准备上线
description: 把企业培训、工作坊、内训或课程的课前准备要求做成一页式公网通知站，并完成本地预览和 Cloudflare Pages 上线。用户提到“课前准备”“课前通知”“课程准备页”“照震裕那个风格”“把课前准备上线”“未来课程按这个流程执行”时，必须使用本技能。默认以震裕科技样例 https://zhenyu-ai-prep-0530.pages.dev/ 和本技能 assets/zhenyu-ai-prep-0530/ 为一比一风格基准。
---

# 课前准备上线

这个技能把“课前准备”从一段通知，变成可直接发给学员的公网交付页：一页静态站、移动端友好、本地可预览、上线后有公开链接。

标准样例：
- 公网样例：<https://zhenyu-ai-prep-0530.pages.dev/>
- 本地冻结样例：`assets/zhenyu-ai-prep-0530/index.html`
- 样例结构说明：`references/style-contract.md`
- 信息采集清单：`references/intake-fields.md`

## 交付原则

采用“复制样例、替换内容、少量定制、验证上线”的方式。不要从空白页重新设计，也不要只交付 Markdown 或文字清单。

默认输出：
- 一个静态站目录，包含 `index.html`、`styles.css`、`script.js`
- 本地预览地址或可打开的本地路径
- Cloudflare Pages 公网地址
- 关键修改说明和仍需客户确认的事项

如果没有特别要求，保存到当前工作区的 `outputs/{客户或课程slug}-prep/`。如果当前工作区已有类似命名习惯，例如 `公网发布_客户课前准备通知/`，优先沿用该习惯。

## 工作流

### 1. 先读取样例

先打开或读取公网样例；如果网络不可用，就读取 `assets/zhenyu-ai-prep-0530/`。同时阅读 `references/style-contract.md`，确认页面骨架和风格约束。

### 2. 补齐必要信息

从用户材料、当前目录、已有课程文件中主动提取信息。只在缺少关键字段时简短追问：
- 客户/公司名和简称
- 课程名称、日期、开课时间、准备截止时间
- 学员需要安装/注册/开通的工具
- 课程平台、资料下载、提报入口等链接
- 课程硬交付或结课目标
- 必须带到课堂的材料
- 发布用项目 slug

更多字段见 `references/intake-fields.md`。

### 3. 搭站

优先复制冻结样例作为起点。可使用：

```bash
node /Users/Administrator/.codex/skills/课前准备上线/scripts/scaffold-prep-site.mjs <目标目录>
```

然后编辑三类内容：
- 文案：公司名、课程名、日期、准备期限、任务、材料、链接、检查清单
- 元信息：`title`、`description`、OG 标题/描述、页脚
- 品牌：简称标识、按钮链接、必要时微调主题色

保持样例的页面骨架：顶部导航、全屏 hero、右侧硬交付卡片、三段 deadline strip、一句话提醒、目标三卡、必须完成、带到课堂、统一入口、最终检查、footer、toast、canvas 动效。

### 4. 文案口径

语气要像课程助教发出的“清晰执行通知”，不是营销海报：
- 直接说“请在某日期前完成”
- 说明为什么要准备：课程会进入真实工具、真实流程、真实材料
- 每个任务都要有动作、验收标准和必要链接
- 强调低敏处理：真实材料可以带，但人名、客户名、金额、账号、密钥、合同编号等要替换
- 结尾用一句话标准总结“做到什么就可以来上课”

### 5. 预览和验证

上线前必须验证：
- 页面在桌面和手机宽度下不重叠、不溢出
- canvas hero 非空，按钮和复制提示可用
- 外部链接能打开，且 `target="_blank"`、`rel="noopener"` 保留
- 日期和截止日一致，检查清单没有遗留旧客户名
- 未暴露真实人名、群名、账号、内部 ID、客户敏感信息

本地静态站可以用任意简单服务器预览，例如在站点目录启动本地服务。做过明显视觉或结构修改时，用浏览器截图检查桌面和移动端。

### 6. 发布上线

默认发布到 Cloudflare Pages。先确认已登录：

```bash
npx wrangler whoami
```

发布命令：

```bash
npx wrangler pages deploy . --project-name <项目slug> --branch main
```

项目 slug 建议使用 `{客户拼音或英文}-ai-prep-{MMDD}`，例如 `zhenyu-ai-prep-0530`。发布成功后，把 Cloudflare 返回的公开 URL 写进最终回复。

如果 Cloudflare 未登录或缺少权限，停下来请用户完成登录/授权；不要伪造上线链接。

## 质量线

完成前逐项检查：
- 与震裕样例在结构、节奏、视觉密度上高度一致
- 第一屏能立刻看懂“谁、什么课、什么时候、课前要完成什么”
- 所有任务卡都能被学员直接执行
- 至少包含一个课程平台/资料入口按钮
- 最终检查清单可逐项勾选
- 公开页面不包含敏感信息
- 最终回复包含本地目录、预览方式、公网地址

