Article

写给设计师的 Vibe Coding 零基础指南（二A）：基础准备与部署上线

更新于：2026-06-03 • 15 min read

一、这篇是什么

这篇文章是一份基础设施参考手册。它不涉及具体的案例项目，只讲一件事：做 Vibe Coding 之前和之后，你需要准备什么、怎么把做好的东西上线。

内容覆盖四个阶段：

注册 GitHub → 获取和启动项目 → 选择 AI 工具 → 部署上线

每个阶段都可以独立查阅。如果你已经有 GitHub 账号，可以直接跳到后面的章节。

二、GitHub：注册与基本操作

2.1 为什么需要 GitHub

GitHub 是代码托管平台，可以理解成”代码的网盘”。做 Vibe Coding 时，你不需要精通 Git 命令，但需要一个 GitHub 账号，用来：

Fork（复制）别人的开源项目到自己的账号下，不用担心改坏原项目
保存你的修改，每次改动都有记录，随时可以回退
部署上线，很多部署平台可以直接读取 GitHub 仓库，自动部署

2.2 注册账号

打开 github.com，用邮箱注册即可。建议：

用常用邮箱注册，方便后续接收通知
用户名选一个好记的，会出现在你的个人主页地址里，比如 github.com/你的用户名
免费账号完全够用，不需要付费

2.3 配置 SSH Key（推荐）

注册完账号后，建议做一件事：配置 SSH Key。配置之后，你在终端操作 GitHub（比如下载项目、上传修改）时不需要每次输入用户名和密码。

什么是 SSH Key？ 简单说就是一把”钥匙”，配对好之后，你的电脑和 GitHub 之间就能自动验证身份。

生成 SSH Key 的步骤：

Mac 和 Windows 都一样，打开终端（Mac 是 Terminal，Windows 是 PowerShell 或 Git Bash），输入：

ssh-keygen -t ed25519 -C "你的邮箱@example.com"

一路回车（默认路径、不设密码），就会生成一对密钥。然后用以下命令查看公钥内容：

cat ~/.ssh/id_ed25519.pub

把输出的内容复制，打开 GitHub → Settings → SSH and GPG keys → New SSH key，粘贴进去保存。

验证是否配对成功：

ssh -T git@github.com

看到 Hi 你的用户名! You've successfully authenticated 就说明配置成功。

如果你暂时不想配 SSH Key，也可以用 HTTPS 方式操作 GitHub（每次需要输入密码或 token），不影响使用。

三、获取项目代码

当你找到一个想用的开源项目（或者别人分享给你的项目），需要把代码弄到自己的电脑上。这一节讲三种方式。

3.1 方式一：Download ZIP（最简单）

在项目页面点击绿色的 Code 按钮，选择 Download ZIP，解压到你想要的目录。

优点： 零门槛，不需要安装任何工具。

缺点： 没法和原项目同步更新，也没法把你的修改推送到 GitHub。

适合只是看看代码、本地跑一下试试的情况。

3.2 方式二：Fork + Clone（推荐）

如果你想基于别人的项目做改造，推荐这个方式。

第一步：Fork

Fork 就是把别人的项目复制一份到你自己的 GitHub 账号下。之后的任何修改都是在你的副本上操作，不会影响原项目。

操作方式：打开项目页面 → 右上角点击 Fork → 确认即可。

第二步：安装 Git

Git 是版本控制工具。你需要它来下载和上传代码。

Mac：系统自带，或通过 Homebrew 安装 brew install git
Windows：下载安装 Git for Windows，安装后会有 Git Bash 终端

第三步：Clone 到本地

在终端中执行：

git clone https://github.com/你的用户名/项目名.git
cd 项目名

如果你配了 SSH Key，可以用 SSH 地址：

git clone git@github.com:你的用户名/项目名.git
cd 项目名

Clone 和 Download ZIP 的区别：

	Download ZIP	Fork + Clone
能看到代码	✅	✅
能同步原项目更新	❌	✅
能推送修改到 GitHub	❌	✅
能部署到线上	❌（需要额外上传）	✅（部署平台直接读仓库）

3.3 同步原项目的更新（进阶）

如果你 Fork 的原项目有了新的提交，你想把更新同步到自己的仓库，可以这样做：

# 添加原项目作为上游（只需执行一次）
git remote add upstream https://github.com/原作者/原项目名.git

