网站出海知识站

主题

AI 助力网站出海：只靠聊天，做高颜值网站，你也行！ ​

公众号: droidHZ 发布时间: 1970-01-01 08:33:45 原文链接: https://mp.weixin.qq.com/s?__biz=MzkzNzYzNzE3Mg==&mid=2247483748&idx=1&sn=1ec554ab4a29e791730c817fd0b408d1&chksm=c28d253ff5faac291c034c1d1f4ad5a57101c12e1cc01193f0916bd3a8c3b90a4feed9b6e81c#rd

朋友好，我是赫兹！ 一个探索网站出海生意的新手，上次分享了# 第一次赚美元！纯新手深度复盘网站出海，一文掌握全流程 之后，有朋友问我可以详细说说设计开发部分吗，今天我就来聊聊设计开发部分。

image.png

已关注

关注

重播 分享 赞

关闭

观看更多

更多

退出全屏

[](javascript:😉

切换到竖屏全屏__退出全屏

droidHZ已关注

[](javascript:😉

分享视频

，时长00:58

0/0

00:00/00:58

切换到横屏模式

继续播放

进度条，百分之0

[播放](javascript:😉

00:00

/

00:58

00:58

[倍速](javascript:😉

全屏

倍速播放中

[0.5倍](javascript:😉 [0.75倍](javascript:😉 [1.0倍](javascript:😉 [1.5倍](javascript:😉 [2.0倍](javascript:😉

[超清](javascript:😉 [流畅](javascript:😉

您的浏览器不支持 video 标签

继续观看

AI 助力网站出海：只靠聊天，做高颜值网站，你也行！

观看更多

原创

,

AI 助力网站出海：只靠聊天，做高颜值网站，你也行！

droidHZ已关注

分享点赞在看

已同步到看一看[写下你的评论](javascript:😉

[视频详情](javascript:😉

今天我用4次与AI的对话，来让大家看看如何做出视频上的AI播客网站。

积木的方式看到AI 产品 ​

现在已经有了这么多非常厉害的大模型基建，我们可以用一种新的眼光去看待这些大模型的能力，每一个大模型就像是一块积木， 用不同的积木组合起来，有无限多的可能，也可能有让你意想不到的化学反应。其实现在很好比较厉害的产品就是串联了好几个大模型的能力。

简单的AI 产品 ​

套壳调用单一AI 模型的产品，比如吉卜力生图、Veo3 视频生成、实现简单，但是竞争较为激烈。

复杂的AI产品 ​

组合调用多个AI模型的产品

  • 工作流形式（coze、n8n）：将多个AI能力串联的产品，HeyGen

  • Agent形式：通过AI决定调用什么AI能力的产品，比如manus、lovart 这类产品技术实现起来稍微复杂，但竞争相对会小一些，反而更容易成功

顶级的AI产品 ​

自研的AI能力，比如chatgpt、deepseek。

复刻项目 ​

有了积木的思维之后，可以去看那些赚钱的产品，推荐去看toolify.ai 收入榜200-500的产品，个人可以开发完成，也有一个的收入规模，已经是验证了市场的。尝试去思考这些产品用了哪些AI积木。可以通过差异化竞争（做最简单版本、UI更完美、付费模式创新、增加新特性、解决差评问题）去做相应的产品

初期不知道这个产品用了哪些AI积木，可以直接问chatgpt， 后续熟练之后，你掌握的AI积木越来越多时，能够达到看见这个产品，就知道使用了哪些能力。你就像一个魔术师一样，看一眼别人的魔术，就知道他这个魔术是怎么变的。

AI积木选择 ​

因为我比较喜欢听播客，这里我就想要知道listenhub.ai 用了哪些AI积木，就直接问ChatGpt "listenhub.ai 使用哪些AI的基础能力？" ,他一般就能给出相应可以复刻的AI能力。image.png

你可以给出你的需求，指定平台，让给你推荐相关的AI 模型 常见模型平台

  • openrouter： 主要用他的文本模型

  • replicate : 主要用他的图片模型

  • 国内的话，可以考虑硅基流动

  • 另外再推荐一个比较便宜的模型：ismaque ,我在上面用chatgpt-4o 模型，比官方便宜不少。

我要复刻listenhub.ai，做一个简化版本的播客，主要能力输入一个主题，根据这个主题生成双人对话播客， 我只用replicate.ai 的API，你建议怎么实现？image.png

gpt 就会告诉你用到了哪些模型，不过我们直接网页播放，不做那么复杂，就不使用ffmpeg了。

但是我作为甲方觉得一套方案不好，需要多对比几套方案，再给出一些具体的要求，让推荐更符合我的场景。"Replicate 的对话模型和TTS模型各推荐5个，分别给出推荐理由和推荐值。注意：TTS模型需要支持中文的"image.png确定合适的模型之后，你就可以去对应的平台找到相应的模型，测试一下调用效果。

形成需求文档 ​

当你找到合适的AI积木之后，可以和AI再讨论一下需求的细节，让AI帮你生成对应的需求文档。

主要能力是输入一个主题，根据这个主题生成双人对话播客，不使用ffmpeg拼接直接，直接网页高亮当前读的文字，同时播放对应的音频。只实现 landing page，核心功能直接在landing page上使用 ,同时给出对应的网站配色风格。 技术栈： NextJS Typescript 不需要数据库 使用对话的模型是gpt-4o-mini ，参考文档是https://replicate.com/openai/gpt-4o-mini/examples?input=nodejs 使用的tts是 speech-02-turbo ，参考文档是https://replicate.com/minimax/speech-02-turbo/examples?input=nodejs 文档中需要API KEY、 示例代码、示例输入、示例输出。 AI KEY 是XXX，后续我会自己替换。 你是世界上最棒的设计师和产品经理，给我基于什么的要求生成一个需求文档，我相信根据你的文档一定能做出完美的网站

这个提示词就是我手打的，没有什么提示词工程，就是尽可能提供我能提供的信息，外加一些PUA AI的语言（据说AI 被PUA 之后，会变得更强）

如果不满意，就说出你不满意的点，让他修改。如果满意了，直接下载这个需求文档。

在需求文档里面验证下是否有API 的相关信息，API KEY、 示例代码、示例输入、示例输出（没有的话，AI生成的代码容易调用失败）

另外，Cursor上也建议大家安装Context 7它专门抓取各种框架/库的最新官方文档与代码示例，在你写提示时即时注入，从而让 LLM 给出版本正确、能直接跑的代码片段。就可以不用加API相关的信息了。

设计MVP思维原型 ​

因为所有的功能点，技术要求，网站样式都写到需求文档里面，我直接上传文档，让AI 根据文档的要求，帮我制作一个网站。这里我用的是bolt、v0、本地Cursor 同时生成，最后喜欢哪个就用哪个，这一步有点像是打一个草稿，找到你喜欢的样式。

image.png

image.png

生成过程中可能会有一些小错误，一般直接让他尝试修复，他都能解决。实在不行就重新生成。image.png

喝一杯茶之后，就可以看到AI 打工人，帮你写的代码了。

V0效果

image.png

image.png

Bolt 效果image.png

Cursor效果image.png

除了我上面说的这几个，大家也可以尝试用same.new ，lovable，readdy.ai 这些工具去测试一下。也是直接说，就能给你做好网站的。

到这一步，其实你已经有一个开发出效果还不错，核心功能可以用的网站了， 点击右上角的publish按钮也能把你做出来的网站分享给好友使用了。

但是如果你觉得还是不算完善，UI还有一些AI的味道，可以使用starterkit 进一步优化你的网站。

引入starterkit，让你的网页更精美 ​

免费的开源项目优化网站

项目地址： https://github.com/nobruf/shadcn-landing-page

这个项目的效果可以通过 https://shadcn-landing-page-livid.vercel.app/ 看到。

配置starterkit项目

  • 克隆下载这个项目到本地，

  • 然后通过 https://zippystarter.com/tools/shadcn-ui-theme-generator 网站去定制颜色和样式，在上面选择颜色，可以实时预览网站的风格。

  • 选择好你喜欢的主题颜色后，就可以选择copy code 把样式信息粘贴到 app/globals.css 里面，网站就和你选择的主题一样了

合并代码

  • 把前面生成的MVP思维代码下载下来，放到刚刚配置的starterkit项目里面

  • 直接描述需求，让Cursor 把核心生成器的部分合并到一起

请先查看@/podcast-landing 是做什么的，然后修改HeroSection，把@/podcast-landing 里面生成播客的部分放到里面，注意新的HeroSection风格需要和原来保持一致，使用统一的全局样式@globals.css

image.png

image.png

Cursor完成后，刚v0上的原型，就合并到starterkit 模板上了。

接下来其实，就是让AI依次修改各个模块，改成和我们的AI播客一样的文字描述。我这里是用的Claude Code，我因为涉及的修改较多， Cursor一次修改可能会出问题，Claude Code 能够一次完成这类修改。我复制了page里面的所以模块，直接让他修改

修改下面模块的内容，文案改成AI播客的相关，可以参考HeroSection。 Narbar <SponsorsSection /> <BenefitsSection /> <FeaturesSection /> <ServicesSection /> <TestimonialSection /> <TeamSection /> <CommunitySection /> <PricingSection /> <ContactSection /> <FAQSection /> <FooterSection />

去喝杯咖啡的功夫，AI打工人就帮我完成了代码的编写。就是文章开头的效果。看上去效果还行，不过很多细节还是需要去检查优化的。

最终的网站效果：https://listen-blond.vercel.app

不过我没有配置token，无法体验播客生成。

至此通过4次聊天对话就完成了网站的开发

  • 让chatgpt 生成对应的需求文档

  • 让bolt 、v0、Cursor 生成一个可用的MVP思维原型

  • 让Cursor 合并MVP思维 原型到模板项目中

  • 让Claude Code 修改各个模块的

付费的模板

你还想要更多的样式，直接把支付、登录、多语言都做好？

答案是可以，但是得加钱，可以去购买一些付费的starterkit。可以去看看MKSaaS、ShipAny、MakeKit、SupaStarter、Shipfast、SaasyKit，购买之前大家可以先去找找有没有相关优惠码。 接入的步骤其实也是很免费的开源项目一样，只需要修改核心的MVP思维 和 每个模块的文案图片就行，额外配置上登录、支付、数据库的token。

沉淀自己的模板

当你用starterkit， 做了几个网站之后，我建议还是好好熟悉梳理一下这个starterkit，改成适合你自己的starterkit。

比如你的支付用的是Creem，但是starterkit不支持，建议是你把Creem的加上之后形成一个新的模板，等下次挖掘到一个新需求之后，可以用你的模板，修改一下核心功能区，修改对应的文案，申请相关的key。可能不到一天，就直接能上线一个登录、支付都完备的Saas网站，能够快速承接一些新出来的能力。

我最近看到的有1个新词网站就是这样的，昨天才申请的Canonical标签，今天网站已经相当精致了，登录，支付功能也完成了。在新词出来的第二天，就已经排名进入Google 首页了。

共勉 ​

随着AI的发展，开发的门槛已经极大的降低了，聊天也能做产品了，有想法的朋友也可以做起来，干中学，希望我们都能在网站出海中淘到金子。

我是赫兹，专注「网站出海」的生意人。 如果你也想让创意卖向全球，欢迎搜索公众号同名账号添加我的微信，加入交流群，一起分享最新出海干货、交流实战经验，一起加油挣美刀。 觉得有收获，就关注我吧，别走丢～

相关链接 ​

  • 01-认知与入门]