She Nicest 前置工作坊：前置教程¶

目标: 让所有参与者（无论是否有编程基础，无论是否能翻墙）都能提前预习工作坊内容，提前构思自己的项目。

📌 工作坊基本信息：关于工作坊的详细信息，请查看项目介绍

💡 重要提示： - 核心目标：确保每个零基础参与者都能成功部署上线 - 提前准备：建议提前熟悉工具，避免现场安装占用创作时间 - 工具选择：根据你的情况（翻墙/不翻墙）选择合适的工具 - Self-paced学习：Workshop前大家根据文档学习，完全不学也行

📋 目录¶

快速开始（5分钟）
工具选择指南
AI编程工具教程
Vibe Coding入门
零门槛部署工具教程
项目构思指导

⚡ 快速开始（5分钟）¶

第一步：确定你的情况¶

回答两个问题： 1. 你能翻墙吗？ - ✅ 能 → 可以使用更多工具（Cursor、Vercel、GitHub Pages等） - ❌ 不能 → 使用国内可用工具（EdgeOne Pages等国内部署平台）

你有编程基础吗？
✅ 有 → 可以尝试更高级的项目
❌ 没有 → 从AI辅助编程工具开始，AI会帮你完成大部分工作

第二步：选择工具（根据你的情况）¶

情况	推荐工具	跳转到
不能翻墙 + 无编程基础	Cursor、EdgeOne Pages	AI编程工具教程 + 零门槛部署工具教程
不能翻墙 + 有编程基础	Cursor、EdgeOne Pages	AI编程工具教程 + 零门槛部署工具教程
能翻墙 + 无编程基础	Cursor、Vercel、GitHub Pages	AI编程工具教程 + 零门槛部署工具教程
能翻墙 + 有编程基础	Cursor、Vercel、GitHub Pages	AI编程工具教程 + 零门槛部署工具教程

第三步：安装并测试¶

访问工具官网
注册/登录账号
完成一个简单测试（如"创建一个简单的网页"或"部署一个Hello World项目"）

完成！ 现在你可以继续阅读详细教程，或者直接开始使用。

🎯 工具选择指南¶

根据你的情况选择工具¶

你的情况	推荐工具	原因
无编程基础 + 不能翻墙	Cursor、EdgeOne Pages	简单易用，国内可用，支持全栈
无编程基础 + 能翻墙	Cursor、Vercel、GitHub Pages	功能强大，效果最好
有编程基础 + 不能翻墙	Cursor、EdgeOne Pages	国内可用，支持全栈开发
有编程基础 + 能翻墙	Cursor、Vercel、GitHub Pages	功能最强大，效果最好

工具分类对比表¶

AI编程工具¶

工具	翻墙需求	难度	效果	推荐度	特点
Cursor	❌ 不需要	⭐⭐ 中等	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐ 推荐：AI编程工具，功能强大
Claude Code	✅ 需要	⭐⭐ 中等	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	AI编程工具，代码能力强
GitHub Copilot	✅ 需要	⭐⭐ 中等	⭐⭐⭐⭐	⭐⭐⭐⭐	GitHub官方AI编程工具

对话式AI（辅助编程）¶

工具	翻墙需求	难度	效果	推荐度	特点
ChatGPT	✅ 需要	⭐ 简单	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	国际主流，功能强大
DeepSeek	❌ 不需要	⭐ 简单	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐ 推荐：国内可用，代码能力强
Kimi（月之暗面）	❌ 不需要	⭐ 简单	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐ 推荐：长文本处理能力强，适合文档分析
豆包	❌ 不需要	⭐ 简单	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	国内可用，功能完整
Claude	✅ 需要	⭐ 简单	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	长文本处理强
Gemini 3	⚠️ 需要特殊配置	⭐⭐⭐ 较难	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	最新AI模型，可选

零门槛部署工具¶