# 拉取上游更新并合并
git fetch upstream
git merge upstream/main

这个操作不需要每次都做，只有当你想同步原项目的新改动时才用。

四、本地启动项目

代码下载到本地之后，需要在浏览器里打开它。不同类型的项目启动方式不同。

4.1 纯前端静态项目（HTML/CSS/JS）

如果你的项目只有 HTML、CSS、JavaScript 文件，没有 package.json，那就是纯静态项目。启动方式最简单：

方式一：让 AI 帮你启动

如果你用的是 TRAE、Cursor、Windsurf 等 AI IDE，直接打开项目文件夹，对 AI 说”帮我把这个项目跑起来”，AI 会自动检测环境并启动。

方式二：用 IDE 插件 “Live Server”

在 VS Code 的插件面板搜索 “Live Server”，安装后右键 index.html 选择 “Open with Live Server” 即可。

方式三：命令行启动

用 Python（Mac 自带，Windows 去 python.org 下载安装）：

cd 项目目录
python -m http.server 8080

或者用 Node.js 的 npx（如果你装了 Node.js）：

cd 项目目录
npx serve

然后浏览器打开 http://localhost:8080。

方式四：直接双击

有些简单的项目（比如单个 HTML 文件），直接双击 index.html 就能在浏览器里打开。但如果项目里用了 JavaScript 模块（type="module"），双击会因为浏览器安全限制报错，这时候必须用上面的方式启动本地服务器。

4.2 需要构建的项目（React/Vue/Astro 等）

如果你的项目根目录有 package.json，说明它是一个需要构建的项目。启动步骤：

cd 项目目录
npm install        # 安装依赖（只需执行一次）
npm run dev        # 启动开发服务器

前提是你需要安装 Node.js。去 nodejs.org 下载 LTS 版本安装即可。

什么时候需要 Node.js？ 简单判断：项目根目录有 package.json 就需要，没有就不需要。

4.3 常见启动问题

问题	原因	解决方式
`python` 命令找不到	Windows 没装 Python	安装 Python，或用 `npx serve`
`npx` 命令找不到	没装 Node.js	安装 Node.js，或用 Python
端口 8080 被占用	其他程序在用这个端口	换个端口，如 `python -m http.server 3000`
页面空白、控制台报错	路径问题或需要构建	检查浏览器控制台的报错信息，发给 AI 帮你排查

五、选择 AI 编程工具

5.1 当前主流工具

工具	类型	核心特点	适合谁
Cursor	独立 IDE	基于 VS Code 改造，AI 深度集成到编辑体验中，Tab 补全体验好	想要一站式体验的用户
Claude Code	CLI / VS Code 插件	Anthropic 官方工具，终端和 IDE 都能用，适合复杂项目	习惯终端操作或需要 Agent 能力的用户
TRAE	独立 IDE	字节跳动出品，免费额度充裕，中文支持好	国内用户、纯新手
Windsurf	独立 IDE	Codeium 出品，AI Flow 自动化能力强	想要自动化工作流的用户
Kimi	网页 / API	月之暗面出品，中文理解能力强，适合生成和讨论方案	不需要 IDE 集成、只做代码讨论

5.2 怎么选

不用纠结太久。核心流程对所有工具都是一样的：打开项目 → 描述需求 → AI 修改代码 → 查看效果。

纯新手，完全没接触过编程：推荐 TRAE 或 Cursor，开箱即用，中文界面友好
有 VS Code 使用经验：推荐 Cursor 或 VS Code + Claude Code 插件，不用切换工具
习惯终端操作：推荐 Claude Code CLI

工具之间的差异远没有”开始动手”这件事重要。选一个顺手的，先用起来。

5.3 补充说明：MCP 和 Skills

有些工具支持 MCP（Model Context Protocol）和 Skills。简单理解：

MCP：让 AI 能连接外部工具和数据源，比如读取 Figma 文件、操作数据库
Skills：预制的提示词模板，帮你快速执行特定任务，比如生成 DESIGN.md、做代码审查

这些是进阶功能，初期不需要关注。等你熟悉了基本流程，再研究也不迟。

六、部署上线

到这里，项目已经能在本地跑起来了。下一步就是部署上线，让别人也能通过一个网址访问。

6.1 什么叫部署上线

