An open course on working with AI coding agents, hands-on every week
First piloted at National Taiwan Normal University, 2026
Highlights ·
Projects ·
Videos ·
How it's made ·
Cite
English · 繁體中文 · 简体中文 · 日本語
Students learn to work with AI agents by doing it, every week. AI Agent Literacy teaches students to direct an AI coding agent such as OpenAI Codex, then check and correct its work rather than take it on trust. The teacher writes every script and reviews each video through 7–10 rounds; the videos, the site and the practice computers are built with AI agents (Codex and Claude), so the course itself is a worked example of human-led work with AI. Everything is published under open licenses.
| Pilot site | National Taiwan Normal University (NTNU), 2026, in the course Learning Analytics Tools Implementation Applications |
| Format | Weekly microlearning videos (1–5 min, one idea each) with chapters, numbered key points and time links; a practice computer in the browser; project-based homework; a scenario-based exam |
| Published | Weeks 1–8: 36 videos, about 105 minutes (October 2026), updated weekly |
| Languages | Site in English, Traditional Chinese, Simplified Chinese and Vietnamese, chosen from the browser's language. Weeks 1–8 are fully in English too: every video, the practice computers and the Week 6 exam |
| Access | Mac and Windows supported alike; light and dark themes, screen-reader labels, reduced motion. No login, no cookies and no tracking of individuals; watch progress stays in the student's own browser |
| Licenses | Code MIT; videos and course content CC BY-NC-SA 4.0 |
 |
 |