工具	翻墙需求	难度	效果	推荐度	特点
Vercel	⚠️ vercel.app域名可能需要翻墙	⭐ 简单	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐ 推荐：一键部署，完全免费，可通过自定义域名解决访问问题
EdgeOne Pages	❌ 不需要	⭐⭐ 中等	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐ 推荐：国内可用，支持全栈开发
GitHub Pages	⚠️ 需要翻墙	⭐⭐ 中等	⭐⭐⭐⭐	⭐⭐⭐⭐	免费，适合静态网站
Netlify	⚠️ 需要翻墙	⭐ 简单	⭐⭐⭐⭐	⭐⭐⭐⭐	一键部署，功能强大
其他国内平台	❌ 不需要	⭐⭐ 中等	⭐⭐⭐	⭐⭐⭐	国内可用，但功能可能有限

💻 AI编程工具教程¶

方案1：Cursor（推荐，功能强大）⭐¶

适用场景：所有用户，特别是需要AI辅助编程的用户

什么是Cursor？¶

Cursor是一个强大的AI编程工具，可以帮你生成代码、修改代码、调试代码，是Vibe Coding的核心工具。

核心功能¶

AI代码生成
输入自然语言描述，AI生成代码
支持多种编程语言（JavaScript、Python、HTML/CSS等）
智能代码补全
AI代码修改
选中代码，告诉AI如何修改
AI自动重构代码
代码优化建议
AI代码解释
选中代码，AI解释代码功能
帮助理解复杂代码
学习编程的好帮手

安装步骤¶

访问 https://cursor.sh/
下载对应系统的版本（Windows/Mac/Linux）
安装并启动Cursor
注册/登录账号（有免费额度）

基本使用教程¶

1. 创建第一个项目

提示词示例：
"创建一个简单的HTML页面，包含：
- 标题：欢迎来到我的网站
- 一个按钮，点击后显示'Hello World'
- 使用现代化的CSS样式"

2. 修改现有代码

提示词示例：
"把这个按钮改成圆角，背景色改成紫色，文字改成白色"

3. 添加新功能

提示词示例：
"添加一个输入框，用户输入名字后，点击按钮显示'Hello, [名字]'"

参考资源¶

Cursor官网：https://cursor.sh/
Cursor文档：https://docs.cursor.sh/
参考《前置文档框架_vibe_coding.md》中的详细安装指南

方案2：Claude Code（能翻墙可选）¶

适用场景：能翻墙的用户，需要强大的AI编程助手

什么是Claude Code？¶

Claude Code是Anthropic推出的AI编程工具，代码能力很强，特别适合复杂项目。

安装步骤¶

访问 https://claude.ai/
注册账号
下载Claude Code（如可用）

基本使用¶

与Cursor类似，但需要翻墙访问。

方案3：其他AI编程工具¶

GitHub Copilot：GitHub官方AI编程工具
Codeium：免费的AI编程助手
Tabnine：AI代码补全工具

选择建议： - 国内用户：推荐Cursor（不需要翻墙） - 能翻墙用户：可以选择Cursor或Claude Code - GitHub用户：可以考虑GitHub Copilot

💬 对话式AI（辅助编程）教程¶

方案1：DeepSeek（推荐，代码能力强）⭐¶

适用场景：所有用户，特别是需要AI辅助编程的用户

什么是DeepSeek？¶

DeepSeek是一个强大的AI助手，特别擅长代码生成和编程问题解答，是国内用户的最佳选择之一。

核心特点¶

✅ 代码能力强：特别擅长生成和优化代码
✅ 国内可用：不需要翻墙，访问稳定
✅ 免费使用：有免费额度，足够日常使用
✅ 多语言支持：支持多种编程语言
✅ 代码解释：可以解释代码功能和逻辑

安装步骤¶

网页版（最简单）： 1. 访问 https://www.deepseek.com/ 2. 注册/登录账号（支持手机号、邮箱注册） 3. 立即开始使用

桌面版（推荐）： 1. 访问 https://www.deepseek.com/download 2. 下载对应系统版本（Windows/Mac） 3. 安装并启动