本地启动时，你访问的是 http://localhost:8080，这个地址只有你自己的电脑能打开。部署上线，就是把项目放到一个公开服务器上，让它变成类似这样的地址：

https://你的项目.vercel.app

或者绑定自己的域名：

https://md.yourname.com

对纯前端项目来说，部署并不复杂。它本质上就是把 index.html、CSS、JS、图片这些静态文件上传到一个平台，平台帮你生成一个可以公开访问的网址。

6.2 一共要花多少钱

对于个人项目和练习项目，最低可以做到 0 成本。

部署平台一般都有免费额度，像 Vercel、Netlify、Cloudflare Pages、GitHub Pages 都可以免费部署静态站点。你不买域名也没关系，平台会给你一个默认二级域名，比如 xxx.vercel.app、xxx.netlify.app、xxx.pages.dev。

真正需要花钱的通常是域名。比如你想要 yourname.com 这种自己的地址，就需要去域名注册商购买。价格差异很大，普通域名一年几十到一两百元都很常见。

所以你可以这样理解：

只是自己练习、发给朋友看：用平台免费域名就够了
想长期展示作品、做个人品牌：再买一个自己的域名
想在国内稳定访问、商用或做正式业务：需要额外考虑备案、加速和合规问题

6.3 选哪个部署平台

常见选择可以这样判断：

平台	适合什么项目	国内访问	备注
Vercel	React、Next.js 生态最佳	速度不佳	全球部署最快，框架支持最好
Netlify	静态网站、表单、文档站	正常	功能全面，上手简单
Cloudflare Pages	全球 CDN 的项目	速度一般	免费额度最大，“赛博佛祖”
GitHub Pages	文档、简单 Demo、开源项目主页	正常	最朴素，功能少但稳定
EdgeOne Pages	关注国内访问体验	最佳	腾讯产品

下面分别介绍各平台的部署方式。先看 Netlify（最详细），其他平台给核心步骤和关键差异。

6.4 用 Netlify 部署（详细步骤）

适用： 纯 HTML/CSS/JS 静态项目、不依赖构建的项目。

前置条件： 项目已 Fork 到你的 GitHub 账号下。

打开 netlify.com，用 GitHub 账号登录
点击 Add New Project → Import an existing project
选择你的仓库，点击 Import
配置构建设置：
- Build command：纯静态项目留空即可
- Publish directory：保持默认（通常是项目根目录），如果你的代码在子目录里，填子目录名
点击 Deploy site
等部署完成，Netlify 会给你一个 xxx.netlify.app 地址

部署成功后，每次你把修改 push 到 GitHub，Netlify 会自动重新部署。

常见问题：

