从0到1用AI做了个AI服务网站, 全程没写一行代码。

🍹 Insight Daily 🪺

Aitrainee | 公众号：AI进修生

Hi，这里是Aitrainee，欢迎阅读本期新文章。

这两天，我做了一件很有意思的事。

用AI编程做了一个网站，让别人也能用上AI服务。有趣的是，我全程真的一行代码都没写过，全靠Bolt和Cursor Composer完成（如上视频）。

你可能会问，为什么要做这个？其实是这样的 - 最近我发现很多朋友都想尝试AI编程，但总觉得门槛太高。特别是那些刚入门的同学，看到代码就头大。

所以我就在想，要不咱们从最简单的开始？用AI做一个可以给别人提供服务的网站。

网站的体验地址是：

https://ai-saas-2-gilt.vercel.app/（国外）
https://xctiubcdlgzd.sealosbja.site（国内，浏览器打开）

放心，就是基本的功能，多了，两天做不完，而且用三篇文章也写不完。

这个网站主要提供三个服务：一个是AI绘画，用的是together ai的flux模型；另一个是AI聊天机器人，用的是智谱最新的GLM-4v-flash多模态大模型。第三个是AI截图复刻网站服务，用的也是GLM-4v-flash模型进行图像处理。

最棒的是，这两个模型都是免费的！作为初学者，我们当然要先从免费资源开始玩起。

生成一个基础的SaaS网站框架

包括页面结构、登陆注册、AI生图 服务仪表盘（登陆之后跳转到此可以生成图片）。

你可能会问：“SaaS是什么？”简单来说，就是“软件即服务”的意思。比如我们常用的ChatGPT，它就是一个典型的SaaS产品 - 你不需要安装任何软件，打开网页就能用。

我们这一期先不做订阅或者积分系统，但是会生成定价界面。

我们使用Next.js框架全栈开发（开发网站，适合用这个框架）。

我们使用Bolt生成一个基本的网站框架，然后我们使用Cursor去迭代这个网站，让它更符合我们的需求。

我们输入给Bolt的东西是：提示词 + 参考图片（可以参考其他网站或者用Flux这些文生图模型生成或者Figma这种UI设计工具）

我这里使用一个网站作为参考，这个网站是 https://ryne.ai/?utm_source=toolify。

左右滑动查看

这是输完提示词+参考图片之后，Bolt的输出：

它一步生成了这个网站的代码，实现了页面结构、登陆注册、AI 服务仪表盘。

提示词预览在这：

为了文章的简洁，提示词详情：公众号后台回复：glm。

视频的后半部分是让Cursor根据together ai的flux模型API文档，生成的高级功能，同样只需要把文档给他，然后你让他这么做就行了。当然那个交互并不好，需要后面去迭代。together ai文档在这：

当然，你可能会问：“只有Bolt才能做到吗？”

其实不是的。我最开始是用Cursor来做的，把整个过程分成三步：

1. 先生成基础页面结构

2. 再加入登录注册功能

3. 最后做AI服务面板

后来发现Bolt可以一步到位，就把这三步的提示词合并了，当然三合一的提示词给Cursor，它也可以做到。

这让我明白了一个道理 - 用AI编程最重要的是你怎么表达你的需求。

当你不使用Bolt的时候，你可以完全使用Cursor来开发，自己初始化项目即可：

npx create-next-app@latest

而Bolt他会自动创建项目，你只需要下载到本地，然后用Cursor迭代即可。

当然，前面分三段的提示词和相关API文档。，也放在公众号后台。

我们再来介绍三合一的提示词组成部分：

1. Saas网站的页面结构

就是这个网站的基本框架的一些描述。

当然这个提示词也不是一步到位的，这里分享一个实用技巧。我发现用“第三者AI”来优化提示词特别有效。具体怎么做呢？

比如我先用一个粗糙的提示词生成代码，然后把代码和理想效果都给另一个AI看，问它：“这两个有什么差距？怎么改进提示词会更好？”

就像有个技术顾问在旁边给你出主意。我经常用Cursor Chat 和 Gemini（主要可以发很多图给他，而且速度快）、Gpt-4o、Claude当“顾问”，让它帮我完善提示词。效果真的很不错：

用好AI编程，使用第三者AI作为一个中间智能体，这是一种常见思维。

2. 集成Supabase实现网站的登陆注册（使用免费的Supabase，这是一种BaaS服务，可以用来存储用户数据）

