无需编程基础，也能用AI打造自己的专属工具？美团推出的NoCode编程类AI Agent让创意落地变得触手可及。从AA算账工具到英语学习小程序，只需三步就能实现产品从构想到上线的全过程。本文将揭秘如何通过精准提示词设计和多模型测试，让AI帮你跨越技术鸿沟，体验零代码开发的魔力。

自去年调研了几十款海内外的AI应用，并持续更新20篇文章后，我突然对AI兴味索然，唯有春节期间MiniMax股价冲击1000港币的消息，让内心掀起波澜。多数时间里，我对着草稿箱的内容，丧失了创作欲。说到底是掌控欲作祟，一旦窥探到别人做产品的手段，自己就想上手试试。奈何能力有限，只会说一些“hello world”和“PHP是世界上最好的语言”之类的老梗。

万幸AI技术迭代很快，去年还在烦恼如何成为Claude付费会员，今年Vibe Coding的光就驱散了阴霾。只要向AI发送指令，例如：“我想做连连看小游戏”、“帮我3岁的小侄女做学英语的小程序”，不用一分钟就能生成代码，点击“运行”还能体验产品。除了一千多年前的宋朝，咱文科生似乎再次迎来短暂的春天？

好啦言归正传，所以如果你也像我一样，没有编程基础，又超级想把灵感一瞬，落地成给生活添点色彩的趣味应用，这款美团公司出品的编程类AI Agent——NoCode，势必体验一下！事先声明，这绝不是广告贴，我跟美团，除了日常点外卖（以及被恒生科技etf刺痛）的关系，再无其他金钱往来……

接下来，我将以自己制作的小工具为例，结合Vibe Coding过程中经历的工作流、操作阻点及解决方案，帮助你梳理思路。废话不多说，看我教你3大步走，“零代码”用AI做工具吧~

第1步：梳理idea，规划基础功能，绘制简单的(前端)产品原型图

我这次用AI制作的是一款“AA算账工具”，灵感来源于跟朋友们出去玩，每次需要支付的金额、需要AA账单的人数，多有不同。为了减少多对多转账的麻烦，兼市面上暂无100%契合我使用需求的应用，遂尝试自割腿肉开发之。

对于熟悉excel的朋友，“多人AA算账”不过是一个数学公式的事，但考虑到外出场景，并非所有人都会随身携带电脑；而App、小程序的产品形态又太正式，更何况我不需要拉新，也不考虑留存复访。所以在落地样式上，我选择做成H5页面，不论是电脑端，还是手机端，点击链接就能使用。

回到产品构思上，最初规划1.0版本的功能时，我希望这款“AA算账工具”，能满足3点需求：

1. 支付笔数、参与人不多时，可手动添加账单；
2. 有模板账单，由一人汇总整理，再上传计算；
3. 账单直观展示AA结果，且无需多对多转账。

由于落笔时我的思路经常变化，在明确了基础的产品功能后，我通常会选择手绘产品原型图，毕竟纸质版更有助于我快速调整页面布局。

只有当原型定稿，我才会迁移到Axure或者Figma，绘制用于留档的电子稿原型，同时撰写具体的功能说明文档，标注前后端页面的交互细节，以及后台数据存储情况等。

*注：上图并非本次工具，仅为平常练习图

所以在启动Vibe Coding前，有几个小细节必须确认，我简单罗列出来了，你可以提前思考：

☑ 想用AI做的产品，能解决哪些“问题”；

☑ 产品落地形态，是app、H5，还是小程序；

☑ 有哪些基础的功能，能否具体描绘使用方法；

☑ 页面长啥样，能否画出简单的产品原型图。

第2步：撰写提示词(prompts)，用deepseek等AI助手试运行，再根据输出样式，持续微调

工欲善其事，必先利其器。理清了第1步的产品规划，你才能写出更精确的prompts，即“提示词”。提示词越清晰，即便你事先没有给AI发送参考图，它生成的UI设计稿，也能极大程度地还原你的产品原型图。

# 我要做一个AA算账工具

– 页面样式是app的尺寸

– UI的设计风格是电子小票的样式

– 大标题是：AA算账小助手，左侧是计算器样式的icon。居中展示，20号字

– 大标题的副标题是：输入支付情况，1秒告诉你该给谁转账。不需要icon。居中展示，13号字

– 只有模块1、2、3、4有卡片边框；大标题和大标题的副标题，不需要边框

– 所有icon是矢量图，风格统一，颜色相同，色号是# 006FFA

# 这个AA算账工具，一共有4个模块，具体功能点说明如下：

# 模块1，

