随着无代码工具的成熟，产品经理、运营甚至内容创作者也能亲手打造智能产品。本文将以实操案例为引，系统拆解从需求识别、工具选择到上线部署的完整路径，帮助你真正掌握“无代码 AI”的落地能力。

hello大家好，在上一篇文章Growing AI：我的第一个纯AI研发的应用里我分享了一个自己通过AI工具从0到1无代码研发的AI应用，体验链接https://growing-ai.kuaiyanai.cn/

今天这篇文章就应上篇文章承诺的，向大家公开分享一下整个AI无代码开发应用的过程，我会争取把每个环节都讲足够仔细和可以实操，确保你阅读之后可以按着步骤也顺利跑一个简单的AI应用出来，当然，整个过程也是我花了将近3周左右的时间摸索出来的，所以大家阅读的是我3个星期的钻研结果。

在正式开始介绍实操攻略之前，我们先对AI应用的定义，以及非程序人员开发一个AI应用这个事情的意义有一些理解，这样我们才知道自己在干什么，以及做这个事情的意义。

1.先定义一下我理解的AI应用

首先声明一下，我所定义的AI应用，不是大家平时见到的那种只是一个单纯的前端页面，没有挂载后台服务的应用，这种说白了就是一个HTML文件，谈不上应用，并且这个事情大部分chatbot产品已经能轻松的生成出来了，如果是做一个这种玩意，那就没什么意思了；

一个完整的AI应用必须要包含：前端产品（用户看到的）+后台服务（背后运行的）+运营能力（账号、数据等）+安全管控；这样才能完整的构建成一个AI应用，当然，如果你的应用只是自己使用，“前端产品+后台服务” 这两部分就足以构建一个MVP应用；

其次，我所定义的AI应用，也不是扣子搭建的这种对话agent，因为对话的方式过于随机，无法聚焦到特定的应用场景，我更倾向于将一个解决具体应用问题、带UI交互、并且支持后台AI生成服务的轻量级产品定义为AI应用。

2.非程序人员为什么要自己开发一个AI应用

可能会有一部分人会困惑为啥没事要去做程序员干的事情，从我个人的角度上看，这个事情对我意义重大，它有如下几个意义：

1）给自己的工作和学习自定义开发一个提升效率的工具

这个是我目前直接感受到的最大受益，比如在我目前项目运营的工作中，我有大量的研究内容创作、小红书和公众号素材封面生产、广告投流等等工作，我可以基于自己的业务场景开发相应的提效工具，提升自己的生产效率；而这些事情如果换成以前，我必须要依赖我的研发人员帮我开发，然而对我们来说，研发资源实在是太稀缺了，根本不可能为了提升自己的效率而投入研发；

当我自己具备开发AI应用的能力的时候，我就可以自己动手改善自己的工作效率，并且目前我已经做到了成功为自己打造了多个提效的AI工具，在保证质量不受影响的前提下提升生产效率。并且这个事情如果放到企业里面，你完全可以为团队搭建一个提效工具，提升团队的生产效率，这样的事情，放到以前你可能需要花费不少成本去采购也研发。

2）实现idea即应用，在企业或创业中快速搭建MVP并验证PMF

比如对我来说，我经常脑子里面会有很多的AI应用构想，以前我没有资源去实现它们，但是现在我已经具备能力快速搭建一个MVP出来，然后分发出去让用户体验和使用，并收集用户的反馈，从而验证需求的可行性，然后再决定是否投入；

OK，接下来开始进入正题！

一、AI无代码研发实操：案例、流程概览、AI工具

1. 实操案例

我们先设定一个AI应用的视线场景案例，上次我开发的是Growing AI（https://growing-ai.kuaiyanai.cn/）这个产品，核心功能是输入一个产品名称，生成一份用户增长策略报告，并生成一个可视化报告，今天这个案例，我们给这个事情增加一点难度，我需要在生成长文之后，还能支持生成18张小红书封面的卡片，以及一篇1000字以内的带emoji表情的小红书笔记，以上为AI应用开发的目标，具体的示例效果如下：

首页：输入产品名称

策略长文页：生成增长策略长文，支持编辑修改

营销素材页：