如果部署后页面 404，检查 Publish Directory 是否正确
如果 CSS/JS 加载不了，检查文件路径是否用了绝对路径（应该用相对路径）
如果 SPA 刷新白屏，需要在 Netlify 设置里添加 _redirects 文件：/* /index.html 200

6.5 用 Vercel 部署

适用： React / Next.js 项目，或需要框架构建的项目。

打开 vercel.com，用 GitHub 账号登录
点击 Add New → Project
选择你的仓库，点击 Import
Vercel 会自动检测框架（React、Vue、Astro 等），填充构建配置
如果是纯静态项目，Framework Preset 选 Other，Build Command 留空
点击 Deploy

关键配置项：

Framework Preset：Vercel 会尝试自动识别。如果识别错了，手动选择
Root Directory：如果你的项目代码不在仓库根目录，需要手动指定
Build Command：纯静态项目留空，框架项目通常自动填充（如 npm run build）
Output Directory：构建产物的输出目录，通常是 dist 或 build

国内访问 Vercel 速度不佳。如果你的用户主要在国内，建议用 Netlify、Cloudflare Pages 或 EdgeOne Pages。

6.6 用 Cloudflare Pages 部署

适用： 需要全球 CDN 加速、免费额度用得多的项目。

打开 dash.cloudflare.com，注册或登录
左侧菜单选择 Workers & Pages → Create → Pages → Connect to Git
授权 GitHub 并选择你的仓库
配置构建设置：
- Production branch：通常选 main
- Build command：纯静态留空
- Build output directory：/ 或项目根目录
点击 Save and Deploy

Cloudflare Pages 的免费额度是所有平台中最慷慨的——每月 500 次构建、无限带宽、无限站点。对于个人项目来说完全不用担心超限。

6.7 用 GitHub Pages 部署

适用： 简单的静态 Demo、文档站、开源项目主页。

打开你的 GitHub 仓库 → Settings → Pages
Source 选择 Deploy from a branch
Branch 选择 main，文件夹选 / (root) 或 /docs
点击 Save
等几分钟，你的网站就会出现在 https://你的用户名.github.io/仓库名/

限制：

公开仓库免费，私有仓库需要 GitHub Pro
不支持自定义构建命令（没有构建流程）
每次推送后部署可能要等几分钟
不适合需要服务端功能的项目

适合的场景： 最简单的项目展示、文档托管、简历页面。

6.8 上线前检查清单

部署成功不代表完全没问题。上线前自己走一遍，尤其是纯前端项目，很容易在路径和资源上出小问题。

首页能正常打开，不是 404
CSS、JS、图片都能加载（打开浏览器控制台检查有没有红色报错）
页面刷新后不会白屏
移动端布局没有明显错位
核心功能还能用（在手机上实际试一遍）
如果绑定了域名，https:// 能正常访问
文档（README、PRD、DESIGN.md）中记录的使用方式是最新的

如果某些图片在本地能显示，上线后显示不了，优先检查路径。常见问题见第十节”常见问题”。

七、域名购买与绑定

平台给你的免费域名（xxx.netlify.app、xxx.vercel.app）能用，但如果你想要一个自己的地址（比如 md.yourname.com），就需要购买域名并绑定。

7.1 去哪里买域名

常见域名注册商：

注册商	特点	适合谁
Cloudflare	成本价卖域名（不赚差价），免费 WHOIS 隐私	追求性价比
Namecheap	老牌注册商，界面友好，经常有优惠	国际域名首选
阿里云（万网）	国内最大，中文界面，支持支付宝	需要 .cn 域名或国内备案
腾讯云 DNSPod	类似阿里云，DNS 解析免费且快	腾讯生态用户

域名后缀选择：.com 最通用，.dev 适合开发者，.design 适合设计师，.me 适合个人。价格因后缀不同差异很大，.com 通常一年 50-100 元。

7.2 购买流程（以 Cloudflare 为例）

打开 cloudflare.com，注册账号
左侧菜单选择 Domain Registration → Register Domains
搜索你想要的域名（比如 ricoui.com）
选择可用的后缀，加入购物车
填写注册信息，完成支付
域名通常几分钟内生效

7.3 绑定到部署平台

域名买好之后，需要把它指向你的部署平台。以 Netlify 为例：

进入 Netlify 项目的 Settings → Domain management
点击 Add custom domain
输入你的域名（比如 md.yourname.com）
Netlify 会给你一组 DNS 记录，去域名注册商那里配置

DNS 配置要点：

域名类型	配置方式	例子
顶级域名（`yourname.com`）	A 记录指向平台 IP	`A → 75.2.60.5`
子域名（`md.yourname.com`）	CNAME 指向平台域名	`CNAME → xxx.netlify.app`

具体填什么值，以部署平台当时显示的提示为准。

域名解析有时几分钟生效，有时要等几小时。配置好后别急着反复改，等一等再检查。

7.4 HTTPS 证书

好消息是：主流部署平台（Netlify、Vercel、Cloudflare Pages）都会自动为你配置 HTTPS 证书。域名绑定成功后，https:// 通常会自动生效，不需要你额外操作。

八、国内访问与备案

8.1 为什么教程常用国外平台

很多教程（包括本文）推荐 Vercel、Netlify、Cloudflare Pages，原因很简单：快。对练习项目、作品集 Demo、开源工具来说，它们不需要复杂服务器配置，也不需要你先学一遍运维。

8.2 国内访问的三个等级

只是学习和作品展示：先用 Vercel / Netlify / Cloudflare Pages 足够
想要国内访问更稳定：考虑 EdgeOne Pages、国内云厂商静态托管、对象存储 + CDN
商用或做正式业务：通常需要 ICP 备案 + 国内服务器

8.3 EdgeOne Pages

EdgeOne Pages 是腾讯推出的静态站点部署平台，对国内用户友好，访问速度快。

打开 edgeone.eu，注册账号
创建项目，连接 GitHub 仓库
配置构建设置（和 Netlify 类似）
部署

如果你的项目主要面向国内用户，EdgeOne Pages 是目前最简单的选择之一。

8.4 ICP 备案

如果你的项目满足以下任一条件，通常需要做 ICP 备案：

使用国内服务器（阿里云、腾讯云、华为云等）
使用国内 CDN 加速
域名接入国内 DNS 解析

备案流程一般通过云服务商（阿里云、腾讯云等）的备案系统提交，需要提供身份信息和域名证书。审核周期通常 1-3 周。

对于个人练习项目和作品展示，通常不需要备案——直接用国外平台就行。

九、Prompt 模板

下面这些提示词可以直接复制使用。按当前阶段挑一个就行。

明确身份和解释深度

我是一个没有开发基础的新手，请用适合设计师理解的方式解释。
如果涉及技术概念，请先用一句话解释它是什么，再告诉我为什么现在需要知道它。
遇到关键选择时，请给我 2-3 个方案，并说明推荐哪一个、为什么推荐。

选择技术栈

我想做一个项目，需求是：
1. [写你的项目目标]
2. [写核心功能]
3. [写是否需要登录、保存数据、后台管理]
4. [写是否只是展示页面，还是一个可长期使用的工具]

请帮我判断适合用什么技术栈。
要求：
- 优先考虑零基础可上手
- 不要一开始就引入过重的框架
- 说明哪些功能暂时不需要后端
- 给出推荐方案、备选方案和不推荐方案

部署上线

请帮我检查这个项目是否适合部署到 [Vercel / Netlify / Cloudflare Pages]。
要求：
- 判断是否需要构建命令
- 检查入口文件是否正确
- 提醒可能出错的资源路径
- 给出从 GitHub 到部署平台的完整步骤
- 如果绑定域名，说明 DNS 应该怎么按平台提示配置

总结当前项目状态

请总结当前项目状态，方便我开启新的 AI 对话继续开发。
总结内容包括：
1. 项目目标
2. 当前技术栈
3. 已完成功能
4. 最近一次修改
5. 重要约束
6. 下一步建议
7. 必须测试的场景

十、常见问题

Q1：本地图片正常，线上显示不了

最常见的原因是路径问题。检查以下几点：

大小写敏感：本地（Windows/Mac）对文件名大小写不敏感，但 Linux 服务器敏感。代码里写 Banner.jpg，文件实际叫 banner.jpg，本地能显示，线上就 404
中文文件名：有些服务器不支持中文文件名，建议统一用英文
绝对路径 vs 相对路径：检查代码里是否用了类似 /images/xxx.png 的绝对路径，部署在子目录下时会 404。建议用相对路径 ./images/xxx.png 或直接 images/xxx.png

Q2：HTTPS 页面加载不了 HTTP 资源

如果你的网站是 https:// 但引用了 http:// 的图片或脚本，浏览器会拦截（混合内容安全策略）。

解决方式：把所有 http:// 引用改成 https://，或者使用协议相对路径 //example.com/xxx.js。

Q3：SPA 项目刷新后白屏

如果你用的是 Vue/React 等单页应用，刷新页面后出现 404 或白屏，是因为服务器不知道所有路径都应该指向 index.html。

解决方式：在部署平台配置重定向规则。

Netlify：在项目根目录创建 public/_redirects 文件，内容为 /* /index.html 200
Vercel：在 vercel.json 中配置 rewrites
Cloudflare Pages：在 _redirects 文件中配置
GitHub Pages：创建 404.html 内容和 index.html 一样（不优雅但能用）

也可以直接让 AI 帮你处理：

项目是 SPA，刷新页面会白屏，请帮我配置部署平台的重定向规则。

Q4：端口被占用

启动本地服务器时报 Address already in use，说明端口被其他程序占用了。

解决方式：换个端口就行，比如 python -m http.server 3000 或 npx serve -l 3000。

Q5：部署成功但样式/功能不对

常见原因：

构建输出目录配错了：检查部署平台的 Output Directory / Publish Directory 设置。框架项目通常是 dist 或 build，纯静态项目通常是根目录 /
环境变量没配：如果项目用到了 API Key 等环境变量，需要在部署平台的设置里手动添加
构建命令不对：检查 Build Command 是否正确，比如 npm run build 而不是 npm run dev

如果你在这个过程中遇到问题，或者有什么疑问，欢迎发给我看看——微信 rico-ui，或者在公众号 Rico 的设计漫想 留言。

我是 Rico，感谢阅读！