Vibe Coding Workshop 前置文档框架¶

文档说明¶

目的：为参与者提供详细的self-paced学习材料
使用方式：Workshop前根据文档学习，完全不学也行
要求：写得很细，包含所有必要信息

文档结构¶

第一部分：欢迎与介绍¶

1.1 Workshop介绍¶

She Nicest介绍
Workshop目标和流程
参与者的收获

1.2 Vibe Coding介绍¶

什么是Vibe Coding
为什么叫"Vibe" Coding
Vibe Coding的核心理念
与AI协作编程的体验

第二部分：工具安装指南（很细）¶

2.1 必备工具清单¶

[ ] Cursor / Claude Code / 其他AI编程工具
[ ] Node.js / Python运行环境
[ ] GitHub账号
[ ] Vercel账号（用于部署）
[ ] Gemini 3（可选，但推荐）

2.2 Cursor安装指南¶

Windows系统
下载链接
安装步骤（详细截图）
常见问题解决
Mac系统
下载链接
安装步骤（详细截图）
常见问题解决
Linux系统
下载链接
安装步骤（详细截图）
常见问题解决

2.3 Node.js安装指南¶

Windows系统
下载链接
安装步骤（详细截图）
验证安装
常见问题解决
Mac系统
下载链接
安装步骤（详细截图）
验证安装
常见问题解决
Linux系统
下载链接
安装步骤（详细截图）
验证安装
常见问题解决

2.4 GitHub账号注册¶

注册步骤（详细截图）
基本设置
创建第一个仓库
常见问题解决

2.5 Vercel账号注册¶

注册步骤（详细截图）
基本设置
连接GitHub
常见问题解决

2.6 Gemini 3安装指南（避免翻墙相关表述）¶

什么是Gemini 3
Gemini 3的介绍和功能
为什么推荐使用Gemini 3
Gemini 3的优势
安装前准备
需要的账号类型（美区账号）
需要的环境准备
注意事项
安装步骤（详细，避免翻墙相关表述）
苹果手机：
- 注册美区账号的步骤（详细截图）
- 注意事项和常见问题
- 预计时间：2小时+，且不一定成功
安卓手机：
- 配置步骤（详细截图）
- 注意事项和常见问题
- 预计时间：1小时+
电脑端：
- 安装步骤（详细截图）
- 注意事项和常见问题
验证安装
如何验证Gemini 3是否安装成功
如何测试基本功能
常见问题解决
账号问题
环境问题
功能问题
注意事项
安装Gemini 3需要一定时间和技术基础
如果遇到问题，可以在Workshop现场寻求帮助
Gemini 3是可选工具，不是必需的

第三部分：Vibe Coding入门¶

3.1 产品开发全流程框架¶

从想法到上线的完整流程
需求分析 → 技术架构 → 开发 → 测试 → 部署
每个环节的作用和重要性
可视化流程图

3.2 AI编程工具使用¶

Cursor基本操作
界面介绍
基本功能
与AI对话的技巧
代码生成和修改
Claude Code基本操作
界面介绍
基本功能
与AI对话的技巧
代码生成和修改
其他AI编程工具
工具对比
选择建议

3.3 前端开发基础¶

HTML/CSS/JavaScript基础概念
HTML基础
CSS基础
JavaScript基础
三者之间的关系
如何使用AI生成前端代码
Prompt技巧
代码优化
常见问题
常见前端框架介绍
Next.js
React
Vue
选择建议

3.4 后端开发基础¶

后端的作用和功能
什么是后端
后端的作用
前后端的关系
如何使用AI生成后端代码
Prompt技巧
API设计
数据库设计
常见后端框架介绍
Node.js
Python
选择建议

3.5 第一个Vibe Coding项目¶

项目选择
简单项目推荐
项目难度评估
项目实现
需求分析
技术架构
开发实现
测试验证
项目部署
部署准备
部署步骤
部署验证

第四部分：低门槛本地部署¶

4.1 部署的重要性¶

为什么需要部署
部署的作用和价值
传统部署的痛点

4.2 Vercel.app零门槛部署方案¶

Vercel.app介绍
什么是Vercel
Vercel的优势
为什么选择Vercel
部署前准备
账号准备
项目准备
环境准备
部署步骤（详细截图）
连接GitHub
选择项目
配置设置
一键部署
获得链接
部署后管理
如何更新项目
如何查看日志
如何管理域名
常见问题解决
部署失败
链接无法访问
更新问题

4.3 EdgeOne Pages（国内可用，推荐）¶

详细教程：参考《EdgeOne_Pages部署教程.md》文档
快速概览：
什么是EdgeOne Pages
EdgeOne Pages的优势
为什么推荐EdgeOne Pages（国内可用）
部署前准备
账号准备（腾讯云账号）
项目准备
MCP协议准备
部署步骤（详细截图）
通过MCP协议部署（推荐）
通过控制台部署（备选）
一键部署
获得链接
部署后管理
如何更新项目
如何查看日志
如何管理域名
常见问题解决
部署失败
链接无法访问
更新问题

4.4 GitHub Pages（适合静态网站）¶

详细教程：参考《GitHub_Pages部署教程.md》文档
快速概览：
什么是GitHub Pages
GitHub Pages的优势（完全免费，与GitHub集成）
适用场景（静态网站）
部署前准备
GitHub账号准备
项目准备
Git安装（如需要）
部署步骤（详细截图）
通过GitHub网页部署（最简单）
通过Git命令行部署（推荐）
使用GitHub Desktop部署（图形界面）
部署后管理
如何更新网站
自定义域名配置
使用Jekyll（可选）
常见问题解决
404错误
样式或脚本不加载
国内无法访问
更新不生效

4.5 其他部署工具¶

国际平台（需翻墙）： - Netlify - 介绍和优势 - 部署步骤

国内平台（推荐）： - 腾讯云静态网站托管 - 介绍和优势 - 部署步骤 - 阿里云OSS静态网站托管 - 介绍和优势 - 部署步骤 - 华为云OBS静态网站托管 - 介绍和优势 - 部署步骤 - Coding Pages - 介绍和优势 - 部署步骤

工具对比和选择建议： - 根据是否可以翻墙选择 - 根据项目需求选择 - 根据访问速度需求选择 - 参考《部署平台调研.md》文档

4.4 部署实战练习¶

练习项目
选择一个简单项目
完成部署流程
验证部署
如何验证部署成功
如何测试功能
分享项目
如何分享链接
如何展示项目

第五部分：进阶学习资源¶

5.1 学习路径¶

初学者路径
进阶路径
高级路径

5.2 推荐资源¶

在线课程
技术文档
社区资源
工具推荐

5.3 实践项目¶

简单项目推荐
中等项目推荐
复杂项目推荐

第六部分：常见问题FAQ¶

6.1 工具安装问题¶

常见安装问题
解决方案

6.2 开发问题¶

常见开发问题
解决方案

6.3 部署问题¶

常见部署问题
解决方案

6.4 其他问题¶

其他常见问题
解决方案

文档要求¶

详细程度¶

很细：每个步骤都要有详细说明和截图
易懂：用简单易懂的语言
完整：包含所有必要信息

格式要求¶

清晰的标题和目录
详细的步骤说明
丰富的截图和示例
常见问题解答

更新要求¶

根据反馈持续更新
保持信息的准确性
及时更新工具版本

最后更新：2024年12月11日