目录
Step 01
环境检查：电脑上已经有什么
开始之前先让 Claude 检查了一遍电脑，发现关键工具都已经装好了，省了不少事。
Node.js
v24.15.0 ✓
已安装，版本很新
Git
v2.50.1 ✓
Apple 内置版本
npm
v11.12.1 ✓
随 Node 一起装的
VS Code CLI
未检测到
用 Cursor 替代
我用的是 Cursor + Claude Code 插件，所有操作直接在里面完成，不需要单独开终端。
Step 02
创建 Next.js 项目
项目文件夹已经建好了，放在 /Users/kevin/Coding/Kevin-website。
Kevin-website 文件夹（空）
但是 create-next-app 不允许项目名有大写字母，"Kevin-website" 里有大写 K 直接报错。绕过方法是先创建到临时目录，再复制过来：
bash
✓ 成功
# 先创建到 /tmp 目录（小写名字） npx create-next-app@latest /tmp/kevin-website \ --typescript --tailwind --eslint --app --src-dir # 再复制到目标文件夹 cp -r /tmp/kevin-website/. /Users/kevin/Coding/Kevin-website/
复制过来的 node_modules 有问题，重新安装了一次依赖，然后启动开发服务器：
bash
✓ HTTP 200
npm install npm run dev # 访问 http://localhost:3000 看到默认页面 ✓
Step 03
创建 GitHub 仓库并推送
在 GitHub 上新建了公开仓库 kevin-website，然后遇到了第二个坎：git push 需要登录授权。
空仓库界面，带有 Quick setup 指引
安装 GitHub CLI 完成授权
电脑上没有 Homebrew，先装 Homebrew，再用它装 GitHub CLI：
bash
# 安装 Homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 安装 GitHub CLI /opt/homebrew/bin/brew install gh # 登录（会打开浏览器授权） /opt/homebrew/bin/gh auth login
Homebrew 安装在
/opt/homebrew/bin/，需要用完整路径调用，否则找不到命令。授权成功后推送代码：
bash
✓ 推送成功
git remote add origin https://github.com/dollazivan-kevin/kevin-website.git
git branch -M main
git push -u origin main
Step 04
连接 Cloudflare，第一次踩坑
Cloudflare 控制台 → Workers and Pages → Create，连接了 GitHub 仓库，构建命令填 npm run build，直接点 Deploy。
Set up application 表单，已填入仓库和构建命令
部署失败，错误信息指向缺少 .next/standalone 目录：
错误日志
✗ 失败
Error: ENOENT: no such file or directory path: '/opt/buildhome/repo/.next/standalone/.next/server/pages-manifest.json' # 原因：Cloudflare 用的是 opennextjs-cloudflare # 它需要 output: 'standalone'，不是 output: 'export'
Step 05
修复配置，成功部署上线
把 next.config.ts 里的 output 改一个字：
next.config.ts
const nextConfig: NextConfig = { output: 'standalone', // 从 'export' 改成 'standalone' };
推送到 GitHub，Cloudflare 自动触发重新部署，这次成功了：
✓ Building application
11s
✓ Deploying to Cloudflare's global network
1m 50s
✨ Success! Build completed.
网站地址：https://kevin-website.dollazivan.workers.dev
以后每次推送代码，Cloudflare 自动重新部署，约 2 分钟生效。
以后每次推送代码，Cloudflare 自动重新部署，约 2 分钟生效。
Step 06
安装 web-design-engineer 技能
从 GitHub 下载了 ConardLi/web-design-skill 这个技能包，让 Claude 具备高质量视觉页面的生成能力。
安装路径
✓ 已安装
.claude/skills/web-design-engineer/ ├── SKILL.md # 407 行，核心能力定义 └── references/ └── advanced-patterns.md # 521 行，高级设计模式参考
调用方式：在 Cursor 里输入 /web-design-engineer（需重启 Cursor 后生效）。
结果
最终成果
技术栈
Next.js 16 + Tailwind + TypeScript
部署方式
Cloudflare Workers（opennextjs）
自动化部署流程
改代码
→
git push
→
GitHub
→
Cloudflare 自动部署
→
网站更新
踩过的坑
✗ 文件夹名有大写字母 → 解决：先创建到 /tmp，再复制
✗ git push 需要授权 → 解决：安装 Homebrew + gh CLI
✗ Cloudflare 构建失败 → 解决：output 改为 'standalone'