以前的文章写过，也做过结合AI编程做过示例：

创建好基础的页面之后，我们需要给页面中的登录注册连接上我们的Supabase数据库以实现登陆注册功能：

使用三合一提示词前提是你已经在Supabase中创建了数据库和表，并且准备好数据库链接和API key。

如果你没有做好这一步你可以看这篇文章：

这链接里面也有流程：

https://z0kdt9b641u.feishu.cn/wiki/TWy2wm1dtiOSnDk9Wj1clBNAnAf?from=from_copylink

3. 网站的AI 服务仪表盘（接入together ai免费的flux模型API）

这是三合一提示词的最后一部分，flux模型API调用方式。用于登录后实现AI生图服务。

好了，我们三合一的提示词就写完了，上面的视频已经演示了效果。

AI生图模块先到这里，我们开始第二个模块，AI视觉问答模块。

AI聊天机器人模块

说完了AI绘画，我们来做点更有意思的 - 让网站能“看懂”图片。

还记得我们用的GLM-4v-flash模型吗？它不只是能聊天，还能分析图片。

实现这个功能其实特别简单。我只需要把智谱AI的API文档给Cursor看，然后告诉它：“帮我做一个能上传图片并分析的页面。”

公众号后台回复：glm

这里是演示视频：

到这一步还没有流式传输、图片上传等等，但是已经可以生成一个基于GLM-4V-Flash的视觉分析工具了。

其实要实现什么功能，你只需要告诉AI，然后让他去实现就可以了。

那么我们接下来开始Copycoder 模块，后面还有一个界面优化的章节，对上述的模块进行优化。

Copycoder | 网站截图复制模块

接下来这个功能更有意思了，这个AI工具我们在以前的一篇文章中有提到，它是用来生成Cursor、Bolt、V0提示词的工具，用于给我们快速复刻一个网站：

Copycoder：这个工具和 Cursor、Bolt、V0 配合太棒了！提供更好的前端开发提示词（AI导航网站生成）

2024-12-02

我们也简单模仿一下它，工作原理很简单：

• 上传一个网页截图
• GLM-4v-flash模型分析图片
• 自动生成Cursor/Bolt可以用的提示词

我们现在用图片里的这一条提示词就可以完成Copycoder里的基本功能了：

 如下图：

界面不太美观，我们继续用下面提示词迭代（这个提示词是其中一部分，其他部分在下面：界面优化 - 星空主题）：

这里是界面优化后的演示视频：

这个服务生成的提示词效果目前就是这样，主要先搭个模子吧。

这里是源码的后端的=提示词（预览）：

本期文章源码放在订阅频道的合集群聊里，有疑问的可以群里问，合集入口在文末。

当然我们知道后续可以继续优化后端的提示词，或者在代码里实现Agent，或者使用可视化的Agent平台如Dify来构建这样的后端服务。或者他在生成第二个提示词的时候，可能会依赖于第一个提示词的结果。。。

总之迭代后，可以生成更好的网页复制提示词。

所以搭个模子，先放这里吧。

给网站穿上星空外衣 - 界面优化篇

说实话，做完基础功能后，我觉得界面还是太普通了。作为一个AI服务网站，总得有点科技感对吧？

于是我就在想：要不整个星空主题？

你可能会问：“这得多复杂啊！”

但有了AI，这事儿真的变得超简单。我只需要告诉AI：“我想要一个星空主题的界面，带点科技感，最好能有一些动态效果...”

这是在优化Ai视觉问答的界面的提示词：

左右滑动查看

我后续的一些提示词中还提到了黑洞，就是鼠标再输入框以外那些预设提示词的”星座“会被鼠标吸引过来，然后点击”星座“，会填充预设提示词。

左右滑动查看

这里是A视觉问答的界面优化效果

不过这只是其中一种效果，AI的许多迭代我都保存了版本。在我的git库里面，以后想要基于某个版本再去开发也是可以的，创建一个新的分支。。。

那么以下是一些版本，有些效果太炸裂了，我就不放了。什么物理效果啊，整上直接把浏览器卡崩了。。。哈哈哈，还有一些就是，Cursor check out和本地git控制没处理好，然后就丢失了。

我感觉订阅合集后续的一期的连载一篇如何使用Cursor check out和本地git控制，毕竟版本控制不处理好，想发挥好ai编程的实力基本上是不可能的。。。