1.1 标题是：消费信息录入，左侧是笔记样式的icon。12号字

1.2 按表格的样式展示录入的信息

1.3 可自行输入消费信息，前端展示的字段标题为：笔数、付费人、金额、AA参与人。字段标题居中展示。字段标题一行展示，不换行。

1.4 笔数根据用户输入的信息累加，格式是“x”，以此类推。笔数文案一行展示，不换行。用户首次进入该工具时，系统默认展示第1笔，且不可删除。用户点击“x”按钮后，根据当前数据，自动计算账单

1.5 付款人字段的提示文案是“姓名”，金额字段的提示文案是“0.00”，AA参与人的提示文案是“英文逗号隔开”。内容输入框请勿溢出

1.6 每一列消费信息的后面有一个“×”图标，点击该图标，可删除整行信息，但第1笔即第1行不可删除。不需要被命名为“操作”

1.7 最下方有一个“添加一笔新消费”的按钮，用户点击后，可新增一列空白的消费信息。“添加一笔新消费”按钮的UI样式为：有加号样式的icon，外框为虚线

……

……

……

# 模块4，

4.1 标题是：上传消费附件，不需要icon。12号字

4.2 呈现为2个部分的内容

4.3 第一部分，有一个按钮，文案是“下载模板”。不需要icon。按钮上方的提示文案是：下载导入模板，轻松上传账单

4.4 用户点击“下载模板”按钮，可获得一个excel文件，字段为“付款人”、“金额”、“AA参与人”，不需要填写消费笔数，系统自动生成

4.5 用户下载成功，则在该部分有一行小字提示，文案为“您已成功下载模板”，10秒后文案消失

4.6 模板提供输入的参考格式

4.7 第二个部分，有一个按钮，文案是“选择文件”。不需要icon。按钮上方的提示文案是：请上传完善好的账单。用户点击“选择文件”该按钮，可唤起用户桌面，上传有以上字段的文件

4.8 支持xlsx格式文件。并将具体信息，自动录入到# 模块1；文件的信息录入完成后，即自动计算账单

4.9 用户成功上传，则在该部分有一行小字提醒，文案为“您已成果导入 xx 笔消费”，数据来源于用户成功导入的消费信息，10秒后文案消失

4.10 第一部分和第二部分之间，有一条虚线隔开

# 请你帮我把以上输入的信息，输出为一个可以运行的页面

以我做的“AA算账工具”为例，简单分享部分提示词。篇幅有限，我无法完整展示，方法论都差不多。概括起来，我写提示词的逻辑思路是：

1.使用“ # ”、“ – ”等符号、序号和空行，划分提示词内容；

2.第一部分用于拟定产品基调，描述：落地形态、页面布局、视觉风格等；

3.第二部分，总述整个产品大概的功能模块；

4.余下部分，详细撰写功能模块，包括：特殊UI、交互逻辑、提示信息等；

5.最后，告诉AI，让它根据全部信息，输出“一个可以运行的页面”。

但由于NoCode为每位用户提供的AI对话次数有限，在你的提示词正式定稿前，为了不浪费对话机会，就要提高提示词的准确度。

我的解决办法是将写好的提示词，上传到其他AI助手，让其按需写代码，点击“运行”按钮，参考AI大概会生成的产品。这样做的好处是：AI会补充一些你之前没考虑到的细节，还能提前验收产品功能，及时优化提示词。

截至我输出本稿前，在AI编程能力这一块，各家大模型的纯主观体验排行榜：Claude＞deepseek＞豆包＞千问＞元宝。个人的使用感受是：

1.千问的代码运行较拉跨，计算时容易宕机；

2.豆包的UI一般，不事先强调的话，生成的页面会文字溢出，适配度需提升，但计算能力尚可；

3.deepseek能补充产品需求，且UI更美观；

4.元宝的需求理解能力不太行，新增多轮需求后，较难联系上下文输出有效的代码。

毕竟每一款AI助手的优势不同，你写好提示词之后，至少上传到2款AI助手，检查产品的逻辑漏洞，我优先推荐deepseek和豆包。至于为啥不点评Claude，支持国产替代人人有责（笑）。

第3步：在Nocode输入定稿提示词，挑选UI样式满意的版本，测试通过后，部署上线

恭喜你完成前2步，不像PDD的砍一刀，总是还差0.01%才能成功提现，此时的你，距离使用AI做出一款工具，真的仅剩5%的待办事项。

接下来，你只需注册NoCode账号，发送定稿的提示词，花点时间等待AI的反馈即可。