①生成18张小红书封面，并支持一键导出

营销素材页：

②生成1000字以内的小红书笔记，带emoji表情，并支持一键复制

营销素材页：

③生成逻辑图方式的可视化报告，并支持一件导出长图；

2.整个应用开发的流程概括

在整个AI开发应用的过程中，我需要完成如下几个事情：

  • 根据需求绘画一个高保真的产品原型、产品交互稿、视觉设计稿；并根据视觉设计稿，生成前端网页代码，这部分是面向用户层的操作界面；
  • 搭建AI生成服务的工作流，调用大模型API完成内容的生成，并返回给前端渲染和展示；
  • 完成前端代码和后台工作流的对接，顺利把前端和后台打通；
  • 需要一个编程助手，帮我定位应用开发过程中遇到的问题，并手把手的告诉我怎么一步一步操作解决相应的问题，最终拿到完成的项目代码；
  • 寻找一个代码托管和发布的工具，将项目发布到网上，并获得一个可以公开访问的链接；

3.全程使用的AI工具：Gemini、Make、Cursor、Netlify

以上的所有环节，我们都将通过AI工具来完成，组合起来主要包括Gemini、Make、Cursor、Netlify这4个工具，它们分别在如下环节发挥作用。

①产品视觉稿设计和前端编程：Gemini（https://gemini.google.com/app）

这部分我基本都通过Gemini 2.5 Pro生成网页的方式完成，最终输出一份HTML代码。

目前这个方式是我实现下来，在绘画视觉稿方面，满足度最高的一种方式。虽然很多人提到过用lovart等AI绘画的工具设计产品视觉，但是个人实操下来还是觉得难以达到自己需要精准灵活调整的要求，并且生成的速度贼慢，用那些工具，光改设计稿估计都能把自己累的够呛。

而Gemini 2.5 pro 目前生成HTML的效果真的很绝，基本上已经超越高保真，达到完全可以用于生产使用的标准，现在我基本都是通过对话生成HTML的方式，让gemini帮我生成产品视觉稿，并且有些细节的优化调整，通过截图和自然语言描述，gemini就能精准的理解你的意思并重新生成代码，最后不仅设计稿搞定了，顺便把前端代码也写完了；

但是需要留意的是必须使用Gemini 2.5 Pro，这个是付费的，免费的flash的模型生成效果不行，这里需要购买一个Gemini AI会员，使用2.5 pro的模型，大家可以去闲鱼搜索一下花30块左右买一个1年的学生优惠套餐）。

