b站熠辉index-VibeCoding编程课

**《B站熠辉 Index – Vibe Coding 编程课》**是一门面向初学者与进阶开发者的实战型编程课程，课程以“Vibe Coding（氛围式编程/沉浸式编程思维）”为核心理念，强调在真实开发场景中通过项目驱动、直觉理解与快速实践来掌握编程技能，而不是单纯依赖死记语法或理论学习。课程整体风格偏实战与工程化，适合希望快速进入开发状态、提升项目能力与代码实现能力的学习者。

课程首先从编程基础与开发思维入手，讲解如何建立正确的编码习惯，包括变量思维、逻辑拆解、模块化设计以及问题分解方法。通过简单但完整的小项目，引导学员理解“如何像开发者一样思考”，而不是只停留在语法层面。同时结合现代开发环境，介绍常用工具链的使用方式，让学习者快速进入真实开发流程。

在核心内容部分，课程围绕Index式项目结构展开，强调从“功能需求 → 代码实现 → 模块拆分 → 优化迭代”的完整开发路径。通过多个实战案例，逐步讲解前后端基础交互、数据处理逻辑、接口设计思路以及简单的系统架构设计方法，使学员能够独立完成中小型项目开发。

课程的一大特点是“Vibe Coding”方法论的引入，即通过持续编码、即时反馈与快速迭代的方式提升学习效率。在这种模式下，学员不再被动学习知识点，而是通过不断写代码、调试和修复问题来建立直觉理解，从而更自然地掌握编程逻辑与工程思维。

在项目实战部分，课程通常会包含多个具有真实应用场景的小型系统，例如工具类应用、数据处理工具、简单Web应用或自动化脚本等。通过这些项目，学员可以学习到需求分析、功能拆解、代码实现以及优化重构的全过程，同时培养解决实际问题的能力。

此外，课程还会涉及基础的工程化知识，如代码结构组织、调试技巧、版本管理基础以及常见错误排查方法，帮助学员从“会写代码”过渡到“能做项目”。同时强调学习节奏的重要性，通过持续练习与项目驱动不断提升熟练度。

通过本课程的学习，学员不仅能够掌握基础编程能力，还能够建立起完整的项目开发思维与工程化意识，逐步形成独立完成开发任务的能力。这种以实战驱动、沉浸式学习为核心的训练方式，使学习过程更加贴近真实开发环境，为后续学习前后端开发、全栈工程以及AI编程应用打下坚实基础。

课程目录：

