背景
最近有速通前端技术栈（html，css，javascript，typescript，vue，react）的需求，有几种方式：看官方文档，看视频，看书。但是官方文档和书都太长，看视频太耽误时间。AI是一个好老师，并且很擅长语法特性和API讲解工作，所以最后决定借助AI完成"速通前端"的任务。
工具
- vscode：用于查看AI生成的代码和文档（.md格式）
- 一些vscode插件，询问AI即可
- opencode：用GLM 4.7和Kimi 2.5生成教程文件
- 先用Plan模式生成计划，之后用Build模式让AI生成教程文件
流程
- 让AI生成教程提示词模板
- 把提示词模板喂给AI（opencode或vscode中的AI），给他主题，让他生成教程。每个章节是一个文件夹
- 用vscode打开生成的教程项目，开始学习，有不懂的可再次询问。在学习过程中进一步纠正bug
- 学习完相关思想后（不用纠结语法），开始干自己的项目。
教程优化提示词模板
用于将学习项目转换为系统化教程的通用提示词
使用说明
本提示词模板适用于任何前端或编程学习项目的教程化改造。使用时只需替换以下变量：
- {项目名称}：具体的项目名称，如"HTML 基础"、"CSS 入门"等
- {章节列表}：项目的所有章节列表
- {学习目标}：项目的总体学习目标
章节文件名规范
章节目录统一使用「序号-主题」的小写命名，序号两位数起步：
01-css-intro
02-selectors
03-box-model
04-layout
05-position
06-responsive
07-css-modular
08-css-practice提示词内容
第一步：分析项目结构
查看当前 {项目名称} 项目，分析项目的整体结构、文件组织和现有内容。第二步：确认优化方向（可选问答）
在开始改造之前，我需要确认几个问题：
1. README.md 的教程风格偏好？
- 步骤引导式：按照 1、2、3 步骤讲解，适合初学者跟着做
- 概念讲解式：先讲原理再讲实践，适合理解性的学习
- 案例驱动式：以实际案例为主，边做边讲解
2. 代码优化程度？
- 仅补充空文件：只完善空的文件
- 优化所有代码：对所有文件进行代码优化和规范化
- 添加注释说明：在代码中添加详细注释解释每行的作用
3. 是否需要实践练习题？
- 需要练习题：每章末尾添加练习题巩固学习
- 不需要练习题：专注于讲解和示例即可第三步：逐章改造（核心任务）
对 {项目名称} 的每个章节进行以下改造：
## 每个 README.md 的改造要求：
### 1. 章节目的
在 README.md 的最开始，用一句话阐明本章的最终目的。
格式：**本章目的：{简短说明}**
### 2. 教程风格
采用概念讲解式教程，通俗易懂地讲解知识点。
### 3. 内容结构
每个 README.md 应包含以下部分：
- **章节目的**：本章要达成的目标
- **内容概述**：简述本章涵盖的主要内容
- **核心概念讲解**：
- 每个知识点都要有通俗的解释
- 使用类比、比喻等方式帮助理解
- 提供实际使用场景
- **代码示例说明**：
- 解释每个代码片段的作用
- 说明重要属性的用途
- **最佳实践**：
- 推荐的做法
- 应避免的做法
- **文件说明**：列出本章包含的文件及其用途
- **练习题**（3 个层次）：
- 基础练习：巩固本章基础知识
- 进阶练习：综合运用本章知识
- 挑战练习：超越本章范围的提升
- **学习目标检查清单**：
- 列出本章应该掌握的知识点
- 使用复选框形式，方便自我检查
### 4. 写作要求
- 使用中文编写
- 语言通俗易懂，避免过于专业的术语
- 多使用类比和实际例子
- 代码示例要有注释
- 保持段落之间有适当的空行，提升可读性
---
## 代码优化要求：
### 1. 规范化
- 统一使用 UTF-8 编码
- 添加正确的 viewport 设置
- 统一使用小写的 HTML 标签
- 合理缩进，保持代码层次清晰
### 2. 语义化
- 使用正确的 HTML5 语义化标签
- 为链接添加 target="_blank" 时同时添加 rel="noopener noreferrer"
- 为图片添加 alt 属性
### 3. 可访问性
- 为表单控件添加 label
- 为重要的元素添加 aria-label 属性
- 为时间信息使用 time 标签
### 4. 注释
- 在关键代码处添加注释
- 说明复杂逻辑的作用
### 5. 完整性
- 确保所有示例代码都是完整的、可运行的
- 补充空白的文件内容
---
## 练习题答案要求：
### 1. 基础练习答案
- 为每个章节的基础练习题提供参考答案
- 文件命名为 `practice-solution.html`（或对应扩展名）
- 答案代码要完整、规范、可运行
### 2. 答案特点
- 代码清晰易读
- 有适当的注释
- 符合最佳实践
- 可以作为学习参考
---
## 总体 README.md 文档要求：
在项目根目录创建一个 README.md 文档，包含以下内容：
### 1. 教程简介
- 简短介绍教程的目的和特点
- 说明适合的学习人群
### 2. 教程特点
- 列出教程的主要特点（如循序渐进、实践导向等）
### 3. 学习路径
- 用 ASCII 图或列表展示学习路径
- 说明章节之间的依赖关系
### 4. 章节内容
- 每个章节的简要说明
- 学习目标
- 学习时间估算
- 是否有练习题答案
### 5. 如何使用
- 详细的学习步骤
- 学习建议
- 学习时间规划
### 6. 目录结构
- 展示项目的完整目录树
- 说明每个文件的用途
### 7. 工具准备
- 必备工具列表
- 可选工具列表
### 8. 常见问题
- 预设常见问题及解答
- 学习过程中的疑问解答
### 9. 学习目标
- 完成教程后能够达到的水平
- 可以做哪些事情
### 10. 参考资源
- 相关的学习资源链接
### 11. 开始学习
- 引导用户开始第一章的学习
---
## 执行顺序
按照以下顺序执行任务：
1. **01-first-chapter** → 02-second-chapter → 03-third-chapter → ...
2. 确保每个章节都按照要求完成 README.md 和代码优化
3. 所有章节完成后，创建练习题答案
4. 最后生成总体 README.md 文档
---
## 示例应用：HTML 基础
### 项目结构
01-html/
├── 01-basic-structure/
├── 02-common-tags/
├── 03-semantic-tags/
├── 04-forms/
├── 05-tables/
├── 06-html-practice/
└── 07-media-misc/
### 章节 1：基础结构
- 章节目的：学会搭建网页的"骨架"
- 内容：HTML 文档结构、meta 标签、head/body
- 练习：创建一个简单的自我介绍页面
### 章节 2：常用标签
- 章节目的：掌握网页最常用的内容元素
- 内容：文本、链接、图片、列表
- 练习：制作一个学习笔记页面
...（以此类推）
---
## 注意事项
1. **一致性**：所有章节的写作风格和格式要保持一致
2. **完整性**：不要遗漏任何要求的内容
3. **实用性**：代码示例和练习题要真实可用
4. **可读性**：使用 Markdown 的格式化功能，提升可读性
5. **可维护性**：代码要规范，注释要清晰，便于后续维护
---
## 输出格式
### 每个 README.md 的格式
```markdown
# {章节名称}
## 本章目的
{简短说明本章的学习目标}
---
## {第一部分标题}
{内容}
...
## 练习题
### 基础练习
{练习要求}
### 进阶练习
{练习要求}
### 挑战练习
{练习要求}
---
## 学习目标检查
- [ ] {知识点 1}
- [ ] {知识点 2}
...总体 README.md 的格式
markdown
# {项目名称} 教程
> {一句话简介}
---
## 教程简介
{详细介绍}
---
## 学习路径
{学习路径图}
...
## 开始学习
{引导语}使用示例
场景 1：CSS 入门教程
替换变量：
- {项目名称} = CSS 入门
- {章节列表} = 选择器基础、盒模型、布局、响应式设计、动画等
- {学习目标} = 掌握 CSS 样式设计，能够美化网页
场景 2：JavaScript 基础
替换变量：
- {项目名称} = JavaScript 基础
- {章节列表} = 变量与数据类型、函数、对象、数组、DOM 操作、事件处理等
- {学习目标} = 掌握 JavaScript 编程，能够实现网页交互
自定义扩展
根据具体项目的特点，可以：
- 增加章节特定内容：如前端项目可以增加"调试技巧"章节
- 调整练习难度：根据学习目标调整练习题的难度层次
- 添加额外资源：如视频链接、推荐书籍等
- 修改输出格式：根据团队习惯调整文档格式
版本历史
- v1.0 (2026-01-30)：初始版本，基于 HTML 基础项目创建
反馈与改进
如果在使用过程中发现问题或有改进建议，可以：
- 调整提示词的具体要求
- 增加/减少某些环节
- 优化输出格式
- 添加新的功能需求