第一次赚美元！纯新手深度复盘网站出海，一文掌握全流程

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

效果展示：https://v.douyin.com/k5htSz63Cug

今天我用4次与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能力。

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

• openrouter： 主要用他的文本模型
• replicate : 主要用他的图片模型
• 国内的话，可以考虑硅基流动
• 另外再推荐一个比较便宜的模型：ismaque ,我在上面用chatgpt-4o 模型，比官方便宜不少。

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

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

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

形成需求文档 链接到标题

当你找到合适的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 同时生成，最后喜欢哪个就用哪个，这一步有点像是打一个草稿，找到你喜欢的样式。

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

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

V0效果

Bolt 效果

Cursor效果

除了我上面说的这几个，大家也可以尝试用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

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个新词网站就是这样的，昨天才申请的域名，今天网站已经相当好看了，登录，支付功能也完成了。在新词出来的第二天，就已经排名进入Google 首页了。

共勉 链接到标题

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

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