🎉
恭喜你!
Next.js 网站 开发环境搭建完成了
已安装的工具
GitVS CodeClaude CodeNode.js
在你电脑上创建的项目结构
📁 ~/my-first-app/ ├── 📂 public/ ← 图片、图标 ├── 📂 src/ │ ├── 📂 app/ ← 页面(Next.js) │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── globals.css │ ├── 📂 domain/ ← 业务逻辑 │ │ ├── models/ │ │ └── services/ │ ├── 📂 ports/ ← 接口定义 │ └── 📂 adapters/ ← 外部集成 │ ├── api/ │ └── ui/ ├── 📄 CLAUDE.md ← AI 架构规则 ├── 📄 next.config.ts ← Next.js 配置 ├── 📄 tailwind.config.ts ← 样式配置 ├── 📄 tsconfig.json ← TypeScript 配置 └── 📄 package.json
向AI说出第一句话
Claude Code或Cursor都可以。第一次不用写得完美,边对话边改就行。
填写空白处
我想做一个 ___ 网站。 这个服务是: ___ 主要用户: ___ 一开始必须有的3个功能: 1. ___ 2. ___ 3. ___ 现在从哪里开始比较好?
可以这样写
我想做一个约时间的网站。 这个服务是: 朋友们在群里问「什么时候有空?」太麻烦了, 分享一个链接,大家就能投票选有空的日期。 主要用户: 20~30岁上班族。不用注册,收到链接就能直接用。 一开始必须有的3个功能: 1. 发起多个候选日期,参与者勾选有空的日期 2. 不用注册,输入名字就能直接参与 3. 投票结果一目了然的页面 先从做一个推广网站的落地页开始吧。
接下来可以这样继续
发送第一个提示后AI会生成代码。之后像聊天一样简短地提需求就行。
“这个能运行看看吗?”
“把字体调大一点”
“背景色换成蓝色”
“我想加个登录功能”
“报错了,帮我看看(粘贴错误信息)”
“给我解释一下现在做的东西”
说错了也没关系。说「把刚才的撤销重来」就行。
💡 下一步把网站上线之后,还会有一份分5类(文本·颜色·新模块·渐变·字体)整理过的指南。
不知道怎么设计?
Claude Design — 用AI先做好页面,再直接导入到你的项目中。
- 1打开 claude.ai/design 并描述你想要的页面,比如「帮我做个登录页面」
- 2满意的话在 Export 菜单里选择「Send to local coding agent」,然后点 Copy command
- 3在打开项目文件夹的 Claude Code 终端里粘贴 — 设计会自动应用
- 4如果用的是其他 AI 代理(比如 Cursor)就勾选「Download zip instead」,解压后放到 ~/my-first-app/ 文件夹
仅限 Claude Pro、Max、Team、Enterprise 订阅用户使用。目前处于研究预览阶段,拥有独立的每周使用限额,这里的用量不计入其他 Claude 限额。
下一步
现在把你的网站发布到真正的互联网上吧?
把代码上传到 GitHub 并用 Vercel 部署,你就能得到一个可以分享给朋友的真实网址。我们会一步步带你完成。
登录Google后,你刚创建的项目会自动关联。