Everything Claude Code 交互式课程

一门将复杂 AI coding 工具系统化的交互式教程

🚀 在线体验

GitHub Pages 地址: https://simpletfh.github.io/ecc-interactive-course/

点击链接即可直接在浏览器中体验交互式课程，无需下载！

📚 关于这个课程

这是一个交互式 HTML 课程，教你 Everything Claude Code (ECC) 的工作原理。

ECC 是什么？

• 一个 AI coding harness 性能优化系统
• 16 个专业 agents，65+ 技能，40 条命令
• 支持 Claude Code、Cursor、Codex 等多个工具
• GitHub 上 50K+ stars 的开源项目

🎯 课程适合谁？

"Vibe Coders" — 用自然语言指示 AI 工具写代码的非技术人员：

• ✅ 已经用 AI 构建了项目，但不理解底层原理
• ✅ 想更好地指导 AI 编码工具
• ✅ 想检测 AI 错误和调试问题
• ❌ 不需要成为软件工程师

📖 课程内容

5 个模块，24 个屏幕

1. What is Everything Claude Code?

   • 产品介绍 + 用户操作流程
   • 群聊动画（用户 + Claude Code + 4 个 agents）
   • 交互式架构图

2. The Cast of Characters

   • 16 个 Agents、65+ Skills、40 Commands
   • 代码 ↔ 英文对照翻译
   • 拖放匹配测验

3. How They Talk

   • 数据流动画（/tdd 命令流程）
   • 并行执行演示
   • Hook 自动化机制

4. The Outside World

   • 跨平台支持（Claude Code / Cursor / Codex）
   • MCP 集成流程图
   • 安全扫描特性

5. Clever Tricks

   • Token 优化技术
   • 内存持久化动画
   • TDD 自动化流程

🚀 如何使用

方法 1: 直接打开（推荐）

# 克隆仓库
git clone https://github.com/simpletfh/ecc-interactive-course.git
cd ecc-interactive-course

# 在浏览器中打开
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

方法 2: 本地服务器

# 使用 Python
python -m http.server 8000

# 使用 Node.js
npx serve .

# 然后访问 http://localhost:8000

方法 3: 在线预览

直接访问 GitHub Pages: https://simpletfh.github.io/ecc-interactive-course/

✨ 课程特色

1. 真正的"可视化优先"

• 50%+ 内容是视觉元素（动画、图表、卡片）
• 文字简洁（每屏最多 2-3 段短文）
• "Show, Don't Tell" 哲学

2. 丰富的交互元素

• 群聊动画 - iMessage 风格的组件对话
• 数据流动画 - 步骤化的消息传递
• 代码翻译 - 左侧代码，右侧通俗解释
• 分层演示 - 可切换的多层内容
• 拖放测验 - 任务匹配游戏
• 找 Bug 挑战 - 交互式调试体验

3. 生活化隐喻

• Module 1: "Performance Coach"（性能教练）
• Module 2: "Professional Services Firm"（专业服务公司）
• Module 3: "Well-Organized Kitchen"（井井有条的厨房）
• Module 4: "Universal Power Adapter"（通用电源适配器）
• Module 5: "Formula 1 Pit Crew"（F1 维修团队）

4. 实用的测验

• 测试"应用"而非"记忆"
• 场景化问题（"规划时用哪个 agent？"）
• 详细反馈（解释为什么对/错）

📊 统计数据

指标	数值
总模块数	5
总屏幕数	24
交互元素	35+
测验	5
代码示例	8+
文件大小	83KB
总行数	1495

🛠️ 技术栈

• 纯 HTML/CSS/JavaScript - 无框架依赖
• Google Fonts - Bricolage Grotesque + DM Sans + JetBrains Mono
• 设计系统 - 温暖调色板，Catppuccin 代码高亮
• 响应式设计 - 支持桌面和移动设备

📝 生成工具

本课程使用 codebase-to-course 生成：

• 分析 Everything Claude Code 项目
• 设计 5 个模块的 briefs
• 使用 5 个 subagents 并行生成内容
• 总用时约 2 分钟

🎨 设计配置

配色方案: Vermilion（朱红色）

• 主色: #D94F30
• 悬停: #C4432A
• 浅色: #FDEEE9
• 柔和: #E8836C

📄 许可证

MIT License - 详见 LICENSE

🙏 致谢

• Everything Claude Code - 原始项目 affaan-m/everything-claude-code
• codebase-to-course - 生成工具 zarazhangrui/codebase-to-course
• 设计灵感 - 来自 ECC 的温暖设计哲学

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

• GitHub: @simpletfh
• 课程问题: 请提交 Issue

---

Generated with ❤️ using codebase-to-course