2025年4月6日星期日

手搓AI生图网站,出海赚美金!实操玩法真实分享

一周前,我从杭州参加生财的AI出海活动回来,就决定All in出海用AI做应用,彻底放弃国内的市场和用户。
所以,这一周来我做了三件事。
首先,我写了一篇活动的复盘《7倍利润,出海赚美刀!》,没想到上了微信的推荐,爆了1.3w阅读量。
其次,我分别用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的提示添加解析记录,即可完成绑定。
到这一步我们就完成了整个网站从设计、开发到上线的所有操作环节。
整个操作,完全不需要懂技术,即使是个零基础的小白也能实现!因为熟悉的兄弟都知道我的英语水平和编程技术是啥样的,所以我都能做出来,你也完全可以。

没有评论:

发表评论

多地宣布发钱奖励结婚!

你结婚 村里"随份子"! 还有这种好事? 日前 广州市白云区龙归南岭村出台 《初婚奖励实施方案(试行)》 (以下简称《方案》)  规定双方或一方 为本村户籍股东成员的初婚夫妻 最高可申领4万元奖金 有村民笑称: "奖励2万元, 摆酒都可以多摆几围...