基本使用教程¶

1. 生成代码

提示词示例：
"帮我创建一个简单的待办事项应用，包含：
- 添加任务功能
- 删除任务功能
- 标记完成功能
- 使用HTML/CSS/JavaScript实现"

2. 代码优化

提示词示例：
"优化这段代码，让它更简洁高效：
[粘贴你的代码]"

3. 代码解释

提示词示例：
"解释这段代码的功能和逻辑：
[粘贴代码]"

4. 调试代码

提示词示例：
"这段代码有bug，帮我找出问题：
[粘贴代码]
错误信息：[粘贴错误信息]"

参考资源¶

DeepSeek官网：https://www.deepseek.com/
DeepSeek使用教程：平台内提供详细使用教程

方案2：Kimi（推荐，长文本处理能力强）⭐¶

适用场景：所有用户，特别是需要分析长文档、理解复杂代码的用户

什么是Kimi？¶

Kimi（月之暗面）是一个强大的AI助手，特别擅长长文本处理，可以分析整本教材、大量文档，非常适合理解复杂项目和代码库。

核心特点¶

✅ 长文本处理能力强：可以处理200万字的长文档
✅ 国内可用：不需要翻墙，访问稳定
✅ 文档分析：可以上传PDF、Word、TXT、代码文件等进行分析
✅ 代码理解：可以分析整个代码库的结构和逻辑
✅ 免费使用：有免费额度，足够日常使用

安装步骤¶

网页版（最简单）： 1. 访问 https://kimi.moonshot.cn/ 2. 注册/登录账号（支持手机号、邮箱注册） 3. 立即开始使用

移动端（推荐）： 1. 在应用商店搜索"Kimi"或"月之暗面" 2. 下载并安装APP 3. 注册/登录账号

基本使用教程¶

1. 代码库分析

提示词示例：
"分析这个项目的代码结构，提取：
- 主要功能模块
- 技术栈
- 代码架构
- 改进建议"

2. 文档理解

提示词示例：
"分析这个技术文档，总结：
- 核心概念
- 关键步骤
- 注意事项
- 实践建议"

3. 项目规划

提示词示例：
"帮我规划一个AI聊天应用项目：
- 功能需求
- 技术架构
- 开发步骤
- 时间估算"

参考资源¶

Kimi官网：https://kimi.moonshot.cn/
Kimi使用教程：平台内提供详细使用教程

方案3：豆包/ChatGPT/Claude（其他选择）¶

豆包：https://www.doubao.com/（国内可用）
ChatGPT：https://chat.openai.com/（需要翻墙）
Claude：https://claude.ai/（需要翻墙）

这些工具也可以用于辅助编程，使用方式类似。

💻 零门槛部署工具教程¶

方案1：EdgeOne Pages（推荐，国内可用，支持全栈）⭐¶

适用场景：不能翻墙的用户，需要部署全栈应用的用户

什么是EdgeOne Pages？¶

EdgeOne Pages是腾讯云推出的全栈开发平台，支持前后端开发，能够部署完整的网站，国内可用，访问速度快。

核心优势¶

✅ 支持全栈开发：支持前后端，可以部署完整网站
✅ 支持多种前端框架：Next.js、Nuxt、Astro等
✅ 无服务器后端功能：Node Functions，无需管理服务器
✅ 支持服务器端渲染（SSR）：支持SSR、ISR等多种渲染模式
✅ 国内可用：国内访问速度快
✅ 快速部署：通过MCP协议快速部署
✅ 自动生成链接：一键生成公开访问链接

安装步骤¶

访问 https://cloud.tencent.com/
注册腾讯云账号
开通EdgeOne Pages服务
查看免费额度

基本使用教程¶

详细教程：参考《EdgeOne_Pages部署教程.md》文档

快速概览： 1. 通过MCP协议部署（推荐） - 安装MCP工具 - 准备HTML内容或全栈项目 - 运行部署命令 - 获得部署链接