要不下次别调用大模型api了，直接来整，酷炫的视觉网站吧，感觉是个不错的想法，哈哈哈。。。

视频中应用了GLM-4V-Flash模型不同场景的能力。

GLM-4V-Flash模型视觉能力可以应用在很多不同的场景中：

GLM文档都在公众号后台回复glm即可获得。

然后还有这种空间撕裂感：

左右滑动查看

我感觉用好ai，就是可以实现你所想的各种东西，所以，请大胆的想象。

对了，我感觉下面要介绍的效率提示词会不错，希望有点启发，我可能可以找各种特效直接让ai帮我一些网页前端效果。

效率提示词

1、当你只想简单说出现有的问题，又想让他改的比较专业的时候，下面这种类型的提示词是一个方向：

提示词1：虽然我提供的这些需求描述字数不多，但我相信你是一个极其聪明的人。一个真正聪明的人，能够从简单的需求中直接提炼核心，并将其转化为一份最佳实践的、超级详细的计划设计方案。我给出的简单需求，其实背后对应的是一整套复杂的逻辑和设计方案。你需要用一套自洽、清晰的思路，把我的需求映射成完整的解决方案，这份方案既要详细到实现层面，又能够体现出专业性与系统性。现在请开始改代码；Take a deep breath，Let's work this out in a step by step way to be sure we have the right answer. If there's a perfect solution, I'll tip $200!

2、在需求中添加，让他自己去决策设计策略：

提示词2：反思一遍现有项目局限性，优化整体布局和视觉层次，自主性的探索改进方向并直接进行代码改动，你自己去设计一种策略，目的是开发出世界级的项目。

当然这些是我们直接发给Cursor的提示词，Cursor还需要配合.cursorrules、.cursorignore文件，来实现更好的效果。

还本文提到的一些阶段的提示词还并行的有几个版本以供挑选。这些会放到云文档中，云文档后续有新的持续更新，除了这些，还有其他方面的知识，一起集成在合集知识库中；当然这些会放在合集群聊里。

其实本文写完之后，感觉还是许多可以说的，AI编程经验确实要来自于大量的实践，你要了解一些代码、你要懂AI，以前一直玩Chatgpt的经验肯定也是有帮助的。

当然我们这个Next.js框架我以前是一点都不会，但是使用AI编程，你就可以各种跨界，一通百通。代码这东西换种语言换种框架，逻辑都差不多，这AI编程就是效率神器。

本来本文应该是合集连载的一篇内容，不过感觉内容上以后可以作为引用的材料，所以就作为日常推文吧。合集其实会汇集一些日常的（但是不计入更新计数）让他更全面，省得四处找。

Cursor等AI编程工具 — 新的7大使用技巧

以前也写过Cursor的技巧，我感觉这些技巧也是要不断实践更新的，所以这一篇有这些技巧：

1、在使用Cursor的时候，纵向迭代一直解决不了的时候，试试横向生成。

这是什么意思呢？我来解释一下：

我说了，我们这里不考虑你自己去解决AI的Bug，我们知道ai大模型的每一次生成是一种概率，同样的提示词，它给你的那一次并不一定是最好的。

假设我们这一次，他给我们的输出，看好是比较差的，然后产生了Bug，然后我们就一直通过截图或者终端报错把错误给他，然后让他迭代的去改，最后改了很多很多轮都没有解决。

其实这个时候你该停下来了，不然越改越乱。你该去横向生成了，你该去生成更多的参考，就像文生图一样，挑选更好的结果。有的时候横向生成那一次比较好，根本就不会产生Bug。

就像拍照片一样，同一个场景，多拍几张总能找到最好的那一张。AI编程也是如此：

• 不要死磕一个方案
• 善用Cursor的Checkout功能回到之前的节点
• 尝试不同的提示词重新生成解决方案

要使用好横向生成，你只需要用好Cursor Checkout或者直接点击前面某一轮输入框，他就会回溯到那一轮，然后你再重新生成。

当然除了Cursor Checkout，你最好配合好本地的Git版本控制，关于这两者，其实里面有许多坑，我后续会在合集里写一篇文章，专门介绍Cursor Checkout和本地Git版本控制。

要像跑文生图一样，跑AI编程，那么版本控制是必不可少的。

2、使用是主性自发性的提示词（就是上面提到的效率提示词类型）去让它执行更多的步骤，配合cursor agent。