正如上文所述，每一款AI助手各有所长，即便在第2步已经做了万全准备，NoCode生成的页面不一定让你满意。为了快速完成，你或许会选择将设计网站上的优质UI截图，发送AI，并告知它按照参考图生成新的页面。

暂不探讨AI伦理与合规等深度话题，此类“将心仪作品投喂AI”的做法，在个人看来，存在侵权风险，特别是有版权的作品。如后续涉及商业化行为，建议谨慎对待。

正式上线前，“没有bug”是我对一款产品最基本的要求。如果你不懂技术，无法输出逻辑缜密的《 产品验收测试用例》。

我推荐一种“笨拙”但有效的方法：将自己想象成首次接触这款产品的用户，热衷于“挑刺”提意见；把每个页面、按钮都“戳一戳”，并结合第1步整理的功能点，细致检验你的劳动成果；将发现的问题，反馈给NoCode，让它进行bug修复。再循环检查，直到挑不出毛病。

完成所有步骤后，挑选一个你满意的版本，点击右上角的“部署”按钮，就能创建出一条让他人访问的链接。

为了纪念这一重要时刻，你可以依照个人喜好，在限定范围内，自定义这款工具的域名。

除此之外，NoCode还有2个相对“进阶”的功能模块，能辅助你提升产品体验，分别是【作品数据分析】模块和【权限、域名管理及知识库】模块。当然这是后话啦，本次就不展开介绍了。

大圆的小tips：Vibe Coding过程中，遇到若干问题的解决方案

问题 1：如何将指定图片上传NoCode使用？

经过探索，我尝试过2种解决办法：

方案一，访问图片素材网站，挑选图片后，点击右键选择“复制图像链接”，将链接发给AI，告诉它如何使用这张图片，例如：保留人像抠图，生成透明底，并放在主标题右侧。

但像国内的花瓣网等，设置了图片防盗链，NoCode没法直接调用（*或许可以，但我没时间深度研究相关提示词或技术手段，也不想惹版权纠纷）。Pixabay之类的外网能提供可商用的图片，如有需要可尝试，但依旧请你留意版权问题。

此外，如果发现点击右键获得的链接，AI还是难以识别，可按住F12进入“元素审查模式”，点击最左侧的“检查”按钮，将鼠标移动到图片所在位置，就能拿到一个方便AI识别的图片链接。

方案二，通过技术手段处理，花时间找免费的图床网站；或在腾讯云、阿里云等购买服务器，将图片上传自己的云服务器，取得链接并发给AI。

问题 2：不懂设计软件，AI生图又太丑咋办？

前阵子社媒发布了Google Stitch的消息，声称这是一款能快速生成UI的AI助手，简单体验后，我觉得它更满足逻辑简单、页面简约的产品的设计需求；如果你用AI制作的产品，想投入到金融业务等复杂场景，它的实用性就不足。

此前爆火的龙虾类工具，也涌现了一批设计skills，我暂时还没去体验。

所以我建议在时间有限且不考虑尽善尽美的前提下，与其花心思挨个更换大模型去调试Stitch，或者到GitHub精挑细选并安装skills。

还不如在版权允许的范围内，截图给NoCode参考，要求它按相似风格生成UI；或者在提示词下功夫，更具象化地描述想要的设计风格。最后，大概就是努力提升个人审美能力了……

问题 3：AI做的工具达到哪种程度才能上线？

就个人感受而言，即便你从未完整地参与到互联网产品的开发，在尝试Vibe Coding时，只要达成2点，就是一款合格的产品，你完全可以放心大胆地分享给大家使用。

首先，你把最初规划的产品功能做出来了，并且实现了想要的效果。其次，即便1.0版本的美观度一般，但产品的前端页面，能正常展示信息。

最后想强调的是，我本次分享的用AI制作工具的流程，侧重于前端页面；并未考虑多轮提示词沟通后可能产生的“屎山代码”等状况，也没有去纠结数据库设计、代码编辑器选择、云服务器购买等更复杂的问题。

我始终觉得，每个人都享有低成本感受技术之美的权利，大厂们出品的编程类AI Agent，或许偏离了Vibe Coding的最初设定，不苛求使用者能否看得懂代码，强调“创意为王”。屏幕前编程能力为零的你我，借助人机交互，享受技术红利，让AI快速上线一款可用的产品，获得“原来我也行”的正反馈。

说一千道一万，我觉得更重要的，是拥有一双热爱观察的眼睛，愿意思考解决方案，不畏困难亲自实践。毕竟技术只是手段，商业变现还是暂时遥不可及的星辰大海，唯有运用技术去造福平凡生活的人心，才是Vibe Coding的意义。(๑•̀ㅂ•́)و✧