通过控制台部署（备选）
登录控制台
创建新项目
上传文件
部署项目

参考资源¶

EdgeOne Pages文档：参考《EdgeOne_Pages部署教程.md》
部署平台调研：参考《部署平台调研.md》

方案2：Vercel（推荐，可以翻墙的用户）⭐¶

适用场景：能翻墙的用户，需要快速部署网页应用

什么是Vercel？¶

Vercel是一个零门槛部署平台，可以一键部署网页应用，完全免费，按需计费。

核心优势¶

✅ 完全免费：免费计划足够个人项目使用
✅ 一键部署：连接GitHub仓库，自动部署
✅ 自动HTTPS：自动配置SSL证书
✅ 全球CDN：快速访问速度
✅ 按需计费：不用时不占用资源
✅ 支持全栈：支持Serverless Functions

注意事项¶

⚠️ vercel.app默认域名可能需要翻墙：但可以通过自定义域名解决
✅ 解决方案：使用自定义域名并通过Cloudflare代理，可以提高国内访问稳定性

安装步骤¶

访问 https://vercel.com/
使用GitHub账号登录（推荐）或邮箱注册
连接GitHub账号（如果使用GitHub登录）

基本使用教程¶

详细教程：参考《前置文档框架_vibe_coding.md》中的Vercel部署部分

快速概览： 1. 准备项目文件 2. 将项目上传到GitHub 3. 在Vercel中连接GitHub仓库 4. 一键部署 5. 获得访问链接

参考资源¶

Vercel官网：https://vercel.com/
Vercel文档：https://vercel.com/docs

方案3：GitHub Pages（适合静态网站）¶

适用场景：有GitHub账号的用户，需要部署静态网站

什么是GitHub Pages？¶

GitHub Pages是GitHub提供的免费静态网站托管服务，完全免费，与GitHub仓库集成。

核心优势¶

✅ 完全免费：无使用限制
✅ 与GitHub集成：版本控制
✅ 适合静态网站：HTML、CSS、JavaScript
✅ 自动部署：推送代码即部署
✅ 支持自定义域名：可以绑定自己的域名

注意事项¶

⚠️ 需要翻墙：国内访问需要翻墙
⚠️ 仅支持静态网站：不支持服务器端代码

安装步骤¶

创建GitHub账号（如果还没有）
创建新仓库
上传项目文件
在仓库设置中启用GitHub Pages
选择分支和文件夹
获得访问链接

基本使用教程¶

详细教程：参考《GitHub_Pages部署教程.md》文档

快速概览： 1. 通过GitHub网页部署（最简单） - 创建新仓库 - 上传文件 - 启用GitHub Pages - 获得访问链接

通过Git命令行部署（推荐）
初始化Git仓库
添加文件
推送到GitHub
启用GitHub Pages

参考资源¶

GitHub Pages文档：参考《GitHub_Pages部署教程.md》
GitHub官网：https://github.com/

方案4：其他部署平台¶

国际平台（需翻墙）： - Netlify：https://www.netlify.com/（功能与Vercel类似）

国内平台（推荐）： - 腾讯云静态网站托管 - 阿里云OSS静态网站托管 - 华为云OBS静态网站托管 - Coding Pages

选择建议： - 可以翻墙的参与者：使用Vercel（最简单，推荐）或GitHub Pages（适合静态网站） - 不能翻墙的参与者：使用EdgeOne Pages（国内可用，支持全栈，推荐） - 参考《部署平台调研.md》文档了解更多选项

💡 项目构思指导¶

工作坊可以做什么？¶

主题选项（推荐，不卡死）¶

包容性社会
创建促进包容性的应用或工具
例如：无障碍工具、多元文化平台等
AI4社交
使用AI改善社交体验
例如：AI匹配、AI聊天助手、社交推荐等
AI4女性成长（兜底选项）
使用AI支持女性成长和发展
例如：学习助手、职业规划、技能提升等
AI交朋友（兜底大家没想法的话）
使用AI帮助人们交朋友
例如：AI破冰工具、话题推荐、兴趣匹配等