②搭建AI生成服务的工作流：Make (https://www.make.com/)

这个环节是AI生成的关键，关于工作流的搭建，我听到过很多研发同学推荐了N8N，也大概摸索了一下，但是没用多久就基本放弃了，对于产品经理来说实在门槛太高了，基本不是我该用的东西，N8N很强，但是比较适合研发同学，不适合我.

后来我找了很多解决方案都不行,包括dify等工具，均没有达到我的要求，这些基本都不是为产品经理搭建的，充满了各种程序员的语言；最后还是问了Gemini ，它给我推荐了make这个工具，在一番使用之后发现这个工具很适合产品经理使用，make把工作流搭建的过程做的非常的可视化，只要搭配Gemini指导，就可以轻松的使用起来，这个过程我没有去查看什么操作攻略，就是不停的截图问gemini，应该在make上怎么配置，然后就自己学会了，挺有意思的。

③编程工具：cursor、warp

对于最终基于前端代码和make工作流的打通编程这个环节，我使用的是Cursor（免费用户可以开通14天的试用），以及还有一个腾讯开发大神推荐我的Warp，这两个基本已经实现了对话方式的编程，功能很强大，具体使用如果不懂的话，也是搭配gemini手把手指导；

这个环节我一开始想使用的是开发人员非常推荐的claude code，它被一大群开发同学盛赞，然而当我打开后发现这竟然是一个通过命令行的方式执行代码的工具的时候，我基本直接就放弃了，使用门槛对我来说还是太高了，我承认它牛逼，但是对不起我不会用；

所以后来还是选择了用cursor，当然一开始我还希望Cursor能够直接把前端开发和视觉设计部分也解决了，但是实操发现Cursor的前端生成效果比较一般，并且精准识别，所以后来选择了先用gemini完成页面的搭建，然后剩余的开发逻辑再用cursor解决；

④bug定位和修复（Gemini）

在AI开发的过程中，你一定会遇到各种各样的bug和异常问题，这个环节依然是使用Gemini，你可以把遇到的问题直接截图发给gemini，它会帮你定位问题，并告诉你应该怎么解决，并且当你跟它强调必须手把手教你的时候，它会一些很实操的细节告诉你，跟着做就好；这个过程使用的工具必须要具备很强的推理和多模态理解的能力，目前看Gemini正好；同样的情况，我也尝试使用过chatgpt plus 下的GPT5.0 ，chatgpt的多模态能力很不错，但是奈何编程能力和联网搜索的能力不太行，所以也跑不起来。

⑤代码托管和发布（Netlity：app.netlify.com/）

最后，当你在本地已经确认代码没有问题，项目能顺利跑起来的时候，接下来就是找个工具把代码部署到网上，并通过一个网站来访问它，这个环节我最后使用的是Netlify，它可以实现拖拽方式的代码部署和发布。这个过程，我也尝试过使用阿里云服务器部署的方式，然而这个方式同样也是非常的“程序员”，又要安装环境，又要执行各种终端指令，最后我选择放弃，还是使用Netlify（虽然它也得付点钱）。

OK，以上这部分，我主要先对整个开发的过程，以及使用的工具先做一个说明，接下来，我们详细解说各个环节具体怎么使用工具完成任务。

二、AI无代码研发实操：详细操作

1. 使用Gemini设计产品视觉，开发前端代码

这个环节很简单，首先需要自己先解决一下科学上网的问题，如果搞不定就私下找我吧！

然后可以到闲鱼搜索Gemini AI会员花30块左右购买一个1年的学生优惠套餐，这个是gemini官方免费开放给美国学生的优惠套餐，羊毛党薅羊毛后在闲鱼卖账号，目前亲测没有问题，很香。

接着打开Gemini ，将模型切换为2.5 pro，这个很重要，只有2.5 pro能跑出比较好的效果，接下来就是描绘你的产品需求，告诉它你想要设计一个什么样的产品，解决什么问题，以及希望的功能有哪些，然后最后加上一句让Gemini生成一个HTML网页；

HTML生成成功之后，你可以通过 https://uutool.cn/html 这个工具预览实际的设计效果；然后根据效果，你可以截图发送给gemini，告诉它你的调整优化的要求，让它重新生成；

这个过程没什么技巧，就是把你的改进想法发给Gemini，让它不断地生成HTML调整设计，最后达到你想要的视觉效果就好。

例如以下是我最后生成的首页的HTML预览后的视觉效果。

几点经验分享

  1. 每次你提交了提示词的时候，都在提示词尾巴加上一句”请先确认你是否理解我的意思“，这样可以让模型先理解你的意思，并跟你确定后再执行任务，这可以很大程度上减少模型误解你的意思而导致重复生成的时间浪费；
  2. 整个项目页面比较多的时候，建议一个页面一个页面的生成，不要想着一步到位让模型一次性生成所有的页面，这种方式会导致代码变得非常长，代码一旦变长了以后，模型理解你问题的能力就会变差，然后就会经常搞错，或者出现刚修复了A问题，之前修复过的B问题又出现的情况；所以切记不要幻想一步到位，将页面和逻辑拆分的细一些，然后让模型一点一点的生成你想要的，这样反而最后是最快的。
  3. 提供一些参考图给gemini，截图参考图然后在输入框粘贴就好，模型可以理解你想要的效果，并生成相似的内容。

这个环节比较简单，就是比较繁琐，就不细讲太多，关键自己先实操起来，通过gemini给自己生成一个视觉方案，整个开发过程中最重要的是make和cursor部分，我们接着往下。

2. 使用Make搭建工作流实现AI生成服务

在第一阶段，我已经完成了前端和视觉部分的开发，但是目前它还只是一个纯前端的网页，不具备任何的AI生成能力，接下来我需要通过Make来一步一步的实现。

2.2.1.注册并登录Make

首先先打开Make（https://www.make.com/），然后完成注册和登录，注册的过程中，make会给你的邮箱发送一个激活邮件，你需要在邮箱点击激活按钮之后，才可以使用make，目前make给免费用户每个月提供了1000点的积分，用于免费尝试，对于新手基本够用，用完了就换个账号就好了。

2.2.2.实现策略长文生成的逻辑

接下来我们首先先来支持实现一下第一个环节的生成效果，用户输入一个产品名称，然后生成一篇策略长文的功能，效果如下图所示。

这里我们需要搭建一个工作流，当用户输入产品名称的时候，前端将产品名称发送给make，make接收到产品名称信息之后，执行生成策略长文的任务，生成成功后将结果返回给前端。

1.打开make后，点击左侧侧边栏Scenario(场景)，然后点击create Scenario，进入新建场景页面；

2.点击添加按钮，然后搜索webhooks，选择custom webhook，这个组件可以理解为make工作流的接收端，用于接收调用这个工作流的数据输入，前端会通过这个组件把数据input进来。

接着，点击新建一个webhook，然后直接保存就可以，目前我们已经完成输入节点的创建。

然后点击打开这个节点，如下这个URL 非常重要，你可以理解为，前端主要就是通过在这个链接上添加参数，然后执行这个链接，把数据传递给make的工作流的，点击下面的复制按钮可以复制这个链接。

接下来，我们打开cursor，并用cursor打开你之前开发的前端网页，比如名称为index页面，然后在cursor中输入如下指令，这个指令的目的，是让cursor建立一下前端页面和make工作流的连接，而建立连接的关键是，需要告诉它make的url。

当用户在当前界面输入产品名称并点击开始创作的时候，将触发make场景的调用，make场景将生成一篇长文并返回给页面，该make场景的URL为https://hook.eu2.make.com/xxxxxxxx请帮我实现该场景的调用和数据接收逻辑，接收完成后渲染该页面的展示效果。

完成之后，我们回到make工作流，点击打开webhook然后先点击Redetermine data structure这个按钮，让webhook处于待接收数据状态。

接着，我们就可以可以打开cursor修改之后的index页面，然后输入一个产品名称，比如”腾讯视频“，再点击”开始创作“按钮触发执行make场景。

这时候，webhook会接收到一个响应 successfully detemined，表示已经接收到参数，这就代表了，前端页面和make工作流的连接已经完成了，make已经能接收到前端传递过来的数据参数。

3. 新增AI生成节点，支持内容生成

webhook接收到了前端发送过来的数据，比如是产品名称”腾讯视频“，接下来，我们要实现的是，生成一个腾讯视频的用户增长策略，这个生成服务，我们通过构建一个生成节点来完成，点击webhook上的”+“，然后新增一个节点，搜索节点”gemini“，然后点击Google gemini AI 这个节点；

接着，选择create a completion；

在connection部分，点击add，然后输入API KEY，name部分的配置不重要随便填，关键是API KEY ，这个就是你连接Google 的模型的钥匙，千万注意的是，APIKEY一定要注意不能轻易泄露出去，因为一旦别人拿到你的APIKEY，就可以疯狂的刷你的资源，就好像拿到你的visa信用卡一样。

获取API KEY的方式如下：首先打开https://aistudio.google.com/api-keys，然后点击创建API key按钮，就可以新增一个API KEY，然后复制这个key，粘贴到前面的输入框中。

选择模型，刚开始建议先选择gemini-1.5-flash这个模型，目前这个模型完全免费，后面你在使用的过程中不会遇到因为模型限制而出现的问题，我们先跑通流程，一会我再告诉你如何免费的领取Google 300美元的赠送金，用于模型调用使用。

输入提示词内容：在massages部分，role选择user，parts中的message type 选择text，然后在text这里，输入你的提示词，这个环节是个关键，你的所有生成的提示词是在这里定义的，这里定义了输入一个产品名称后，具体这个长文内容怎么输出内容。所以，这个环节你需要额外学习一个技能：设计提示词。

这部分我暂时不在这里细讲，后续有需要再单独写一篇文章，由于这里的提示词是在下非常宝贵的知识，所以请恕我不能直接对外公开。

接下来有个环节非常重要，提示词中我们可能会插入参数，用户接收前面webhook的数据。

这个参数不能自己随便写，要选择从下方的hover输入框中插入，比如下面这个输出框的参数为product，点击它插入到提示词中，这个环节的意思表示，将前面webhook的传递过来的参数product用户作为提示词的参数，这就解释了前面webhook要接收一下参数的重要性，如果没有这个环节，你自己随便输入一个参数，是没有用的，因为make的工作流并没有接收到任何数据，然后点击保存；

另外需要注意的是，只有完整了之前webhook接收收据的调试之后，这个参数才能显示出来，你想想也知道，make不会凭空创建出一个前端代码对接的参数，它需要有人告诉它。

4. 接下来我们需要把生成的结果返回给前端

需要注意的是，我们返回给前端的时候，数据格式必须是json的格式{”参数key”：”value参数值“}这种格式，代表我需要将生成的结果值，通过参数key封装后提交给前端；

由于我们前面生成的内容是一个纯HTML，接下来我们需要将这段HTML转成JSON，所以我们在gemini ai后新增一个create json的节点如下；

点击新增json节点后，点击add增加一个参数，然后点击增加项目；

在下方输入参数名，这里可以自己定义，这个参数就是最后提交给前端的参数名称，然后保存；

5.接着我们再新增一个接收最后结果的节点，在JSON节点后面新增一个节点webhooks response，这个节点用户接收生成的结果，并将结果返回给前端；

打开节点，在body部分选择插入result，表示将上一级节点的结果作为输出。

至此，我们便完成场景的搭建过程，如下是我们搭建的一个完成的工作流。

6. 工作流调试

接下来我们来调试一下这个工作流是否正常，并修复其中的一些问题；调试的方式，如下，首先点击工作流面板上的run once 这个按钮，让工作流处于监听的状态；

然后打开index页面，输入产品名称，点击开始创作，执行完成后，就可以在make面板中看它返回的结果情况，如下所示各个节点右上角出现了1的标志，表示生成成功了，点击节点右上角的”1“，可以查看实际的生成结果。

在这个过程中，你肯定会遇到很多的很多的问题，通常大部分都是生成内容的输出格式的问题，遇到问题的时候，记得就是截图发给gemini，问gemini这是个什么问题，让它告诉你怎么一步一步解决。

调试完成后，记得打开底部immediately as data arrives ，表示实时接收数据，然后保存场景。

最后，保存场景配置然后回到场景列表页，点击打开场景的开关，这样场景配置就算完成了，可以回到index页面，运行尝试一下看结果返回是否正常。

比如最终返回的结果如下：

该过程中常见的问题和解决方案

接下来我总结一下在这个环节上我主要遇到的问题和解决方案。

1.AI生成的是markdown的文本，但是markdown的文本不能直接用于HTML网页的呈现

一开始我直接将AI生成的内容用户前端展示，导致的结果就是前端的展示很乱，如下所示：

通过gemini定位了解到，我必须要讲marddown的内容转成HTML代码，才能在前端以更加友好的方式展示，这里我们通过在提示词里面做优化就好，可以限定生成的结果不是一个markdown格式的文件，而是一个HTML文件，具体的提示词应该怎么写，可以让gemini给你提供建议，比如以下为gemini给我的建议提示词，，我将其添加到提示词中，便解决了这个问题。

1.在任何情况下，当你需要输出HTML代码时（例如生成图表），你必须只输出纯粹的、不包含任何解释或Markdown代码围栏（比如 “`html）的HTML代码本身。2.最终输出的长文内容中，严禁使用任何Markdown语法（例如 ##, **, |—| 等）。所有的格式化，包括但不限于标题、加粗、列表、表格，都必须且只能使用标准的HTML标签（,,,等）来完成。3.重要：这篇长文必须使用HTML标签进行格式化，一级大纲使用标签，二级大纲使用标签，加粗使用标签，表格必须使用、、、等标准HTML表格标签（该部分的标题不需要输出）。

至此，我们终于完成了策略长文部分的生成和前端展示，以上的整个过程，还是有一定的学习门槛的，但是相比之下，基本都是可视化操作，对比你去使用那些编程工具，真的是容易太多了。接下来我们进入下一步，完成将长文生成营销素材部分的功能。

2.2.3.实现营销素材生成的功能

这部分是我遇到的问题最多，也是处理时间最久的环节，其中导致处理这么久的主要原因，还是我太急于求成，想着一步到位实现所有的功能，所以真的不要一下子就想让模型解决太多复杂的问题，一定要一步一步来，一点一点实现逻辑和功能。

1.支持小红书卡片生成和导出

接下来我们需要支持一个功能，当用户点击”一键生成小红书素材“，可以生成如下图所示的小红书卡片，并支持一键导出。

首先我们需要另外构建一个make场景用于生成小红书卡片，其原理是通过一段提示词，将整个长文生成一个HTML网页，网页中包含多张小红书卡片，构建场景如下：

然后接着回到cursor，同样给它一个指令，告诉模型，当用户点击”一键生成小红书素材“的时候，要调用以上工作流的输入端webhook的URL，并将生成的长文作为输入；

这个环节中，我首先遇到的第一个异常就是这个工作流一直都接收不到输入，就是说，前面生成的长文结果没有传递过来，定位了好久才发现，原来是因为传递的参数搞错了，这里主要的原因就是我没有像之前一样从页面运行一下make场景的调用，让webhook接收一下参数，从而导致了这个问题，正确的方式还是像之前一样，先点击如下按钮，让webhook开始接收数据，然后点击页面的按钮调用这个工作流；

这个操作过程和前面有些雷同，就不重复讲了，其中比较关键的，其实是生成小红书卡片部分的提示词的设计，这个是有一定的技巧门槛的。以下为最终的实现效果：

遇到的问题和解决思路

当然，在获得这个结果之前，也历经了很多波折，我将主要的问题记录下来如下，方便后面大家也遇到问题的的时候有些参考。

①怎么在结果页中展示卡片的效果？

一开始我的想法是，前端固定这个卡片布局和样式，接收到HTML之后提取内容并渲染出卡片效果，这个方法在尝试了好多次之后最后宣布失败，最后我选择了另外一种策略，前端只搭建好大的框架，把卡片区域留白，然后卡片区域的内容交给生成的HTML控制，通过这个方式解决了这个问题；

②怎么支持一键下载所有卡片的功能？

一开始想通过cursor解决这个问题，但是一直都不成功，后来偶然在生成HTML的提示词中增加了JSZip，html2canvas 这个两个插件库的引入后，发现一下子就解决了，所以这里总结的经验就是，如果需要解决一些依赖js的问题的时候，可以增加一句提示词，引入相应的js库，可能就解决了相应的问题；

1.为确保可靠性，必须通过SVG字符串 -> Image ->Canvas-> PNG Blob的方式生成图片并添加到ZIP包；2.使用Chart.js，JSZip，html2canvas（通过CDN引入）。

③生成效果的问题，有时候换个模型就解决了

一开始生成的卡片一直显示不出来，出现很多异常，包括卡片太小等问题，后来才发现，原来是因为使用的模型是gemini-1.5等级太低的问题，生成结果不好，导致卡片异常，后来切换成gemini-2.5-flash效果就展现出来了；

④前端接收的结果仅为accepted，但是make已经生成完结果了

这个的主要原因是因为make的生成超时了，前端等待了很久都没有获取返回结果，这个问题，后来解决的方式是在前端增加失败后多次重试的方式解决；

⑤模型用量超限问题

当效果展现出来以后，又遇到了模型用量超限的问题，这个时候，需要开通激活一下谷歌云账号的权限，可以领取300美金的赠送金，免费体验90天。

具体方式为打开https://console.cloud.google.com/ 完成登录后，激活账户，并绑定支付方式，就可以领取赠送金，加上其他的活动，Google总共送了我2300美元，是在太爽了，谷歌就是大方。

开通之后，需要启用激活一下Vertex AI API，在Google cloud 搜索框输入Vertex AI API，点击后激活。另外，激活账户之后，就不要使用gemini -1.5这个模型了，官方已经停用了，不要选择这个模型，否则会出现如下报错。

2.实现小红书笔记生成和营销长图生成

接下来我们需要支持小红书笔记生成和营销长图生成的功能，其过程和注意事项和前面生成长文和小红书卡片是一样的，这就不赘述了，以下为最终实现的效果；

这里可能会遇到的问题是，以下每个功能都需要搭建一个make场景来支持，但是make平台一个免费用户只能新建两个场景，这个问题就通过新增一个账号的方式免费解决就好，当然用习惯了也可以直接付费升级会员。

2.2.3.cursor做交互和功能微调

前面我们基本已经把AI生成服务的逻辑都实现了，接下来就是优化调整前端的产品交互细节等，比如增加跳转锚定，更换布局等，这些直接通过对话指令的方式发送给cursor就可以完成。

至此，我们终于完成了所有的代码编程部分的工作，接下来，我们要做的就是发布这个代码，让自己能通过一个网站来访问这个应用。

3.发布和托管项目：Netlify

前面我们已经把代码开发完了，接下来我们要做的就是发布这个项目然后通过一个外部域名来使用这个功能，这部分具体的操作，最简单的方式，就是问问gemini怎么在netlify上部署应用，它会给你非常清晰的指引，所以我就不详细讲了，因为与其告诉你答案的明细，还不如告诉你怎么找到答案。

当然，这里包括两种情况：

1.已经注册了域名：通过Netlify发布项目，具体问gemini怎么搞；

2.还没有注册域名：通过github托管发布，由于你可能也不懂发布的过程，这个托管发布的过程可以通过扣子空间来帮你执行发布的动作，你只需要在扣子空间了输入提示“帮我将如下这个项目通过github完成托管发布，输出一个网站，让我在公网上能访问这个项目”，扣子空间具备执行任务的能力，会帮你完成发布的过程，但是这种方式发布的网页，域名使用的是GitHub的域名，不是你自己的域名。

至此，我们已经完成所有的工作，你可以获得一个链接，用于直接运行这个AI应用的服务，由于我目前这个项目还有一些工作没有收尾完成，该案例项目的体验链接，我将在后续开发完成之后对外公开分享，欢迎大家到时候体验，对该功能有兴趣的也可以提前预约我后续私发链接。

三、最后的一些思考

对AI编程和应用开发的一些认知刷新

1.说实话当全流程跑通并且应用顺利访问的时候，我是非常激动的，这对于产品经理来说，意味着我们有想法的时候，真的可以自己手动快速开发一个项目出来快速验证，这是我们以前从来没有过的体验。

2.这次尝试刷新了我当前对于AI编程这个领域的认知，半年前的时候我还是觉得AI现在无法做到 idea 即应用，但是目前真的亲手做出来了，我有理由相信未来AI编程一定会突飞猛进，产品经理开发AI应用不会太遥远。

AI编程发展起来之后，产品经理是不是真的就能替代程序员了？

亲自开发项目之后，就会发现，替代程序员这个事情，差的还远着。

严格来说，目前这个开发方法，用于开发一个个人或者企业内部使用的工具来说还可以，但是如果说面向用户使用，可能还远着，具体还有哪些局限性呢，概括起来主要包括如下：

  1. 代码的安全性的问题：我自己目前还是个产品经理，对技术风险其实还没有概念，这块我还不懂，需要专业的技术人员才能更好的解决，关于安全这部分，后面我会单独分享一下AI应用开发的一些研究成果；
  2. 还缺乏账户、支付等相关的能力，也缺乏对整体的数据架构的设计和管理的逻辑；
  3. 未来一旦越来越复杂的时候，产品经理用AI编程，是搞不定的，还是需要专业的技术人员参与，不过当我已经完成了MVP的验证，接下来也是时候转入正式的产研接入流程。
  4. 所以，总结而言，我觉得暂时AI编程还是不能替代研发的，未来研发人员的核心价值可能不是在于编程，而是在于代码架构、管理、控制和专业的技术方案输出上。

结尾

本篇文章到此结束，欢迎大家按照上面的攻略是实操一下给自己开发一个小小的AI应用。

作者：三白有话说，公众号：三白有话说

本文由 @三白有话说 原创发布于人人都是产品经理。未经作者许可，禁止转载。

题图来自豆包官网截图