本文转载自公众号：黑帽星球 pro，原文：手搓 AI 生图网站，出海赚美金！实操玩法真实分享
一周前，我从杭州参加生财的 AI 出海活动回来，就决定 All in 出海用 AI 做应用，彻底放弃国内的市场和用户。
其次，我分别用 AI 套壳做了两个出海网站，一个是 AI 对话/生图的工具站，套用了 Qwen 的大模型，一个是 AI 导航网站，从 Github 找了个开源项目，用 AI 简单修改后直接上线了。
到今天为止，这个 AI 工具站，是我提交 Google 的第三天，已经有了收录索引，Google Analytics 显示有了一些北美、香港的用户访问。
最后，就是花了一点时间，看了不少 Google 的 SEO 官方文档和一些相关的 SEO 文章，不过没觉得有什么太大收获，因为这和我当年刚学 SEO 时学的东西一样，只是这些内容过于基础。
以我的经验来，对百度没啥大用，速度也太慢，对 Google 是否有效，我还需要靠时间来验证。
这就是我最近一周做的事，总结完了，来分享一下，我如何用 AI 手搓这么一个网站的方法。当然，看懂下面的内容，需要多少了解一些 AI 编程工具的使用方法。
首先，我开发的这个网站用到了两个 AI 编程工具，一个是 blot.new，一个是 Cursor。
blot.new 用来完成的网站 UI 的样式，Cursor 做的网站的功能。不得不说 blot.new 做的网站效果是真的好看。
看这情况，做前端和 UI 设计，不少人在未来会面临失业危机，如果我是老板，我肯定不会花钱在找前端和 UI 了，20 美刀一个月的 blot.new 交给一个懂后端的码农就足够了，能少发俩人的工资，少说省掉一年三四十万的成本。
我整个网站总成本 150 港币，这是在 Godaddy 买了一个域名的费用。网站代码放在 github 上的仓库里，免费部署在 Vercel。
搓出整个网站的第一个版本，我只花了 2 个小时时间，就做出了网站几个页面的前端样式，以及核心的 AI 对话功能。
对于一些网站的细节我没有做深入调整，所以不少地方还是比较粗糙，因为过去做网站的经验告诉我，不要将时间和注意力放在这些东西上面。
因为，你只需要记住一句话，用户不在乎你这个是红色还是绿色，是大了还是小了！特别是从搜索过来的用户，好看的网站 UI 样式，以及良好的交互只是锦上添花，最核心的还是信息、功能能否满足用户的需求。
就好比有人会因为动作片满屏幕花花绿绿的广告，气愤的关闭网站不看吗，所以不要在意网站好不好看，细节怎么样，这些东西完全可以在后面慢慢再打磨，更何况 blot.new 做出的网站 UI 效果也不差。
我为什么会做这么一个网站，因为我在 Google 搜索框看到了 AI Answer Generator 这个联想词。
于是，我在 GoogleTrends 里查了下搜索趋势，发现有一定的搜索流量。
然后，在 Ahrefs 中查了下在北美的竞争情况，竞争不是很大。
目前使用的是 Qwen 的免费大模型，生图功能，用的是在硅基流动的免费生图模型，效果差强人意，但是好在它是免费的，对于现阶段来说也够用了。
这就是我为什么会做这样一个网站。总结方法，就是现在搜索框中找到一些可能有搜索流量的联想词，然后根据搜索结果中网页的 Title 拓展一下关键词，在GoogleTrends 中判断一下全球的流量趋势，以及在Ahrefs 看看竞争情况就决定是否可以做了。
额外说一句，我为什么会做个导航网站，我其实不太喜欢做导航站，我多年前做网站的时候，最讨厌的就是导航站，因为我觉得导航站这东西的存在有点反人类。
但是发现出海做网站还就绕不开导航站，因为新站上线需要外链，而海外的一些导航站提交一次外链至少几十一百美金，价格不便宜，所以基于成本，以及运营层面的考量，我决定做一个导航网站。
最终的目的是将所有开发的网站，形成一个流量矩阵，导航站作为流量的源头之一为其他网站输出流量。
所以，我做出海做网站，并不是像很多人想的那样做单一网站的罗列，而是形成一套矩阵的体系，包括后面我也会去做一个 Google 插件，做一个插件版的浏览器导航给产品矩阵输送流量。
当然，我也打算试试开发一个 iOS 版的 Chrome 套壳 AI 浏览器，用 web 的 SEO 流量带动 APP 的下载，从而形成一个手机端到移动端的流量闭环。
在网站初步有一定稳定流量后，我会做一些这方面的尝试。
因为出海做网站，我觉得找需求，不如确定打法，因为找需求的行为具有巨大不确定性，而且效率很低。我的策略和过去做网站站群玩法一样，就是确定一个玩法，直接矩阵化干到底！尽量减少不断重复 0 到 1 的过程。
有了具体的方向后，下一步就是用 Blot.new 实现网站的页面设计了，其实这一步的操作非常简单粗暴！
因为文章篇幅有限，所以不能细致到每一步操作，如果觉得看着吃力的话，建议先收藏，再对着文章一步步操作。
第一步，就是先在claude3.7，或其它任何一个 AI 大模型和它沟通你的想法，告诉 AI 你想做个什么样的应用，它有哪些功能，有什么样的使用方法，你希望它有什么样的设计风格等等。
将你的想法聊明白了，然后让claude3.7，给你总结成用于 blot.new 的网页 UI、UX 的开发提示词！
这里要注意的是，AI 生成的结果具有随机性。所以，最好认真看一下提示词的内容是否符合你的要求，如果不对的话还要再对话微调细节。
下一步，只需要将claude3.7 生成的提示词复制粘贴发给 blot.new 就行了，然后，你就会得到一个比较好看的网站样式，如果对哪里不满意，可以在对话中用自然语言描述，继续完善整个网站的设计。
blot.new 有个好处就是网站里的图片、图标会自动给你创建。
下一步，点击 Export > Download ，将所有代码导出，保存到本地。
下一步，打开 Cursor，打开导出的项目文件的根目录，然后使用 ASK 模式，在对话框中使用@codebase 模式，告诉 AI：
你是个资深的工程师，请你完整阅读整个项目的所有文件，然后和我介绍这个项目的每个文件作用，以及如何一步步运行整个项目，我是个技术小白，请你用最简单直白的语言告诉我。
这一步，一般 AI 会告诉你先安装 next.js 的网站运行环境。
一般命令是“npm install”，然后再使用“npm run dev”运行网站，你就能在本地浏览器中查看网站的效果了。
下一步，就是让 Cursor 逐个实现网页中的功能了。如果你的网站中包含订阅、登录注册等功能，那么第一个版本可以先略过不做，先将核心功能做出来快速将网站上线。
对于我们这个网站来说，最重要的是 AI 生图功能，所以这里我以硅基流动为例，说一下如何让网站调用 AI 大模型的 API 能力，如果你想要实现吉卜力风格的图片的话，那你得用 Gpt 的 API。
不过不管哪个 AI 大模型，实现过程是一样的，非常简单，不需要懂任何技术，也不需要你手写一行代码，就能直接实现。
首先，打开硅基流动平台，创建 API-key，找到一个 AI 生图的大模型，点击 API 文档。
在 Cursor 中创建一个文件，命名为 API.md。
然后，将我图中红框圈起来地方的代码复制粘贴过去，还有大模型的名称，你的 API-key 的密钥。
下一步，在 Cursor 中使用 Agent 模式，使用 Claude-3.7-sonnet-Think 模式，告诉 AI：请你根据 API.md 文档中的内容，调用硅基流动平台的 API，实现网站的 AI 生图功能，这是「xxx」API 的开发文档。
到这一步，如果顺利的话你就实现了 AI 生图的功能。
下一步，将网站上线到 Vercel 中，这样你的网站就可以在互联网中被所有人访问使用了。
首先，安装 Git，具体的安装过程非常简单。你可以问 AI“我是个技术小白，我不懂如何安装 Git，请你一步步指导我，我完成一步你说下一步”
其次，注册登录 Github 账号，然后在 Github 中点击右上角的+号，点击 new repository 创建仓库，
Repository name 输入项目名称，选择 Private，点击 Create repository 创建仓库。
下一步，你会得到一个 Github 的仓库链接，复制粘贴发送给 Cursor，使用 Agent 模式，告诉 AI：这是我的 Github 仓库链接，请你将我的项目推送上传至 Github 仓库。
在 Agent 模式下，AI 会将你的代码上传至 Github，如果是首次使用 Git 的话，AI 会让你创建并绑定 Github 的账号。
下一步，打开 Vercel 官网，使用 Github 账号登录，点击 Add new > projece，选中我们上传到 github 的项目，点击 import 导入> deploy 部署，你的网站就上线了，Vercel 会为你的项目自动分配一个域名，通过这个域名你的网站就能被全球用户访问了。
如果说需要设置独立域名，则需要在 Vercel 的项目里点击设置中的 Domains 添加域名，并在域名服务商那里，根据 Vercel 的提示添加解析记录，即可完成绑定。
到这一步我们就完成了整个网站从设计、开发到上线的所有操作环节。
整个操作，完全不需要懂技术，即使是个零基础的小白也能实现！因为熟悉的兄弟都知道我的英语水平和编程技术是啥样的，所以我都能做出来，你也完全可以。