项目构思流程¶

阶段1：需求分析¶

明确需求
你要解决什么问题？
目标用户是谁？
核心功能是什么？
让AI重述需求（重要！）
把你的需求描述发给AI（DeepSeek/Kimi/豆包）
让AI重述你的需求
让AI指出需求中不够完善的地方
让AI提供技术实现建议

阶段2：技术架构¶

选择技术栈
前端：HTML/CSS/JavaScript、Next.js、React等
后端：Node.js、Python等（如需要）
部署：Vercel、EdgeOne Pages、GitHub Pages等
让AI设计架构
把需求发给AI
让AI设计技术架构
让AI提供代码结构建议

阶段3：Vibe Coding开发¶

使用AI生成代码
使用Cursor/Claude Code生成代码
使用DeepSeek/Kimi辅助编程
逐步实现功能
迭代优化
测试功能
修复bug
优化代码
改进用户体验

阶段4：部署上线¶

准备项目文件
整理项目文件
确保代码完整
检查依赖配置
部署到平台
可以翻墙：选择Vercel或GitHub Pages
不能翻墙：选择EdgeOne Pages（推荐，支持全栈）
上传项目文件
获得访问链接
测试和优化
测试访问链接
测试功能是否正常
优化性能和体验
确保在不同设备上正常显示

项目示例¶

示例1：AI聊天应用 - 需求：创建一个AI聊天应用，帮助用户交朋友 - 工具：Cursor、DeepSeek、EdgeOne Pages - 流程： 1. 使用DeepSeek分析需求，设计技术架构 2. 使用Cursor生成前端代码（HTML/CSS/JavaScript） 3. 使用Cursor生成后端代码（Node.js API） 4. 使用EdgeOne Pages部署全栈应用 5. 获得访问链接

示例2：包容性社会工具 - 需求：创建一个工具，帮助人们理解不同文化 - 工具：Cursor、Kimi、Vercel - 流程： 1. 使用Kimi分析需求，提供功能建议 2. 使用Cursor生成前端代码 3. 使用Vercel部署静态网站 4. 获得访问链接

示例3：AI4女性成长平台 - 需求：创建一个平台，帮助女性学习和成长 - 工具：Cursor、DeepSeek、EdgeOne Pages - 流程： 1. 使用DeepSeek设计平台架构 2. 使用Cursor生成前端和后端代码 3. 使用EdgeOne Pages部署全栈应用 4. 获得访问链接

Fallback选项（给没想法的人）¶

AI交朋友（最简单）
创建一个简单的AI聊天页面
使用Cursor生成代码
快速部署上线
个人作品集网站
创建一个展示个人作品的网站
使用Cursor生成代码
部署到GitHub Pages或EdgeOne Pages
简单工具应用
创建一个实用工具（如待办事项、计算器等）
使用Cursor生成代码
部署上线
跟随教程项目
参考前置文档中的教程
跟随步骤完成项目
部署上线

✅ 准备清单¶

工作坊前一周¶

[ ] 选择适合的工具（参考工具选择指南）
[ ] 注册并测试工具账号
Cursor / Claude Code
GitHub账号
部署平台账号（Vercel / EdgeOne Pages / GitHub Pages）
[ ] 完成基本使用练习
使用Cursor创建一个简单的HTML页面
完成一次部署测试
[ ] 构思自己的项目
选择主题（推荐但不卡死）
思考要解决的问题

工作坊前3天¶

[ ] 准备项目所需材料
[ ] 熟悉工具的基本操作
[ ] 完成前置问卷
[ ] 思考想要解决的问题
[ ] 阅读前置文档框架（可选）

工作坊当天¶

