不是技术大牛，也能在 AI 辅助下做出能变现的网站。
在 上一篇文章 里，我们已经聊了怎么发现需求、怎么判断一个项目值得做，你应该也找到一个想尝试实践的小方向了。
那这一篇，我们就真正动手，用 AI 帮我们把想法落地成真正可用的网站原型。
注意：这篇文章的重点并不是具体“教你怎么用 AI 写代码”，而讲我是怎么“和 AI 配合完成一个项目的。
参考我的方式，你也能通过 AI 完成产品雏形。我希望你看我这篇文章，学会的不只是如何使用 AI 开发网站，而是如何自学，如何找资源，如何解决问题。
现在的 AI 工具很多，用哪一个并不是最重要的。我认为使用 AI 的本质是学会如何沟通。如果你无法清晰表达自己的需求，不懂背景知识、不知道自己要的是什么，那无论你用的是 Claude、ChatGPT 还是未来的 GPT-10，效果都不会好。
AI 极大地改变了大家的编程方式，得益于 AI，可以让不完全了解编程语言的人，也能很好的开发自己的项目，AI 不是万能，但大幅降低了学习门槛。
🎯 本篇目标：用 AI 协助完成网站项目的初步开发，实现一个本地可运行的最小可用版本（MVP），哪怕只有一个功能也没有关系，功能是慢慢迭代的。
AI 能帮你做什么？
| 开发任务 | AI 能帮你做什么 | 你需要做什么 |
|---|---|---|
| 设计网站结构 | 根据描述生成路由和模块建议 | 清楚告诉 AI 你的网站目标和主要功能 |
| 编写前端代码 | 生成 HTML/CSS/JS/React/Vue 代码 | 指导 AI 你喜欢的样式/布局/框架 |
| 编写后端代码 | 生成基本 API 逻辑（如用户注册/提交数据） | 结合业务需求验证逻辑、加必要的校验 |
| 部署上线 | 给出 Vercel、Netlify 等部署流程 | 跟着操作，处理配置和环境变量等细节 |
| 代码重构 & 优化 | 协助理解结构，提建议 | 判断是否需要重写、是否合适项目方向 |
总之，你有任何不懂的、不会的、拿不定主意的，都可以和它讨论，AI 即可以是老师，也可以是搭档。当你不知道怎么提需求，不知道怎么组织逻辑，其实和 AI“讨论”本身就是一种深度思考。
但不要全信 AI，它写错代码是常有的事。如果你有编程经验，会更容易发现问题；如果没有，你可以先学着看代码输出的报错，再去查官方文档或搜索。
你要清楚知道自己想要一个怎样的网站，清楚知道用户是谁，要解决什么问题，它才帮得上忙。
把 AI 想象成自己，是一个会干活的人。要完成一个具体的任务，需要知道哪些信息，这些信息它能不能轻松看懂，任务的描述会不会产生歧义等。
你需要做的就是像一个专业的产品经理一样提需求，并像一个高级程序员一样指导 AI 如何实现需求，并进行调试和测试。
人人都将是程序员。AI 时代，你不会写代码没关系，重要的是：
- 你有想法；
- 你能表达这个想法；
- 你能把一个需求逐步转化为“AI 能执行的任务”；
- 你愿意试错，愿意动手。
我常用的 AI 编程工具
现在有很多 AI 编程 IDE 工具都还不错，比如 Cursor、Windsurf、Trae 等，
大家试试看这些 AI 编程工具，确实能提高开发效率。这些工具本质上还是在使用 AI 大语言模型，但会在“效率”上比直接使用网页版更进一步，能更加自动化的帮你完成代码，你只需描述你要它做什么，点点鼠标即可 —— 但它们的“道”是一样的，沟通依旧是核心。
我是 Go 语言后端程序员，我不会写前端代码，我的前端网页代码基本都是 AI 辅助我完成的。我在开发网站时主要使用下面三个 AI 大模型的网页版：
- Claude（Anthropic 出品）：Claude 在生成前端页面时的表现非常优秀，经常能帮我想到我没想到的功能点，它不仅实现需求，还会自动补充相关细节。但缺点是免费使用次数是最少的且对话长度受限，所以我一般只把最关键、最复杂的代码任务交给它写。
- ChatGPT（OpenAI 出品）：大部分的项目代码，尤其是功能明确、逻辑清晰的部分，我会交给 ChatGPT 来完成。它虽然写出来的网页没那么好看，但稳定、可靠、响应快。主要负责配合 Claude 输出的功能做延伸和辅助，补全其他组件。
- 豆包（字节出品）：豆包能处理超长的输入和输出，所以我常让它处理一些「格式转换」「文案处理」「数据批量修改」这类没太多技术含量的杂活，比如把一段 Python 代码转换为 Golang 代码实现。
另外像 Gemini、Copilot、Deepseek，包括 Kimi、腾讯元宝等等，在 AI 无法完成让我满意的效果时，我也都会试试。没有说哪一个 AI 最好，不同场景的使用各有千秋，主要还是多尝试，选自己用得顺手的就行，最本质的还是那句话，如果沟通，让它准确输出我们想要的内容。
我不充值任何收费 AI 开发工具，只用最“抠门”的方式，全程免费抠门流编程，只使用免费额度，用完就手写。我更日常的还是使用 VIM 手写居多，只有遇到自己不会的、不擅长的才问问 AI 怎么搞，然后复制它给我的代码来用。
相关阅读：如何注册 Claude AI 账号? 保姆级教程来了!
我如何使用 AI 帮我写代码的？
默认大家都会“科学上网”，因为这个话题比较敏感，不展开。也默认大家都已经能够正常使用国内外各种 AI。
1. 准备基础资料
以我开发“Google 爬虫 IP 检测工具”这个项目为例，我首先是用 Google 搜索看看是否有官方权威资料，找到了官方提供的方法，以官方文档为准，先自己了解一下要如何才能识别出一个 IP 是不是 Google 的爬虫，知道了实现原理，知道他们提供了哪些数据、具体的验证方法和步骤，我可以根据这个文档自己一步一步完成，但现在我不想写代码，我把这些信息都告诉 AI，让 AI 来写。
复制文档作为 AI 提示词的一部分，如果你使用的是 Cursor 这类 AI 编程 IDE，可以将内容以文档的形式保存在本地，在对话时，无需发送全部内容，直接指定参考对应的文件名即可。
你要记住一个核心点：AI 自己也许已经知道这个工具的实现原理，但它和人一样，他也是需要先获取相关资料学习的，你无法保证它获取到的资料是否准确，是否是最新的，因此最好把 AI 看作是自己，自己要实现这个功能，需要了解学习哪些资料，发给它学习。
由于 AI 收发的内容长度有限，你需要自己把控。有能力自己总结的可以自己精简好资料内容，只提供必要信息。
2. 准备 Prompt（提示词）
我把任务描述写成这样，这并非一个完美、标准的提示词，只是一个简单示例：
粘贴谷歌官方的《验证 Googlebot 和其他 Google 抓取工具》文档文本内容
---
任务描述：
- 请你使用 golang gin 框架作为后端语言实现一个谷歌爬虫 IP 检查在线 web 响应式在线工具，前端 css 使用 tailwind/bootstrap 框架。
- IP 要支持批量查询
- 网站要支持中文/英文（你只需给出示例即可，无需输出全部文案，我会自己根据实际情况自行完成）
- 网站页面需进行 SEO 优化，meta title、meta description 等要多考虑关键词优化，页面内容中要尽可能包含 SEO 关键词信息
使用 Claude 一般可以给出完整可运行的全部代码。如果你不知道如何组织或运行代码，你可以直接让它给你写一份操作文档。由于 AI 的返回内容长度有限，如果网站功能复杂，可能无法一次完整输出。你可让它继续，或者后续分段把上下文发给它让它继续完成任务。
你的提示词不必追求一次完美，可以根据 AI 输出的代码实际运行效果，慢慢补充调整，把需求讲清楚。你可以和他一起先进行讨论你想做什么样的网站，把你的想法全部整理成文字告诉它，讨论的过程其实也就建立了上下文，你觉得差不多了就可以让它跟你你们的聊天内容直接生成代码。
这种讨论方式可以让你在不知道怎么写提示词不知道如何提需求时给你一些想法，你和 AI 都在一起思考和进步。缺点就是这会用掉你的一些免费额度，但用完可以等下一次恢复，期间可以上网学习一下自己不懂的问题。
AI 生成的代码也有极大的概率是错误的，这种时候可能就需要你有编程经验可以快速识别问题所在，并指导 AI 进行修改了。如果没有编程经验，或者不了解对应的编程语言或者开发框架，可以把报错信息发给 AI 让它帮你修改。如果实在无法解决，尝试查阅相关的官方文档，官方文档永远是 YYDS。
如果你清晰的知道你想做一个什么样外观的网站，可以详细描述，或者有的 AI 支持图片，你可以让它参考。但如果你和我一样，不知道设计成什么样，无法准确描述的话，那就一句也别自己描述了，让 AI 自由发挥往往效果比自己描述的更好。它做出来之后你再在此基础上慢慢调整。
3. 把代码跑起来
AI 把代码写出来之后，如果你是完全不懂编程开发的，可以继续让 AI 给你写一份针对零基础的如何把代码在本地运行起来的操作指南，通常需要先搭建开发环境，或者安装一些开发工具等，跟着做就行。
终端工具：Mac 和 Linux 自带终端，Windows 推荐装 WSL（让你有类 Linux 环境，踩坑少），如果你懒得折腾环境，其实也可以用在线编辑器像 Replit 或 StackBlitz 来试验项目，但推荐你还是本地搭建一次，哪怕以后只做一次，经验值是你的。
运行代码不一定会顺利，遇到问题就把你的问题详细描述清楚，让 AI 告诉你该怎么解决。有些错误可能不是代码错了，而是环境配置不对。这时候你就需要结合你的操作系统、项目结构、依赖版本一起描述清楚。
使用自己最顺手的编辑器创建文件，把 AI 生成的代码复制到文件中，然后按照 AI 告诉我们的方法运行即可。如果你使用 Cursor，先看看 Cursor 官方文档，先学习一下如何使用，如何创建项目，不亏的。看不懂英文文档？别忘了 AI 老师，复制下来发给 AI 让它给你讲怎么用。
因为大家做的项目不一样，所需开发环境和工具也会不同，所以这里不做统一介绍，唯一一个建议是不会编程的读者了解学习 Git 这个工具，无聊是写代码还是日常写文档做笔记等，但凡涉及到电脑上文件变更修改的版本管理的场景都可以用它，学会它，包不亏的。
我自己平时喜欢用命令行终端里直接使用 VIM 编程，用哪种编辑器不是关键，关键是你用得顺手。
安装能把代码运行起来的开发环境不用担心搞不定，跟着 AI 和官方文档教你的步骤来一定可以的，有 AI 你就拥有了一个知识渊博且有耐心的老师，你可以随时提任何领域的问都能收到大概率靠谱的建议。
AI 说的不一定都对。它给出解决方案后，你可以让它“详细解释为什么这样做”，帮助你更好理解。
总之，我的学习方法就是：AI + 官方文档 = 最强学习法。
不断问，不断做。学编程，靠实战。
到这里，我相信你应该能通过以上方法把 AI 写的代码运行起来并可以使用了。接下来我们可以对自己觉得不满意的地方进行调整，也可以继续添加想到的任何新的功能创意。
小作业：做一个纯前端的小网站
我的谷歌爬虫 IP 检测工具是一个前端+后端的实现，如果读者是完全不懂后端开发的，为了练习并掌握这篇文章的内容，我给你一个简单但完整的练习题：
✅ 做一个「BMI 指数计算器」
实现功能：
- 输入身高（cm）
- 输入体重（kg）
- 点击按钮 → 显示 BMI 和健康提示
- 页面风格自己决定，最好适配手机端
这个项目无需后端开发，你可以：
- 先和 AI 讨论一下思路，告诉它你要实现的功能
- 让它帮你写出 HTML + JS 的前端代码
- 在本地打开 HTML 文件运行试试看
- 碰到问题就问它应该如何解决，你甚至可以直接截图给 Claude，或者贴出浏览器控制台报错信息，它会告诉你怎么改。
虽然这篇文章的重点是“能本地跑起来”，但如果你已经完了开发迫不及待想分享成果，也可以用这些方式上线网站（免费）：
- Vercel：适合部署前端项目，免费、快、一键搞定
- GitHub Pages：静态站点最佳选择
- Supabase：支持数据库 + API 端点
类似的平台很多，具体如何操作，请问 AI+看官方文档。后续我会将我现在这个爬虫 IP 检测小工具部署到云服务器上，是非免费的方式，需要先购买服务器，我将详细记录方法和步骤。
AI 没做好你该怎么办？
这是很多人最容易崩心态的地方。
AI 输出代码有时候：
- 功能不全；
- 逻辑错了；
- 报错没跑通；
- 看起来对但运行崩溃。
你要知道：这不是你的错，也不是 AI 废了，这是协作的一部分。
正确做法是：
- 明确指出你期望它达到什么效果；
- 把错误信息、当前表现告诉它；
- 引导它一步步 debug。
❗ 不要期望一条 Prompt 就出结果。你在和一个“刚毕业的程序员”对话，需要你教它、引导它。
最后总结
- AI 能帮你写代码，但你要学会提问、描述、沟通
- 多和 AI 讨论，比只追求一次生成更重要
- 最好的学习方式是：试错 + 提问 + 阅读官方文档
- 你现在要做的不是做一个完美的网站，而是做出第一个跑起来的作品
如果你完成了最基础功能的开发，并且可以本地运行，那么你已经赶上我目前的项目进度了。
接下来我会继续打磨我的当前网站，并在下一篇文章中详细记录我做了些什么，可能和你的实际项目不同，但我相信你也能有参考价值。
我们下期 #buildwithme 再见 👋