├─1.1 Cursor-入门-Rules
│   1. Cursor的简介和安装.html
│   2. 熟悉Cursor界面和工作区.html
│   3. Cursor的AI编程核心：Chat.html
│   4. Cursor Rules规则.html
│   cursor-chapter2.mp4
│   cursor-chapter3.mp4
│   cursor-chapter4.mp4
│   cursor教学-chapter1.mp4
│
├─1.2 AI_开发环境(git-nodejs-py)
│   ├─本章节官方没有视频教程
│   ├─1.2.1 安装 Git.html
│   ├─1.2.2 安装 Node.js.html
│   ├─1.2.3 安装Python.html
│   ├─1. Git基础概念.html
│   ├─2. 基于Cursor的git教程实战.html
│   └─3. 基于git命令的教学实战.html
│
├─1.3 AI前端概念_Git使用_安全实践
│   ├─1.3.1 AI时代下的前端核心概念+最佳实践
│   │   1.3.1 AI时代下的前端核心概念+最佳实践.html
│   │   4个概念new2.mp4
│   │   两个网站.mp4
│   │   前端概念.mp4
│   │   前端语言.mp4
│   │   最佳实践new.mp4
│   │
│   ├─1.3.3 Git入门：必学！AI编程的后悔药
│   │   1. Git基础概念.html
│   │   2. 基于Cursor的git教程实战.html
│   │   3. 基于git命令的教学实战.html
│   │   chapter1-git基础-1.mp4
│   │   chapter2.1-gitui-1.mp4
│   │   chapter3GIT命令行-1.mp4
│   │
│   ├─1.3.4 AI编程中安全的最佳实践
│   │   1.3.4 AI编程中安全的最佳实践.html
│   │   安全策略完整版.mp4
│   │
│   └─1.3.2 新手入门后端必要概念 + 最佳实践.html
│
├─2.1.1 AI_NextJS框架
│   1. 框架基础与项目创建.html
│   2. 项目结构与路由系统.html
│   3. 组件与UI开发.html
│   4. Next.js后端能力.html
│   5. 部署全栈项目.html
│   chapter1-1.mp4
│   chapter2-1.mp4
│   chapter3-1.mp4
│   chapter4-1.mp4
│   chapter5-1.mp4
│
├─2.1.2 AI_Python
│   ├─本章节官方没有视频教程
│   └─2.1.2 AI辅助下的后端开发入门_ Python的基本使用.html
│
├─2.1.3 AI_Flask实现一个简单的API
│   ├─本章节官方没有视频教程
│   ├─源码
│   │   app.py
│   │   food-wheel.html
│   │   wheel.js
│   │
│   ├─2.1.3 AI辅助下的后端开发入门_ 用Flask实现一个简单的API.html
│   └─项目实现效果.mp4
│
├─2.1.4 AI_数据库开发&AI编写SQL
│   ├─本章节官方没有视频教程
│   └─2.1.4 AI时代的数据库开发 + 编写SQL指南.html
│
├─2.2.1 入门腾讯云CloudBase
│   1. 认识腾讯云开发Cloudbase.html
│   2. 开发AI画廊前端.html
│   3. 完成用户登陆.html
│   4. 完成AI图像生成功能.html
│   5. 完成发布作品的功能.html
│   cloudbase-01.mp4
│   cloudbase-02.mp4
│   cloudbase-03-final.mp4
│   cloudbase-04-final.mp4
│   cloudbase-05-final.mp4
│   miniprogram.zip
│
├─2.2.2 出海_Supabase
│   1.什么是Supabase？.html
│   2.给项目初始化前端模板.html
│   3.轻松接入Supabase.html
│   4.轻松接入邮件登陆注册功能（Auth）.html
│   5.用Cursor给Todo List实现增删改查（Database）.html
│   6.增加文件上传功能（Storage）.html
│   7.给应用增加实时功能（Realtime）.html
│   8.数据安全设置（RLS）.html
│   chapter2：前端-1.mp4
│   chapter3：轻松接入supabase-1.mp4
│   chapter4：接入注册登陆-1.mp4
│   chapter5：接入数据库-1.mp4
│   chapter6：文件上传功能-1.mp4
│   chapter7-realtime-1.mp4
│   chatper1-1.mp4
│   with-supabase-app.zip
│   with-supabase-app 2.zip
│
├─3.1.1 搭建网站+ AI(R1)客服
│   ├─下载素材
│   │   doc.md
│   │   shadcn-landing-page-main.zip
│   │   shadcn-landing-page.zip
│   │
│   ├─chapter3-dify-1.mp4
│   ├─chapter4-智能客服接入网站-1.mp4
│   ├─chatper-2火山引擎-1.mp4
│   ├─chatper1-做网站-1.mp4
│   └─快速创建官网+添加满血版DeepSeek R1智能客服.html
│
├─3.1.2 开发Chrome插件：把上班刷知乎变成看飞书文档
│   3.1chrome-dev-install.mp4
│   3.3复制知乎所有的答案.mp4
│   3.4实现类似kimi豆包这样的功能.mp4
│   3.5优化chrome插件.mp4
│   3.6构建和发布Chrome插件 (1).mp4
│   3.6构建和发布Chrome插件.mp4
│   开发Chrome插件：把上班刷知乎变成看飞书文档.html
│   chrome-extension-boilerplate-react-vite-main (1).zip
│   chrome-extension-boilerplate-react-vite-main.zip
│   dist.zip
│
├─3.1.3 赚钱网站开发：接入国内个人支付（无需营业执照）
│   使用Vercel免费部署上线.mp4
│   初始化项目+支付流程说明.mp4
│   开发一个能赚钱的网站：接入国内个人支付（无需营业执照）.html
│   接入支付流程开发.mp4
│   happyaicdong-template-main.zip
│   happyaicoding-template-completed.zip
│   happyaicoding-template-starter.zip
│
├─3.1.4  用DeepSeek + Qwen-VL 做个AI待办事项应用
│   chapter2-接入deepseek-1.mp4
│   chapter3-接入qwen模型-1.mp4
│   chatper1-项目初始化-1.mp4
│   用DeepSeek + Qwen-VL_ 做个AI待办事项应用.html
│   ai-todo.zip
│   ai-todo_images.zip
│   with-supabase-app.zip
│
├─3.1.5 复制一个Midjourney：登陆+通义模型+支付+token管理
│   chapter0-项目介绍.mp4
│   chapter1-初始化项目.mp4
│   chapter2-完成前端.mp4
│   chapter3-接入AI文生图能力.mp4
│   chapter4-接入数据库.mp4
│   chapter5-接入支付.mp4
│   复制一个Midjourney：登陆+通义模型+支付+token管理.html
│   ai-images-creator-main.zip
│   with-supabase-app.zip
│
├─3.1.6 用Chrome插件爬取一切网页数据
│   _chrome-crawler-start-final.mp4
│   chrome-crawler-Coze-final.mp4
│   chrome-crawler-install-final.mp4
│   chrome-crawler-stock-final.mp4
│   setup-cyowcopy-1.9.1.872-x64.exe
│   用Chrome插件爬取一切网页数据.html
│   chrome-extension-crawler-main.zip
│
├─3.1.7 使用v0 + supabase + Cursor创建一个导航站(上)
│   AI导航站-01-4K.mp4
│   AI导航站-02-4K.mp4
│   AI导航站-03-4K.mp4
│   AI导航站-04-4K.mp4
│   AI导航站-05-4K.mp4
│   AI导航站-06-4K.mp4
│   AI导航站开头-4K.mp4
│   使用v0 + supabase + Cursor创建一个导航站(上).html
│   ai-tools-directory-main.zip
│   ai-tools-directory.zip
│
├─3.1.8 使用Cursor + supabase + ChatGPT o3开发导航站后台（下）
│   AI导航站后台_00-4K.mp4
│   AI导航站后台_01-4K.mp4
│   AI导航站后台_02-4K.mp4
│   AI导航站后台_03-4K.mp4
│   AI导航站后台_04-4K.mp4
│   AI导航站后台_05-4K.mp4
│   使用Cursor + supabase + ChatGPT o3开发导航站后台（下）.html
│   ai-dirs-admin-main.zip
│   dirs-admin.zip
│
├─3.1.9 用lovable + 视觉模型：开发拍照识别升糖指数的H5
│   用lovable + 视觉模型：开发拍照识别升糖指数的H5.html
│   食物升糖识别-00-4K.mp4
│   食物升糖识别-01-4K.mp4
│   食物升糖识别-02-4K.mp4
│   食物升糖识别-03-4K.mp4
│   食物升糖识别-04-4K.mp4
│   blood-sugar-smart-scan-main.zip
│
├─3.1.10  全栈天气OOTD小程序：文生图
│   chapter2-原型图-1.mp4
│   chapter3-小程序前端-1.mp4
│   chapter4-coze后端api-1.mp4
│   chapter5-接入后端api-1.mp4
│   全栈天气OOTD小程序：AI生图.html
│   项目介绍-1.mp4
│   ootd-mini-program.zip
│
├─3.1.11 iOS应用开发：开发一款AI语音记账软件（基于Qwen Omni）
│   iOS应用开发：开发一款AI语音记账软件（基于Qwen Omni） (1).html
│   iOS开发_01_2K.mp4
│   iOS开发_02_2K.mp4
│   iOS开发_04_2K.mp4
│   iOS开发_05_2K.mp4
│   ios开发_03.mp4
│   VoiceAccountClient.zip
│   VoiceAccountServer.zip
│
├─3.1.12 开发Elon Musk多语言简历网站：理解国际化 + 开发流程
│   开发Elon-Musk多语言简历网站-01.mp4
│   开发Elon-Musk多语言简历网站-02.mp4
│   开发Elon-Musk多语言简历网站-03.mp4
│   开发Elon-Musk多语言简历网站-04.mp4
│   开发Elon-Musk多语言简历网站-05.mp4
│   开发Elon Musk多语言简历网站：理解国际化 + 开发流程.html
│   elon-musk-resume.zip
│   elonmusk_resume_i18n-main.zip
│
├─3.1.13 AI毒舌电影小程序：DeepSeek 如何评价春节档电影？
│   ├─相关文件
│   │   movie.data.ts
│   │   哪吒2.json
│   │   唐探1900.json
│   │   封神二.json
│   │   射雕英雄传.json
│   │   春节档电影知识库.xlsx
│   │   熊出没·重启未来.json
│   │   蛟龙行动.json
│   │   newyear-movie-miniapp-demo-main.zip
│   │   星星icon.zip
│   │
│   ├─AI毒舌电影小程序：DeepSeek 如何评价春节档电影？.html
│   ├─movie.data.ts
│   ├─哪吒2.json
│   ├─唐探1900.json
│   ├─封神二.json
│   ├─射雕英雄传.json
│   ├─春节档电影知识库.xlsx
│   ├─本章节视频播放地址.md
│   ├─熊出没·重启未来.json
│   ├─蛟龙行动.json
│   ├─newyear-movie-miniapp-demo-main.zip
│   └─星星icon.zip
│
├─3.1.14 Claude Code入门 开发一个超赚钱的AI编程文档工具
│   Claude Code入门_ 开发一个超赚钱的AI编程文档工具.html
│   claudecode-01-2K.mp4
│   claudecode-02-2K-0710.mp4
│   claudecode-03-2K-0710.mp4
│   vibe-guide-tutorial-main.zip
│
├─3.1.15 Creem支付完整入门(上)：新手最容易接入的海外支付方式？
│   Creem支付完整入门（上）：新手最容易接入的海外支付方式？.html
│   creem-链接支付-1-字幕版.mp4
│   creem-集成支付-2-字幕版.mp4
│   creem教程-开头-字幕版.mp4
│   creem-tutorial-main.zip
│
├─3.1.16 Creem支付完整  入门（下）：让全世界都来学中国话 + 实现美金收款！
│   Creem支付完整入门（下）：让全世界都来学中国话 + 实现美金收款！.html
│   creem教程-01-2K.mp4
│   creem教程-02-2K.mp4
│   creem教程-03-2K.mp4
│   creem教程-04-2K.mp4
│   type-cn-start-template.zip
│   type-cn-test-cursor.zip
│
├─3.1.17 N8N + Claude Code 自动获取B站热榜、保存选题Agent！
│   N8N + Claude Code_ 自动获取B站热榜、保存选题Agent！.html
│   bilibili-video-agent.json
│   n8n-01-2K.mp4
│   n8n-02-2K.mp4
│   n8n-03.mp4
│   n8n-04-2K.mp4
│   n8n-05-2K.mp4
│   n8n-bilibili-beike-main.zip
│   next-drizzle-starter.zip
│
├─3.1.18 N8N MCP + CC：开发一个小红书笔记数据自动采集 + AI仿写    Agent
│   N8N MCP + Claude Code：开发一个小红书笔记数据自动采集 + AI仿写Agent (1).html
│   n8n下-01-2K.mp4
│   n8n下-02-2K.mp4
│   n8n下-03-2K.mp4
│   n8n下-04.mp4
│   n8n-xhs-chrome-extenison-main.zip
│   n8n-xhs-main.zip
│   xhs-n8n-web-main.zip
│
├─3.1.19 Dify Agent实战（上）：最强售前！给客户配一个新能源选车Agent
│   Dify Agent实战(上)：最强售前！给客户配一个新能源选车Agent.html
│   data.csv
│   dify-01-2K.mp4
│   dify-02-2K.mp4
│   dify-03-2K.mp4
│   dify-04-2K.mp4
│   dify-findbest-ev-main.zip
│   find-best-ev-main.zip
│
├─3.1.20 Dify Agent实战(下)：开发一个新能源汽车之家
│   Dify Agent实战(下)：开发一个新能源汽车之家 (1).html
│   dify下-01-2K.mp4
│   dify下-02-2K.mp4
│   dify下-03.mp4
│   dify下-04.mp4
│   ev_models_rows.csv
│   dify-findbset-ev-webpage-main.zip
│
├─3.1.21 用Claude Code开发商业化项目：完整工作流 + 最佳实践！
│   chapter1.mp4
│   chapter2.mp4
│   chapter3.mp4
│   chapter4.mp4
│   用Claude Code开发商业化项目：完整工作流 + 最佳实践！.html
│   minapp-tdesign-starter-main.zip
│   prototype.zip
│   tennis-miniprogram-ui-main.zip
│
├─3.1.22 Codex入门完整版：制作一个英语背单词应用
│   Codex入门完整版：制作一个英语背单词应用.html
│   codex-01-2K.mp4
│   codex-02-2K.mp4
│   codex-03-2K.mp4
│   codex-04-2K.mp4
│   codex-admin-nextjs-main.zip
│   codex-h5-nextjs-main.zip
│
├─3.1.23 Github Spec kit：规范文档驱动开发如何实现？
│   Github的spec-kit：规范文档驱动开发如何实现？.html
│   spec-kit-01-2K.mp4
│   spec-kit-02-2K.mp4
│   spec-kit-03-2k.mp4
│   spec-kit-beike-main.zip
│
├─3.1.24 MCP完整实战：FigmaChrome DevTools等多个MCP
│   MCP完整实战：Figma_Chrome DevTools等多个MCP (1).html
│   MCP实战-01-2K.mp4
│   MCP实战-02-2K.mp4
│   MCP实战-03.mp4
│   coffee-bean-mcp-main.zip
│   mcp-tutorial-beike-figma.zip
│   mcp-tutorial-beike-main.zip
│
├─3.1.25 iOS教程：用EasyApp + Claude Code开发一个宠物训练App，含订阅支付
│   05.mp4
│   easyapp-01-2K.mp4
│   easyapp-02-2K.mp4
│   easyapp-03-2K.mp4
│   easyapp-04-final-2K.mp4
│   iOS教程：用EasyApp + Claude Code开发一个宠物训练App，含订阅支付.html
│   easy-app.zip
│
├─3.2.1 基于模板，拥有你的第一个博客！
│   chapter1-开发博客-1.mp4
│   chapter2-部署-1.mp4
│   基于模板，拥有属于自己的第一个博客！.html
│   blog-starter-app.zip
│   my_nextjs_blog-main.zip
│   templates_blog-starter-app-main.zip
│
├─3.2.2 ShipAny：1小时开发面向海外游客「中国攻略·聊 AI」旅游网站（付费模板不赠送源码）
│   1. ShipAny和项目介绍.html
│   2. ShipAny快速开始.html
│   3. 接入Google登录.html
│   4. 开发支付功能.html
│   5. 开发PDF下载功能.html
│   6. AI对话功能（OpenRouter + Qwen3）.html
│   7. 轻松设置管理后台.html
│   8. 部署上线 + 课后作业.html
│   ShipAny-01-2K.mp4
│   ShipAny-02-2K-30.mp4
│   ShipAny-03-2K.mp4
│   ShipAny-04-2K.mp4
│   ShipAny-05-4K.mp4
│   ShipAny-06-2K.mp4
│   ShipAny-07-2K.mp4
│   ShipAny-08-2K.mp4
│   赠送shipany模板.zip
│
├─3.2.3 MkSaaS模板：开发AI试衣出海产品，赚2份钱！
│   ├─赠送mksass模板
│   │   mksaas-template-main.zip.009ccfeb
│   │   mksaas-template-main.zip
│   │   mksaas_template-cloudflare.zip
│   │
│   ├─MkSaaS模板：开发AI试衣出海产品，赚2份钱！.html
│   ├─mksaas-01-2K.mp4
│   ├─mksaas-02-2K.mp4
│   ├─mksaas-03-2K.mp4
│   ├─mksaas-04-2K.mp4
│   ├─mksaas-05-2K.mp4
│   ├─mksaas-06-2K.mp4
│   ├─mksaas-07.mp4
│   ├─mksaas-08-2K.mp4
│   └─cloth-split-demo-main.zip
│
├─3.3.1 Vercel教程：免费部署你的网站项目
│   Vercel教程：免费部署你的网站项目.html
│   chapter1.mp4
│   chapter2.mp4
│   chapter3-1.mp4
│   chapter4-1.mp4
│   chapter5-1.mp4
│   chapter6-1.mp4
│   vercel-tutorial-beike-init.zip
│   vercel-tutorial-beike-main.zip
│
├─3.3.2 新手超友好！在Zeabur部署你的所有服务
│   zeabur-0-2K-0704.mp4
│   zeabur-01.mp4
│   zeabur-02.mp4
│   zeabur-03.mp4
│   新手超友好！在Zeabur部署你的所有服务.html
│   plants-admin-nextjs-main.zip
│   plants-py-main .zip
│   plants-react-vite-main.zip
│
├─3.3.3 Cursor2.0 Agent大更新（加更）
│   cursor2-1.mp4
│   cursor2-2-2K.mp4
│   cursor2-3.mp4
│   3.3.3 Cursor2.0 Agent大更新（加更）.zip
│   cursor2-0-test-main.zip
│
├─3.3.4 用开源赚钱？结合Stitch + Github开源复刻草料二维码
│   Stitch-01-2K.mp4
│   Stitch-02-2K.mp4
│   stitch-03-2K.mp4
│   stitch-04-2K.mp4
│   qrcode-opensource-stitch-2025-11-19-main.zip
│   用开源赚钱？结合Stitch + Github开源复刻草料二维码_files.zip
│
├─3.3.5 Web3项目：用Opus4.5开发Crypto-策略监控飞书机器人
│   chapter1.mp4
│   chapter2.mp4
│   chapter3.mp4
│   chapter4.mp4
│   coinmarketcap_feishu-main.zip
│
├─3.3.6 宝塔部署入门：新手真正理解项目部署全流程
│   chapter1-1.mp4
│   chapter2-1.mp4
│   chapter3-1.mp4
│   chapter4-1.mp4
│   baotao-tutorial.zip
│   宝塔部署入门：新手真正理解项目部署全流程_files.zip
│
├─3.3.7 AI Studio做好的前端，如何低成本商业化？（上：出海篇）
│   chapter1-1.mp4
│   chapter2-1.mp4
│   chapter3-1.mp4
│   chapter4-1.mp4
│   chapter5-1.mp4
│   chapter6-1.mp4
│   chapter7-1.mp4
│   AI Studio做好的前端，如何低成本商业化？（上：出海篇）_files.zip
│   pets-santa-code.zip
│   pets-santa-online-main.zip
│
├─3.3.8 Agent Skills入门：在Vibe Coding中使用Skills
│   Agent Skills入门：在Vibe Coding中使用Skills.md
│   bilibili-data.json
│   chapter1-1.mp4
│   chapter2-1.mp4
│   chapter3-1.mp4
│   assets.zip
│   cc-skills-nextjs-main-done.zip
│   cc-skills-nextjs-main.zip
│   video.zip
│
├─3.3.9 ShipAny2完整教程 AI漫剧出海项目制作
│   shipany-01-2K.mp4
│   shipany-02-2K.mp4
│   shipany-05-2K.mp4
│   shipany2-03-2K.mp4
│   shipany2-04-2K.mp4
│   网页文档内容.md
│   风格数据准备-index.json
│   assets.zip
│   图片素材..zip
│   图片素材2.zip
│   视频素材.zip
│
├─3.3.10 AI小程序实战(上)：开发一个Seedance2.0提示词售卖
│   AI小程序实战(上)：开发一个Seedance2.0提示词售卖.md
│   prompts.json
│   提示词小程序-01-2K.mp4
│   提示词小程序-02-2K.mp4
│   提示词小程序-03-2K.mp4
│   提示词小程序-04-2K.mp4
│   提示词小程序-05-2K.mp4
│   assets.zip
│   minapp-tdesign-starter-main.zip
│   videos.zip
│   wxpay-cloudbase-tutorial-main.zip
│
├─Mksaas和shipany 赠送模板
│   赠送mksass模板.zip
│   赠送shipany模板.zip
│
├─openclaw更新
│   openclaw-1.mp4
│   openclaw-2.mp4
│   openclaw-3.mp4
│   openclaw-4.mp4
│   openclaw-05.mp4
│
└─学员专属模板
    neobrutalism-blog.zip
    payment-template.botbio.site-main.zip
    shadcn-template-main.zip
    simple-blog.zip