feat(appendix): 添加多个交互式演示组件，完善 AI/Infra 等章节内容

- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等)
- 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等)
- 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等)
- 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等)
- 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等)
- 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等)
- 新增 Model Finetuning 组件 (FinetuningPipeline 等)
- 更新多个章节的 markdown 内容，集成交互式演示

docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md

@@ -207,7 +207,55 @@ calculatePrice(100, 'svip') // 60
 
 ---
 
-## 5. 总结
+## 5. AI 助力：用大模型学习和应用设计模式
+
+大模型可以帮你识别代码中适合使用设计模式的场景，并给出具体的重构方案。
+
+### 5.1 识别适用模式
+
+> **提示词**：
+> ```
+> 分析以下代码，判断是否存在可以用设计模式改进的地方。
+> 如果有，请说明：
+> 1. 当前代码的问题
+> 2. 推荐使用哪种设计模式
+> 3. 重构后的代码示例
+> 4. 为什么这个模式适合这个场景
+>
+> [粘贴你的代码]
+> ```
+
+### 5.2 用具体场景学习模式
+
+> **提示词**：
+> ```
+> 用一个"外卖点餐系统"的真实场景，分别演示以下设计模式的应用：
+> - 工厂模式：创建不同类型的订单
+> - 观察者模式：订单状态变化通知
+> - 策略模式：不同的配送费计算规则
+>
+> 用 JavaScript 代码示例，每个模式先展示不用模式的问题，
+> 再展示用模式后的改进。
+> ```
+
+### 5.3 判断是否过度设计
+
+> **提示词**：
+> ```
+> 审查以下代码，判断是否存在过度设计的问题。
+> 是否有不必要的抽象、用不到的设计模式、或过早的优化？
+> 如果有，请建议如何简化，遵循 KISS 原则。
+>
+> [粘贴你的代码]
+> ```
+
+::: tip AI 使用建议
+让 AI 用你熟悉的业务场景来解释设计模式，比看抽象的 UML 图有效得多。但记住：AI 可能倾向于推荐更复杂的方案，你需要自己判断是否真的需要。
+:::
+
+---
+
+## 6. 总结
 
 1. **创建型模式**：解决"如何创建对象"的问题，让创建过程更灵活
 2. **结构型模式**：解决"如何组织代码"的问题，让结构更清晰