🎉

恭喜你！

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后，你刚创建的项目会自动关联。

在你电脑上创建的项目结构

📁 ~/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 限额。