🎉
恭喜你!
Next.js 网站 开发环境搭建完成了
已安装的工具
GitVS CodeClaude CodeNode.js
在你电脑上创建的项目结构
📁 ~/my-first-app/ ├── 📂 src/ │ ├── 📂 domain/ ← 业务逻辑 │ │ ├── models/ │ │ └── services/ │ ├── 📂 ports/ ← 接口定义 │ ├── 📂 adapters/ ← 外部集成 │ │ ├── api/ │ │ └── ui/ │ └── 📂 app/ ← 页面(Next.js) ├── 📄 CLAUDE.md ← AI 架构规则 └── 📄 package.json
向Claude Code说第一句话
不用一次写得完美。边对话边修改就行。
填写空白处
我想做一个 ___ 网站。 这个服务是: ___ 主要用户: ___ 一开始必须有的3个功能: 1. ___ 2. ___ 3. ___ 现在从哪里开始比较好?
可以这样写
我想做一个约时间的网站。 这个服务是: 朋友们在群里问「什么时候有空?」太麻烦了, 分享一个链接,大家就能投票选有空的日期。 主要用户: 20~30岁上班族。不用注册,收到链接就能直接用。 一开始必须有的3个功能: 1. 发起多个候选日期,参与者勾选有空的日期 2. 不用注册,输入名字就能直接参与 3. 投票结果一目了然的页面 现在从哪里开始比较好?
接下来可以这样继续
发送第一个提示后AI会生成代码。之后像聊天一样简短地提需求就行。
“这个能运行看看吗?”
“把字体调大一点”
“背景色换成蓝色”
“我想加个登录功能”
“报错了,帮我看看(粘贴错误信息)”
“给我解释一下现在做的东西”
说错了也没关系。说「把刚才的撤销重来」就行。
不知道怎么设计?
v0.dev 可以在 v0.dev 用AI先做好页面,再导入到你的项目中。
- 1在v0.dev上描述你想要的页面,比如「帮我做个登录页面」
- 2满意的话点击 Download ZIP 下载
- 3解压后放到 ~/my-first-app/ 文件夹
- 4告诉Claude Code「把这个代码应用到我的项目里」
下一步
现在把你的网站发布到真正的互联网上吧?
把代码上传到 GitHub 并用 Vercel 部署,你就能得到一个可以分享给朋友的真实网址。我们会一步步带你完成。
登录Google后,你刚创建的项目会自动关联。