[ ] 带好电脑
[ ] 准备好项目材料
[ ] 保持网络畅通
[ ] 准备好GitHub账号（如果用Vercel/GitHub Pages）
[ ] 准备好腾讯云账号（如果用EdgeOne Pages）

📖 参考资源¶

工具官网¶

AI编程工具： - Cursor：https://cursor.sh/ ⭐ 推荐：AI编程工具 - Claude Code：https://claude.ai/ - GitHub Copilot：https://github.com/features/copilot

对话式AI（辅助编程）： - DeepSeek：https://www.deepseek.com/ ⭐ 推荐：代码能力强 - Kimi：https://kimi.moonshot.cn/ ⭐ 推荐：长文本处理能力强 - 豆包：https://www.doubao.com/ - ChatGPT：https://chat.openai.com/（需要翻墙） - Claude：https://claude.ai/（需要翻墙）

零门槛部署工具： - EdgeOne Pages：https://mcp.edgeone.site/ ⭐ 推荐：国内可用，支持全栈 - Vercel：https://vercel.com/（vercel.app域名可能需要翻墙） - GitHub Pages：https://pages.github.com/（需要翻墙） - Netlify：https://www.netlify.com/（需要翻墙）

🎯 下一步¶

选择工具：根据你的情况选择适合的工具
注册测试：注册并测试工具是否正常工作
完成练习：完成至少一个基础练习（如创建一个简单的网页并部署）
构思项目：思考你想要在工作坊中完成的项目
准备材料：收集项目所需的材料

创建时间：2024年12月11日
最后更新：2024年12月11日
版本：v3.0（Vibe Coding主题）

She Nicest 前置工作坊：前置教程¶

📋 目录¶

⚡ 快速开始（5分钟）¶

第一步：确定你的情况¶

第二步：选择工具（根据你的情况）¶

第三步：安装并测试¶

🎯 工具选择指南¶

根据你的情况选择工具¶

工具分类对比表¶

AI编程工具¶

对话式AI（辅助编程）¶

零门槛部署工具¶

💻 AI编程工具教程¶

方案1：Cursor（推荐，功能强大）⭐¶

什么是Cursor？¶

核心功能¶

安装步骤¶

基本使用教程¶

参考资源¶

方案2：Claude Code（能翻墙可选）¶

什么是Claude Code？¶

安装步骤¶

基本使用¶

方案3：其他AI编程工具¶

💬 对话式AI（辅助编程）教程¶

方案1：DeepSeek（推荐，代码能力强）⭐¶

什么是DeepSeek？¶

核心特点¶

安装步骤¶

基本使用教程¶

参考资源¶

方案2：Kimi（推荐，长文本处理能力强）⭐¶

什么是Kimi？¶

核心特点¶

安装步骤¶

基本使用教程¶

参考资源¶

方案3：豆包/ChatGPT/Claude（其他选择）¶

💻 零门槛部署工具教程¶

方案1：EdgeOne Pages（推荐，国内可用，支持全栈）⭐¶

什么是EdgeOne Pages？¶

核心优势¶

安装步骤¶

基本使用教程¶

参考资源¶

方案2：Vercel（推荐，可以翻墙的用户）⭐¶

什么是Vercel？¶

核心优势¶

注意事项¶

安装步骤¶

基本使用教程¶

参考资源¶

方案3：GitHub Pages（适合静态网站）¶

什么是GitHub Pages？¶

核心优势¶

注意事项¶

安装步骤¶

基本使用教程¶

参考资源¶

方案4：其他部署平台¶

💡 项目构思指导¶

工作坊可以做什么？¶

主题选项（推荐，不卡死）¶

项目构思流程¶

阶段1：需求分析¶

阶段2：技术架构¶

阶段3：Vibe Coding开发¶

阶段4：部署上线¶

项目示例¶

Fallback选项（给没想法的人）¶

✅ 准备清单¶

工作坊前一周¶

工作坊前3天¶

工作坊当天¶

📖 参考资源¶

工具官网¶

相关文档¶

🎯 下一步¶