### 🚀 个人AI教学网站全栈构建

你是一位顶尖的全栈开发者、教育科技产品设计师和网页内容集成专家，精通现代Web开发、UI/UX设计、移动端适配、实时互动技术以及网页数据采集与迁移。你的任务是为我设计并实现一个“个人AI教学网站”，整体风格要炫酷、实用、交互清晰，并确保全局主题统一。

你的核心工作内容包括三大板块：

1. **主站（我的AI教学与作品展示平台）**
   - 首页/一级页面角色：个人AI教学中心，风格前卫且有科技感，但不牺牲信息可读性。
   - **作品集展示**：展示我的AI项目、教学案例与个人作品。每个作品卡片需要具备互动能力，例如点赞、评论、一键打开演示、查看详情等。
   - **在线教学主场景页面**（教学时播放课件与实时交互的页面），页面布局要求清晰分区，至少包含：
     - 中央主区域：居中显示PPT教学课件；
     - 底部区域：显示讲义内容，可随课件同步翻页或手动滚动；
     - 右侧面板：提供三个可切换的功能区：
       - 互动留言区：展示学员实时留言、提问和反馈；
       - 笔记区：支持我（讲师）记录本页要点或保存快速笔记；
       - 小工具区：包含常用教学辅助工具（如随机点名、计时器、计数器、快捷链接等）。
   - **扫码实时互动**：在我教学时，学员可通过手机扫描二维码进入一个轻量化互动页面，发送留言、提问或表情反馈；这些内容须实时同步显示在主教学页面的右侧互动区，实现高效的课堂互动闭环。

2. **二级页面采集与集成**
   - 将以下两个网页的全部有效内容采集、整理并迁移进来，作为我网站的二级页面：
     - AI编程新手工具箱：https://c78fd11f94444a07a79dd67bb9ed3ec0.app.workbuddy.link
     - AI工具导航网页：https://5a47a06af8a44db0aae98ede8301e918.app.workbuddy.link
   - 采集后需重新组织结构与视觉呈现，使这两个二级页面与主站的设计语言、交互方式、字体配色完全统一，不得让人感觉是“外部套壳”。
   - 内容更新时能够人工维护，或预留采集刷新机制。

3. **统一设计系统工程**
   - 为整个网站建立一套统一的设计规范：主色、辅助色、字体、圆角、阴影、动效节奏、按钮/卡片/导航/弹窗组件样式等。
   - 页面之间的跳转层级清晰，二级页面能自然融入整体信息架构。
   - 整个网站必须兼顾炫酷视觉与直观可用性，支持桌面端、平板和手机端的响应式适配。

最终交付时，请输出一份完整的**网站建设方案和实施代码**，至少包括：

- 全站信息架构与页面结构说明；
- 页面布局示意图或结构图；
- 当前台核心页面（作品集页、教学主场景页、扫码互动页、采集后的工具箱二级页、采集后的AI导航页）的详细设计方案；
- 推荐的技术栈选型及理由（需支持前端实时交互、二维码生成、移动端适配、网页内容采集与本地数据管理）；
- 扫码互动的通信机制实现思路；
- 两个外部页面内容的采集步骤、去重清洗方法以及如何迁入统一主题；
- 可运行的项目目录结构，以及关键组件和交互逻辑的代码示例；
- 页面炫酷效果与清晰对比度的平衡方案。

设计质量要求：

- 网站体验流畅，所有交互反馈在毫秒级内可感知；
- 教学过程中，讲师无需操作复杂后台即可管理课件、讲义和实时互动；
- 扫码页面打开速度要快，留言不求复杂，但求稳定、清晰、有秩序；
- 采集后的二级页面内容必须完整保留原有价值，并提升视觉与操作体验；
- 全站无孤立风格页面，每个模块都服从统一设计系统；
- 技术上优先采用主流、稳定、便于后续扩展的解决方案。

请你直接输出可以直接执行或指导编码的完整方案。