就像带实习生一样，与其事无巨细地安排，不如给个大方向让他自己思考。

这种情况适用于你自己从0到1开发一个项目，因为有的情况是你在改一些大型项目，你不需要他这个想的太多。

3、你在使用compose的时候，如果新建了一个窗口，他可能丢失上下文信息，然后创建一些平行目录，为了避免这种情况，你需要引用文件。

为了防止这种情况，你最好是如我以前一篇文章所提到的，即便是Agent这种自动的上下文管理模式你也应该去引用你想让他修改的文件。

文章链接：

agent不引用一些文件表现的性能相比引用文件的性能会差很多。

所以为了灵活性，和效果，实际上你是需要懂一点代码的，你是需要知道他前面那些轮速创建了哪些文件夹、改了哪些。

但是这一点基本上也非常简单，在一轮迭代中，基本那几个需要修改的文件，放好之后基本就是那几个了。新建窗口的话在上一个窗口中，记得把这些文件添加上去。

cursorrules、cursorignore文件

这个对于cursor来说也比较重要，开发这个网站所用到的多个可选择的cursorrules文件，放在合集群聊里。

4、基本上我们给Cursor 任何API文档他就可以写。不管Supabase、Flux、GLM-4V-Flash、还是其他什么，他都可以写。前后端分离也是通过让他生成后端api文档和然后提供给前端这样弄的。

5、善用“第三方智能体”

如我们最开始所讲到的，每个AI都有自己的“专长”，互相配合往往能擦出意想不到的火花。

比如用cursor chat给你准备下一阶段开发需求提示词：

左右滑动查看

6、版本控制是救命稻草

大胆尝试提示词，重要节点一定要commit，新方案前记得开新分支

AI 编程Git版本控制不是可选项，是必需品

7. 保持学习的心态

说实话，虽然现在AI很强大，但它不是万能的。我始终觉得，最好的状态是：

- 用AI提高效率

- 但不完全依赖AI

- 在使用过程中持续学习

有趣的是，我发现自己在用AI编程的过程中，对编程的理解反而更深了。就像有了一个会解释代码的“老师”。

当然，本网站开发是跑AI Saas流程的，实践分享。肯定不是生产订阅的。

这只是一个模子，甚至只是一个模子碎片，我更像是在利用版本控制去做实验，主要是做实验的目的、验证一些东西。

剩下的就是时间，看后面是迭代需求还是实验需求为主了。

网站服务模块后续的功能的提示词

1、存储功能

使用 IndexedDB 存储聊天记录或图片，没有使用Supabase 存储桶 (bucket)

存储功能示例：

2、订阅支付功能

也就是国外用Stripe，国内用微信或者第三方集成平台如易支付等，让AI集成到现有的订阅面板即可，这种提示词不会写？你和AI聊几轮就可以了。

左右滑动查看

我感觉凡是先实践，先把框架做了，先完成简单的，把所有的实践一个一个走，发布出来，费尔曼学习法，后续只是时间和迭代的事情。有了AI，这一切并没有那么难。主要看你，对这个东西是什么态度需不需要迭代。

在他们的一系列分享中，网友热议的亮点包括但不限于：

合集群聊

当然这个和我们合集第一期文章中说的一样，有兴趣订阅、充电频道。

提示词、知识库：

效率工具，如有一期文章是介绍一个标签管理工具的。

本期的 AI saas网站提示词、cursorrules提示词等等。

AI播客、这个Saas服务源码。

有疑问的可以合集群里问。

#合集群聊入口：

如果解锁合集但二维码过期，可在公众号后台加微信。

当然这里介绍一下本文用到视觉模型：

GLM-4V-Flash 是 智谱开放平台（bigmodel.cn）新上线的视觉理解模型，可以理解图片中的语义并做出对应合理的文字输出。

基础能力：图像描述生成、图像分类、视觉推理、视觉问答、图像情感分析等。

模型优势：免费、好用的多模态理解（图片），默认200高并发（企业级并发）。

这是继智谱 GLM-4-Flash 之后第二个免费开放接口的大模型，也是第一个免费开放的多模态模型。多模态模型免费后，应用场景将提升一个维度，大模型对社会的影响将会大幅提升。

获取免费GLM-4v-flash模型API点击下方阅读原文即可，前文所述相关资料公众号后台回复”glm“即可。

🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握AIGC时代的个人力量）。