1
全局:做网站不再难
以前做个网站要懂 HTML、CSS、设计和服务器。现在你对 Claude 说 “做个咖啡馆介绍网站” 就行。
我们用最流行的 Next.js。制作时在自己电脑上预览,完成后用免费的 Vercel 发布到网上。
小贴士
想更快尝鲜,可让 Claude 做 “只有一个 index.html 的简单介绍页”,直接用浏览器打开。本路线讲规范版本。
免费 · 基础
制作网站
用说话,做出有自己网址、真正在线的网站
约 30 分钟9 步
完成后你将拥有
全世界任何人都能打开的网站地址(https://...vercel.app)
准备清单
Claude Pro 及以上订阅必需
这是氛围编程的大脑。最低用 Claude Pro($20/月)就足以开始;如果你每天大量创作,Max 套餐额度更宽裕。免费版可以浅尝,但很快会触及上限。
一台电脑(Windows 或 Mac)必需
配置基本无所谓,能上网的笔记本就够了。
Node.js(LTS 版本)必需
运行代码的引擎。到 nodejs.org 下载标注 “LTS” 的稳定版。安装会在第1步一起完成。
VS Code(Visual Studio Code)必需
免费的代码编辑器。在这里装上 Claude Code 扩展,就能 “和 AI 对话来编程”。注意它与微软的 Visual Studio(另一款更重的 IDE)不同。
2
第1步, 安装 Node.js 并验证
到 nodejs.org 装 “LTS” 版(一路下一步)。在 VS Code 终端 → 新建终端 用下面命令验证。
终端
$node -v$npm -v
v20.18.0 10.8.2
出现这样就成功了
出现两个版本号即成功,数值不同无妨。
遇到报错怎么办？
3
第2步, 把 Claude 接入 VS Code
从 code.visualstudio.com 装 VS Code。在扩展(四个方块)里搜 “Claude Code” 安装。
点侧栏 Claude → Sign in 登录,连上 Pro/Max 订阅。之后用中文交给它即可。
小贴士
若有多个结果,选发布者(Publisher)为 Anthropic 的那个。
4
第3步, 新建 Next.js 项目
在你想工作的位置(如桌面)打开终端,运行下面命令。多数问题直接回车(默认)即可。
TypeScript? Tailwind CSS? App Router? 都建议 Yes。完成后会有 my-site 文件夹。
终端
$npx create-next-app@latest my-site
✔ Would you like to use TypeScript? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use App Router? … Yes Creating a new Next.js app... Success! Created my-site
出现这样就成功了
出现 “Success! Created my-site” 即成功。
遇到报错怎么办？
5
第4步, 运行网站并预览
进入文件夹并启动开发服务器。依次输入下面两行。
出现 “http://localhost:3000” 后用浏览器打开。看到 Next.js 默认页即成功。该窗口全程开着。
终端
$cd my-site$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
出现这样就成功了
浏览器显示默认页即开发环境就绪。
遇到报错怎么办？
6
第5步, 用氛围编程美化页面
向 Claude 描述网站。例:“把 app/page.tsx 改成本地咖啡馆 ‘Move’ 的主页。顶部放店名和口号、三个菜单、营业时间、地图链接,底部放 Instagram 链接,用温暖的棕色调。”
保存后浏览器自动刷新即可看到。继续 “菜单做成卡片”“按钮更圆”“手机上也好看”。
小贴士
有参考网站就说 “像某站那样干净”,或给出想要的 HEX 颜色(如 #6b4f3a),更贴合你的意图。
遇到报错怎么办？
7
第6步, 发布前检查(构建)
上线前先确认网站能无误地构建成 “成品”。运行下面命令。
出现 “Compiled successfully” 即可安全部署。若出红字报错,给 Claude 看,修好后再运行。
终端
$npm run build
✓ Compiled successfully ✓ Generating static pages Route (app) Size ┌ ○ / 5.2 kB
出现这样就成功了
出现成功信息和页面/体积的表格即 OK。
8
第7步, 用 Vercel 免费发布到全世界
Vercel(由 Next.js 团队运营)最省事。用下面命令装工具并运行,首次会引导注册(可用 GitHub/Google)。
多数提示按默认(回车)即可。结束后会得到 “Production: https://my-site.vercel.app” 这样的真实地址,发给任何人都能打开。
终端
$npm i -g vercel$vercel
Vercel CLI ? Set up and deploy? yes ? Link to existing project? no ✅ Production: https://my-site.vercel.app
出现这样就成功了
出现并能打开 https://...vercel.app,你的网站就向全世界上线了。
小贴士
也可在 vercel.com 关联 GitHub 仓库部署,这样每次改代码网站都会自动更新,很方便。
遇到报错怎么办？
9
完成!以及下一步
恭喜,你有了一个拥有真实网址的网站。
接下来联系表单、博客、多语言、绑定自己的域名(如 mycafe.com),都能用同样方式实现。把网站发到 Launchpad 收集反馈吧。