| A practice computer that feels real | An exam that plays like a game |
- A practice computer that feels real. Each week ends on a simulated Mac or Windows computer in the browser, checked against screenshots of real machines: a terminal with about 100 commands, a file manager, VS Code, system settings and a simulated Codex. Students hand Codex a task and check what it made, again and again, until working with an AI agent becomes second nature; mission cards check each step, and nothing is saved, so mistakes cost nothing.
Simulation-based learning · deliberate practice · immediate feedback - Teacher-written videos, reviewed until they are right. The teacher writes every script, and each video goes through 7–10 rounds of review before release. Every frame is rendered from code rather than generated, so interfaces and steps are exact. Homework videos act out a common mistake before the better way, and one character, Xiao An the book fox, carries the story from week to week.
Microlearning · worked examples · learning from errors - Projects with a story, ending in a real product. Homework moves from Florence museum data and a Tokyo ginkgo walking map to a grade report and a 3D block-world island, then on to team projects. Each one ends in something that works, pushed to GitHub (Projects).
Authentic assessment · project-based learning - Teamwork the way software teams work. In groups of three, students change one project through branches and pull requests; the AI agent runs git and reviews each pull request first, and bugs go into GitHub issues. In the Week 9 escape-room midterm each member takes a role: story and puzzles, mechanics and web, or testing and integration.
Collaborative learning · authentic workflows - An exam that plays like a game. In Week 6, Xiao An calls for help from a torn timeline, and the only way back is a remote computer: levels without hints, built on the earlier weeks' work, then ten questions inside a time tunnel. Sound and visuals are designed for immersion, without dizzying motion.
Scenario-based assessment · game-based learning - Engineering habits for the AI era. The student writes
VERIFY.md, what counts as done; the agent writesPLANS.md, how to get there;TESTS.md, mutation testing and user stories then check the result. Students learn to direct, check and correct an AI agent rather than accept its output.
Human-in-the-loop AI literacy · test-driven development
| Week | Project | What students make | What it trains |
|---|---|---|---|
| 3 | Florence museums | Opening hours and ticket prices of Florence's museums, collected through Codex alone | Clear instructions, AGENTS.md, checking saved files |
| 4 | Tokyo ginkgo walk | A walking-map website built from official sources, published on GitHub | Judging sources, the built-in browser, GitHub |
| 5 | Grade report | A short report on two classes' grades, with three hidden traps | VERIFY.md, data checks, student privacy |
| 7 | Sky Island | A 3D block-world floating island, planned before it is built | PLANS.md, TDD, Git |
| 9 | Escape-room midterm (coming) | A team-built escape-room web game | Roles, testing, integration |
| Final | Own project (coming) | A project of each student's own choosing | All of the above |
All 29 walking-map sites from the first class are in the student gallery.
Topics covered: AI coding agents (OpenAI Codex, Claude Code), giving clear instructions, approvals and permission modes, models, tokens and usage, working folders and the terminal, AGENTS.md and the context window, the built-in browser, GitHub and Mermaid, verification checklists (VERIFY.md), switching models mid-task (GPT-6 Luna → GPT-6.1 Sol), the Codex agent loop and automatic compaction, test-driven development, PLANS.md and TESTS.md, mutation testing, user stories, branches and pull requests, and GitHub issues.
- Roles. The teacher writes the scripts, supplies the material and approves every round; Codex and Claude build the site and the videos together.
- Video from code. Every frame is an HTML, CSS and JavaScript page rendered to video (HTML-to-video) with HyperFrames, GSAP, Playwright and FFmpeg; music and sound effects are synthesized in code. No video-generation model is used. The workflow mainly draws on the opus-video skill, with our own changes for this course.
- Quality review. Each draft is checked on contact sheets, including at phone width, and scored on seven criteria (opening, readability on a phone, natural motion, visual variety, composition, sound and picture in sync, faithfulness to the source). Codex and Claude then review each other's videos, and the teacher gives the final approval. Problems the teacher finds become rules for every later video, and student reports are fixed quickly, often the same day.
- Delivery. A static site on Cloudflare Pages; the videos stream as HLS (hls.js) from a separate Cloudflare media site.
The full workflow and the lessons learned are in docs/about.md (Traditional Chinese and English).
The site is plain HTML, CSS and JavaScript with no build step, so it can be forked for another course:
git clone https://github.com/bigmoumou/AI-Agent-Literacy.git
cd AI-Agent-Literacy
python -m http.server 8000The video streams live on a separate Cloudflare project, so a fork plays them from this course's media site. To use your own videos, change MEDIA in assets/video.js; docs/維護說明.md lists everything else to change.
- Weeks 9–16, published as the course goes on, including the escape-room midterm and the final project
- Full English versions of Weeks 1–8 (October 2026): every video with English on-screen text, the practice computers and the Week 6 exam; English browsers get them automatically
- English versions of Weeks 9–16 as they come out
- Claude versions of the videos: the same lessons, demonstrated with Claude (Claude Code) instead of Codex
- Open-source the teaching-video skill (based mainly on opus-video, with our own changes), with the production prompts and the lessons learned
Code is under the MIT License. Videos and course content are under CC BY-NC-SA 4.0: attribution, non-commercial use, share alike. Student work belongs to each student. Third-party components and images are listed in NOTICE.md.
To cite this work, use the Cite this repository button (CITATION.cff) or:
@misc{chen2026aiagentliteracy,
author = {Chen, Jun-Hao and Liu, Che-You},
title = {{AI} Agent Literacy: An Open Course on Working with {AI} Coding Agents},
year = {2026},
howpublished = {\url{https://ai-agent-literacy.pages.dev/}},
note = {Open educational resource. Source: https://github.com/bigmoumou/AI-Agent-Literacy}
}Questions and suggestions are welcome as issues. Please do not include students' names or student IDs.
- Authors: Jun-Hao Chen (陳俊豪, maintainer), Che-You Liu (劉哲佑), 邱嵦時
- Teaching assistants and students: 許家瑋 (Graduate Institute of Information and Computer Education, National Taiwan Normal University)
- Resource support: the MPIPM Lab (Multi-Phase In Porous Medium) of Prof. Shao-Yiu Hsu (許少瑜), Department of Bioenvironmental Systems Engineering, National Taiwan University
- Tools: the site and the videos were made together with Codex (OpenAI) and Claude Code (Anthropic). The video workflow mainly draws on the opus-video skill by 周行 (Kianzzz), with our own changes; we plan to open-source this teaching-video skill as well.
Thanks to the students taking the course.
繁體中文
課程網站：ai-agent-literacy.pages.dev
每週真的動手，和 AI 代理一起做出作品。 AI Agent Literacy（AI 代理素養）教學生指揮 AI 程式助理（例如 OpenAI 的 Codex）完成實際的工作，並檢查、修正它的成果，而不是照單全收。每支影片的劇本都由授課教師撰寫，經過 7–10 輪審查才上線；影片、網站和練習電腦由 AI 代理（Codex 與 Claude）製作，所以課程本身也示範了「由人主導、和 AI 合作」的完整過程。所有內容以開放授權公開。
| 首個示範場域 | 國立臺灣師範大學（2026），課程「學習分析工具」（Learning Analytics Tools Implementation Applications） |
| 形式 | 每週微學習影片（1–5 分鐘，一支一個概念），附章節、編號重點和時間連結；瀏覽器裡的練習電腦；專題作業；情境式考試 |
| 已公開 | Week 1–8：36 支影片，約 105 分鐘（2026 年 10 月），每週更新 |
| 語言 | 網站有英文、繁體中文、簡體中文、越南文，依瀏覽器語言自動選。Week 1–8 另有完整英文版：每支影片、練習電腦、Week 6 考試 |
| 無障礙與隱私 | Mac 與 Windows 同樣支援；深淺色主題、螢幕閱讀器標示、減少動態效果。不用登入、不用 cookie、不追蹤個人，觀看進度只存在學生自己的瀏覽器 |
| 授權 | 程式 MIT；影片與教材 CC BY-NC-SA 4.0 |
- 像真的一樣的練習電腦。 每週最後都在瀏覽器裡的模擬 Mac 或 Windows 上練習，外觀對照真實電腦的截圖校正：終端機約有 100 個指令，還有檔案管理、VS Code、系統設定和模擬的 Codex。學生把任務交給 Codex，再檢查它做出來的東西，反覆練到和 AI 代理合作變成習慣；任務卡逐步檢查，什麼都不會存下來，錯了就重來。
模擬式學習・刻意練習・即時回饋 - 教師親寫劇本、反覆審查的影片。 每支影片的劇本都由教師撰寫，審查 7–10 輪才上線。畫面由程式逐格繪製，不用生成式影片，介面和步驟都精準。作業影片先演出常見錯誤，再示範比較好的做法；抱書的狐狸「小安」串起每一週的故事。
微學習・範例學習・從錯誤中學習 - 有故事、有成品的作業。 從佛羅倫斯美術館資料、東京銀杏散步地圖、成績分析報告，到方塊世界風格的 3D 空中之島，再到分組專題；每份作業都是一件能運作的成品，推上 GitHub（見下方作業表）。
真實性評量・專題導向學習 - 像軟體團隊一樣分組協作。 三人一組改同一個專案：開分支、發 pull request，由 AI 代理處理 git 並先審每個 PR，bug 寫成 GitHub Issue。Week 9 的期中密室逃脫，每人負責一個角色：劇情與謎題、機關與網頁、測試與整合。
合作學習・真實工作流程 - 像遊戲一樣的考試。 Week 6 小安從破裂的時空發出求救，回去的路只有一台遠端電腦：沒有提示的關卡，內容對應前幾週的實作，最後在時空隧道裡回答 10 題。聲音和畫面都為沉浸感設計，同時避免讓人頭暈的動態。
情境式評量・遊戲式學習 - AI 時代的工程習慣。 學生寫
VERIFY.md，定義怎樣才算完成；AI 代理寫PLANS.md，規劃怎麼做到；再用TESTS.md、突變測試和 user story 檢查成果。學生學會指揮、檢查並修正 AI，而不是照單全收。
人機協作（human-in-the-loop）・測試驅動開發
| 週 | 作業 | 學生做出什麼 | 練到什麼 |
|---|---|---|---|
| Week 3 | 佛羅倫斯美術館 | 只用 Codex 收集佛羅倫斯各美術館的開放時間與票價 | 把事情交代清楚、AGENTS.md、檢查存下來的檔案 |
| Week 4 | 東京銀杏散步地圖 | 從官方資料整理出的銀杏散步地圖網站，發布在 GitHub | 判斷資料來源、內建瀏覽器、GitHub |
| Week 5 | 成績分析小報告 | 兩個班的成績分析報告，藏了三個陷阱 | VERIFY.md、資料檢查、學生隱私 |
| Week 7 | 空中之島 | 先規劃、再動手做的方塊世界風格 3D 浮空島 | PLANS.md、TDD、Git |
| Week 9 | 期中：時空密室（即將推出） | 分組完成的密室逃脫網頁遊戲 | 分工、測試、整合 |
| 期末 | 自己的專案（即將推出） | 自己選題的專案 | 綜合以上 |
第一屆的 29 份銀杏地圖網站都收在作品集。
涵蓋主題：AI 程式助理（OpenAI Codex、Claude Code）、把事情交代清楚、核准與權限模式、模型與 token 用量、工作資料夾與終端機、AGENTS.md 與 context window、內建瀏覽器、GitHub 與 Mermaid、驗證清單（VERIFY.md）、做到一半換模型（GPT-6 Luna → GPT-6.1 Sol）、Codex 的 agent loop 與自動壓縮、測試驅動開發、PLANS.md 與 TESTS.md、突變測試（mutation testing）、user story、分支與 pull request、GitHub issue。
- 分工：教師撰寫劇本、提供教材，每一輪都審核並決定是否上線；網站和影片由 Codex 與 Claude 協力開發。
- 用程式做影片：每一格畫面都是 HTML、CSS、JavaScript 寫成的網頁，用 HyperFrames、GSAP、Playwright、FFmpeg 逐格渲染成影片；配樂和音效也用程式合成。沒有用影片生成模型。製作流程主要參考 opus-video skill，再依課程需求做了個人化修改。
- 品質審查：每一版都看縮圖總表（包括手機寬度），依開場、手機可讀、動作自然、畫面變化、構圖、音畫同步、貼合原始教材七項評分。接著由 Codex 與 Claude 互相審查，教師最後確認才上線。教師指出的問題，會寫成之後每支影片都要遵守的規則；學生回報的問題會盡快修正，常常當天就上線。
- 網站：純靜態網站，放在 Cloudflare Pages；影片用 HLS（hls.js）從另一個 Cloudflare 影片站播放。
詳細流程和學到的經驗在 docs/about.md。
網站是純 HTML、CSS、JavaScript，不用建置，可以直接 fork：
git clone https://github.com/bigmoumou/AI-Agent-Literacy.git
cd AI-Agent-Literacy
python -m http.server 8000影片串流檔放在另一個 Cloudflare 專案，所以 fork 之後影片會從本課程的影片站播放。換成自己的影片時，改 assets/video.js 的 MEDIA；其他要改的地方見 docs/維護說明.md。
- Week 9–16 依課程進度上線，包括期中密室逃脫和期末專題
- Week 1–8 全英文版（2026 年 10 月）：每支影片的畫面和字卡、練習電腦、Week 6 考試；英文瀏覽器自動切換
- Week 9–16 上線後的英文版
- Claude 版影片：同樣的內容，改用 Claude（Claude Code）示範（目前示範的工具是 Codex）
- 開源這套教學影片 skill（主要參考 opus-video，再做個人化修改），以及製作用的 prompt 和製作經驗
程式以 MIT 授權；影片與教材以 CC BY-NC-SA 4.0 授權（標示出處、非商業使用、改作後相同方式分享）。學生作品的著作權屬於學生本人；第三方元件與圖片見 NOTICE.md。
引用時請用 GitHub 右側的 Cite this repository（CITATION.cff），或上方英文段的 BibTeX。問題和建議請開 Issue，請不要寫出學生的姓名或學號。
- 作者：陳俊豪（維護者）、劉哲佑、邱嵦時
- 參與助教與學生：許家瑋（國立臺灣師範大學資訊教育研究所）
- 資源支援：感謝國立臺灣大學生物環境系統工程學系許少瑜教授的 MPIPM 研究室（孔隙介質多相流研究室）提供資源支援
- 工具：網站和影片與 Codex（OpenAI）、Claude Code（Anthropic）協力完成。影片的製作流程主要參考周行（Kianzzz）的 opus-video skill，再依課程需求做了個人化修改；這套教學影片 skill 之後也會開源。
感謝修課的同學。
简体中文
课程网站：ai-agent-literacy.pages.dev
每周真正动手，和 AI 智能体一起做出作品。 AI Agent Literacy（AI 智能体素养）教学生指挥 AI 编程助手（例如 OpenAI 的 Codex）完成实际的工作，并检查、修正它的成果，而不是照单全收。每个视频的脚本都由授课教师撰写，经过 7–10 轮审查才上线；视频、网站和练习电脑由 AI 智能体（Codex 与 Claude）制作，所以课程本身也示范了“由人主导、与 AI 合作”的完整过程。所有内容以开放许可公开。
| 首个示范场域 | 台湾师范大学（2026），课程“学习分析工具”（Learning Analytics Tools Implementation Applications） |
| 形式 | 每周微学习视频（1–5 分钟，一个视频一个概念），附章节、编号要点和时间链接；浏览器里的练习电脑；项目式作业；情境式考试 |
| 已公开 | Week 1–8：36 个视频，约 105 分钟（2026 年 10 月），每周更新 |
| 语言 | 网站有英文、繁体中文、简体中文、越南文，按浏览器语言自动选择。Week 1–8 另有完整英文版：每个视频、练习电脑、Week 6 考试 |
| 无障碍与隐私 | Mac 与 Windows 同样支持；深浅色主题、屏幕阅读器标签、减少动态效果。无需登录、不用 cookie、不追踪个人，观看进度只保存在学生自己的浏览器 |
| 许可 | 代码 MIT；视频与教材 CC BY-NC-SA 4.0 |
- 像真的一样的练习电脑。 每周最后都在浏览器里的模拟 Mac 或 Windows 上练习，外观对照真实电脑的截图校正：终端约有 100 个命令，还有文件管理、VS Code、系统设置和模拟的 Codex。学生把任务交给 Codex，再检查它做出来的东西，反复练到与 AI 智能体合作成为习惯；任务卡逐步检查，什么都不会保存，错了就重来。
基于模拟的学习・刻意练习・即时反馈 - 教师亲写脚本、反复审查的视频。 每个视频的脚本都由教师撰写，审查 7–10 轮才上线。画面由代码逐帧绘制，不用生成式视频，界面和步骤都很精确。作业视频先演出常见错误，再示范更好的做法；抱书的狐狸“小安”串起每一周的故事。
微学习・样例学习・从错误中学习 - 有故事、有成品的作业。 从佛罗伦萨美术馆数据、东京银杏散步地图、成绩分析报告，到方块世界风格的 3D 空中之岛，再到分组项目；每份作业都是一件能运行的成品，推送到 GitHub（见下方作业表）。
真实性评价・项目式学习 - 像软件团队一样分组协作。 三人一组改同一个项目：开分支、提 pull request，由 AI 智能体处理 git 并先审每个 PR，bug 写成 GitHub Issue。Week 9 的期中密室逃脱，每人负责一个角色：剧情与谜题、机关与网页、测试与整合。
合作学习・真实工作流程 - 像游戏一样的考试。 Week 6 小安从破裂的时空发出求救，回去的路只有一台远程电脑：没有提示的关卡，内容对应前几周的实践，最后在时空隧道里回答 10 道题。声音和画面都为沉浸感设计，同时避免让人头晕的动态。
情境式评价・游戏化学习 - AI 时代的工程习惯。 学生写
VERIFY.md，定义怎样才算完成；AI 智能体写PLANS.md，规划怎么做到；再用TESTS.md、突变测试和 user story 检查成果。学生学会指挥、检查并修正 AI，而不是照单全收。
人机协同（human-in-the-loop）・测试驱动开发
| 周 | 作业 | 学生做出什么 | 练到什么 |
|---|---|---|---|
| Week 3 | 佛罗伦萨美术馆 | 只用 Codex 收集佛罗伦萨各美术馆的开放时间与票价 | 把事情交代清楚、AGENTS.md、检查保存下来的文件 |
| Week 4 | 东京银杏散步地图 | 根据官方资料整理的银杏散步地图网站，发布在 GitHub | 判断资料来源、内置浏览器、GitHub |
| Week 5 | 成绩分析小报告 | 两个班的成绩分析报告，藏了三个陷阱 | VERIFY.md、数据检查、学生隐私 |
| Week 7 | 空中之岛 | 先规划、再动手做的方块世界风格 3D 浮空岛 | PLANS.md、TDD、Git |
| Week 9 | 期中：时空密室（即将推出） | 分组完成的密室逃脱网页游戏 | 分工、测试、整合 |
| 期末 | 自己的项目（即将推出） | 自己选题的项目 | 综合以上 |
第一届的 29 个银杏地图网站都收录在作品集。
涵盖主题：AI 编程助手（OpenAI Codex、Claude Code）、把事情交代清楚、批准与权限模式、模型与 token 用量、工作文件夹与终端、AGENTS.md 与上下文窗口、内置浏览器、GitHub 与 Mermaid、验证清单（VERIFY.md）、做到一半换模型（GPT-6 Luna → GPT-6.1 Sol）、Codex 的 agent loop 与自动压缩、测试驱动开发、PLANS.md 与 TESTS.md、突变测试（mutation testing）、user story、分支与 pull request、GitHub issue。
- 分工：教师撰写脚本、提供教材，每一轮都审核并决定是否上线；网站和视频由 Codex 与 Claude 协作开发。
- 用代码做视频：每一帧画面都是 HTML、CSS、JavaScript 写成的网页，用 HyperFrames、GSAP、Playwright、FFmpeg 逐帧渲染成视频；配乐和音效也用代码合成。没有使用视频生成模型。制作流程主要参考 opus-video skill，再根据课程需求做了个性化修改。
- 质量审查：每一版都看缩略图总表（包括手机宽度），按开场、手机可读、动作自然、画面变化、构图、音画同步、贴合原始教材七项评分。然后由 Codex 与 Claude 互相审查，教师最后确认才上线。教师指出的问题，会写成之后每个视频都要遵守的规则；学生反馈的问题会尽快修正，常常当天就上线。
- 网站：纯静态网站，部署在 Cloudflare Pages；视频以 HLS（hls.js）从另一个 Cloudflare 视频站播放。
完整说明见 docs/about.md（繁体中文、英文）。
网站是纯 HTML、CSS、JavaScript，不需要构建，可以直接 fork：
git clone https://github.com/bigmoumou/AI-Agent-Literacy.git
cd AI-Agent-Literacy
python -m http.server 8000视频流媒体文件放在另一个 Cloudflare 项目，所以 fork 之后视频会从本课程的视频站播放。换成自己的视频时，修改 assets/video.js 的 MEDIA；其他需要修改的地方见 docs/維護說明.md（繁体中文）。
- Week 9–16 按课程进度上线，包括期中密室逃脱和期末项目
- Week 1–8 全英文版（2026 年 10 月）：每个视频的画面和字卡、练习电脑、Week 6 考试；英文浏览器自动切换
- Week 9–16 上线后的英文版
- Claude 版视频：同样的内容，改用 Claude（Claude Code）演示（目前演示的工具是 Codex）
- 开源这套教学视频 skill（主要参考 opus-video，再做个性化修改），以及制作用的 prompt 和制作经验
代码采用 MIT 许可；视频与教材采用 CC BY-NC-SA 4.0 许可（署名、非商业性使用、相同方式共享）。学生作品的著作权属于学生本人；第三方组件与图片见 NOTICE.md。
引用时请使用 GitHub 右侧的 Cite this repository（CITATION.cff），或上方英文部分的 BibTeX。问题和建议请开 Issue，请不要写出学生的姓名或学号。
- 作者：陈俊豪（维护者）、刘哲佑、邱嵦时
- 参与助教与学生：许家玮（台湾师范大学资讯教育研究所）
- 资源支持：感谢台湾大学生物环境系统工程学系许少瑜教授的 MPIPM 研究室（孔隙介质多相流研究室）提供资源支持
- 工具：网站和视频与 Codex（OpenAI）、Claude Code（Anthropic）协作完成。视频的制作流程主要参考周行（Kianzzz）的 opus-video skill，再根据课程需求做了个性化修改；这套教学视频 skill 之后也会开源。
感谢修课的同学。
日本語
コースサイト：ai-agent-literacy.pages.dev
毎週、実際に手を動かして AI エージェントと作品を作る授業です。 AI Agent Literacy（AI エージェント・リテラシー）は、OpenAI の Codex などの AI コーディングエージェントに指示を出し、その成果をうのみにせず確かめて直す力を育てるオープンコースです。動画の脚本はすべて担当教員が書き、各動画は 7〜10 回のレビューを経て公開しています。動画・コースサイト・練習用コンピューターは AI エージェント（Codex と Claude）が制作しているため、授業そのものが「人が主導して AI と協働する」実例になっています。すべてオープンライセンスで公開しています。
| 最初の実践の場 | 国立台湾師範大学（2026 年）、授業「学習分析ツール」（Learning Analytics Tools Implementation Applications） |
| 形式 | 毎週のマイクロラーニング動画（1〜5 分、1 本にひとつの概念、チャプター・番号つき要点・タイムリンクつき）、ブラウザ上の練習用コンピューター、プロジェクト型の課題、シナリオ型の試験 |
| 公開済み | Week 1〜8：動画 36 本、約 105 分（2026 年 10 月時点）、毎週更新 |
| 言語 | サイトは英語・繁体字中国語・簡体字中国語・ベトナム語（日本語は未対応）で、ブラウザの言語で自動選択。Week 1〜8 は動画・練習用コンピュータ・Week 6 の試験まで完全な英語版あり |
| アクセシビリティとプライバシー | Mac と Windows の両方に同じように対応。ライト／ダークテーマ、スクリーンリーダー用ラベル、動きを減らす設定。ログイン不要、Cookie なし、個人の追跡なし。視聴の進み具合は学生自身のブラウザにだけ保存 |
| ライセンス | コード MIT、動画と教材 CC BY-NC-SA 4.0 |
- 本物そっくりの練習用コンピューター：毎週の最後に、ブラウザ上の Mac または Windows のシミュレーターで練習します。外観は実機のスクリーンショットと照らし合わせて調整し、約 100 のコマンドが使えるターミナル、ファイル管理、VS Code、システム設定、シミュレーションの Codex まで備えています。学生は Codex に作業を任せ、できあがったものを自分で確かめることをくり返し、AI エージェントとの協働を身につけます。課題カードが一歩ずつ確認し、何も保存されないので、失敗してもやり直せます。
シミュレーション型学習・意図的練習・即時フィードバック - 教員が脚本を書き、納得いくまでレビューする動画：すべての動画の脚本を教員が書き、7〜10 回のレビューを経て公開します。画面は生成 AI ではなくコードで 1 フレームずつ描くため、操作画面と手順は正確です。課題の動画ではまずよくある間違いを演じてから、よりよい進め方を示します。本を抱えたキツネの「小安（シャオアン）」が毎週の物語をつなぎます。
マイクロラーニング・例題学習・誤りから学ぶ - ストーリーがあり、完成品で終わる課題：フィレンツェの美術館データ、東京のイチョウ散歩マップ、成績レポート、ブロックの世界風の 3D の空中の島へと進み、そのあとはチームのプロジェクトに移ります。どの課題も動く成果物として GitHub に push して終わります（下の課題一覧を参照）。
真正の評価・プロジェクト型学習 - ソフトウェアチームと同じ協働：3 人 1 組で、ひとつのプロジェクトをブランチと pull request で進めます。git の操作と各 PR の最初のレビューは AI エージェントが担い、バグは GitHub Issue に書きます。Week 9 の脱出ゲーム型の中間課題では、ストーリーと謎、仕掛けと Web、テストと統合の役割を分担します。
協働学習・実務のワークフロー - ゲームのように進む試験：Week 6 では、裂けた時空から小安が助けを求めてきます。戻る道はリモートのコンピューターだけ。それまでの週の実践にもとづくヒントなしのレベルを進み、最後に時空トンネルの中で 10 問に答えます。音と映像は没入感を重視して設計し、めまいを起こすような動きは避けています。
シナリオ型評価・ゲーム型学習 - AI 時代のエンジニアリング習慣：学生が
VERIFY.mdで「何をもって完成とするか」を決め、エージェントがPLANS.mdで進め方を計画し、TESTS.md・ミューテーションテスト・user story で結果を確かめます。AI の出力をそのまま受け入れず、指示し、確認し、修正する力を育てます。
ヒューマン・イン・ザ・ループ・テスト駆動開発
| 週 | 課題 | 学生が作るもの | 身につくこと |
|---|---|---|---|
| Week 3 | フィレンツェの美術館 | Codex だけを使って集めた、フィレンツェの美術館の開館時間と料金 | 明確な指示、AGENTS.md、保存したファイルの確認 |
| Week 4 | 東京のイチョウ散歩 | 公式の情報源から作るイチョウ散歩マップのサイト（GitHub で公開） | 情報源の見極め、内蔵ブラウザ、GitHub |
| Week 5 | 成績レポート | 2 クラスの成績を分析した短いレポート（3 つの落とし穴入り） | VERIFY.md、データの確認、学生のプライバシー |
| Week 7 | 空中の島 | 計画してから作る、ブロックの世界風の 3D の浮遊島 | PLANS.md、TDD、Git |
| Week 9 | 中間：時空の脱出ゲーム（準備中） | チームで作る脱出ゲームの Web サイト | 役割分担、テスト、統合 |
| 期末 | 自分のプロジェクト（準備中） | 自分で選んだテーマのプロジェクト | ここまでのすべて |
最初の受講生による散歩マップのサイト 29 件は作品集で見られます。
扱うテーマ：AI コーディングエージェント（OpenAI Codex、Claude Code）、明確な指示の出し方、承認と権限モード、モデルとトークン使用量、作業フォルダとターミナル、AGENTS.md とコンテキストウィンドウ、内蔵ブラウザ、GitHub と Mermaid、検証チェックリスト（VERIFY.md）、作業途中のモデル切り替え（GPT-6 Luna → GPT-6.1 Sol）、Codex のエージェントループと自動圧縮、テスト駆動開発、PLANS.md と TESTS.md、ミューテーションテスト、user story、ブランチと pull request、GitHub issue。
- 役割分担：教員が脚本を書いて教材を用意し、毎回レビューして公開を判断します。サイトと動画の開発は Codex と Claude が協力して行います。
- コードで作る動画：すべてのフレームは HTML・CSS・JavaScript で書いた Web ページで、HyperFrames・GSAP・Playwright・FFmpeg で 1 フレームずつレンダリングしています。BGM と効果音もコードで合成しており、動画生成モデルは使っていません。制作フローは主に opus-video skill を参考にし、授業に合わせて独自に手を加えています。
- 品質レビュー：各版をサムネイル一覧（スマートフォン幅を含む）で確認し、冒頭のつかみ、スマートフォンでの読みやすさ、動きの自然さ、画面の変化、構図、音と映像の同期、元の教材への忠実さの 7 項目で採点します。そのうえで Codex と Claude が互いにレビューし、最後に教員が確認してから公開します。教員が指摘した問題は、以降すべての動画で守るルールにしています。学生からの報告にはすばやく対応し、その日のうちに直すことも少なくありません。
- 配信：Cloudflare Pages 上の静的サイトで、動画は別の Cloudflare メディアサイトから HLS（hls.js）で配信しています。
詳しい制作フローは docs/about.md（繁体字中国語・英語）にあります。
サイトは素の HTML・CSS・JavaScript で、ビルドは不要です。そのまま fork できます。
git clone https://github.com/bigmoumou/AI-Agent-Literacy.git
cd AI-Agent-Literacy
python -m http.server 8000動画のストリーミングファイルは別の Cloudflare プロジェクトに置いてあるため、fork したサイトでも動画はこの授業のメディアサイトから再生されます。自分の動画に差し替えるときは assets/video.js の MEDIA を変更してください。ほかの変更箇所は docs/維護說明.md（繁体字中国語）にあります。
- Week 9〜16 を授業の進行に合わせて公開（脱出ゲーム型の中間課題と期末プロジェクトを含む）
- Week 1〜8 の完全英語版（2026 年 10 月）：全動画の画面とテロップ、練習用コンピュータ、Week 6 の試験。英語のブラウザでは自動で切り替え
- Week 9〜16 の英語版（公開に合わせて）
- 動画の Claude 版：同じ内容を Codex ではなく Claude（Claude Code）で実演
- この教育動画用 skill（主に opus-video を参考に独自に改良したもの）をオープンソース化し、制作に使ったプロンプトと制作の知見もあわせて公開
コードは MIT、動画と教材は CC BY-NC-SA 4.0（表示・非営利・継承）で公開しています。学生の作品の著作権は各学生にあります。サードパーティのコンポーネントと画像は NOTICE.md をご覧ください。
引用には GitHub 右側の Cite this repository（CITATION.cff）か、英語セクションの BibTeX をご利用ください。質問や提案は Issue へ。学生の氏名や学籍番号は書かないでください。
- 作者：陳俊豪（Jun-Hao Chen、メンテナー）、劉哲佑（Che-You Liu）、邱嵦時
- 参加した TA と学生：許家瑋（国立台湾師範大学 情報教育研究所）
- リソース支援：国立台湾大学 生物環境システム工学科 許少瑜教授の MPIPM 研究室（多孔質媒体の多相流研究室）にリソース面でご支援いただきました
- ツール：サイトと動画は Codex（OpenAI）と Claude Code（Anthropic）と協力して制作しました。動画の制作フローは主に周行（Kianzzz）さんの opus-video skill を参考にし、授業に合わせて独自に手を加えたもので、この教育動画用 skill も今後オープンソースとして公開する予定です。
受講してくれた学生のみなさんに感謝します。