🍹 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来做的，把整个过程分成三步：
-
先生成基础页面结构
-
再加入登录注册功能
-
最后做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。
如果你没有做好这一步你可以看这篇文章：
[Bolt + Supabase：1分钟实现APP的登陆功能、连接数据库（Bolt、Cursor、BaaS、AI全栈）
2024-11-19
这链接里面也有流程：
https://z0kdt9b641u.feishu.cn/wiki/TWy2wm1dtiOSnDk9Wj1clBNAnAf?from=from\_copylink
3. 网站的AI 服务仪表盘（接入together ai免费的flux模型API）
这是三合一提示词的最后一部分，flux模型API调用方式。用于登录后实现AI生图服务。
好了，我们三合一的提示词就写完了，上面的视频已经演示了效果。
AI生图模块先到这里，我们开始第二个模块，AI视觉问答模块。
说完了AI绘画，我们来做点更有意思的 - 让网站能“看懂”图片。
还记得我们用的GLM-4v-flash模型吗？它不只是能聊天，还能分析图片。
实现这个功能其实特别简单。我只需要把智 谱AI的API文档给Cursor看，然后告诉它：“帮我做一个能上传图片并分析的页面。”
公众号后台回复：glm
这里是演示视频：
到这一步还没有流式传输、图片上传等等，但是已经可以生成一个基于GLM-4V-Flash的视觉分析工具了。
其实要实现什么功能，你只需要告诉AI，然后让他去实现就可以了。
那么我们接下来开始Copycoder 模块，后面还有一个界面优化的章节，对上述的模块进行优化。
接下来这个功能更有意思了，这个AI工具我们在以前的一篇文章中有提到，它是用来生成Cursor、Bolt、V0提示词的工具，用于给我们快速复刻一个网站：
[Copycoder：这个工具和 Cursor、Bolt、V0 配合太棒了！提供更好的前端开发提示词（AI导航网站生成）
2024-12-02
我们也简单模仿一下它，工作原理很简单：
- 上传一个网页截图
- GLM-4v-flash模型分析图片
- 自动生成Cursor/Bolt可以用的提示词
我们现在用图片里的这一条提示词就可以完成Copycoder里的基本功能了：
如下图：
界面不太美观，我们继续用下面提示词迭代（这个提示词是其中一部分，其他部分在下面：界面优化 - 星空主题）：
这里是界面优化后的演示视频：
这个服务生成的提示词效果目前就是这样，主要先搭个模子吧。 这里是源码的后端的=提示词（预览）：
说实话，做完基础功能后，我觉得界面还是太普通了。作为一个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的技巧，我感觉这些技巧也是要不断实践更新的，所以这一篇有这些技巧：
[我花了72小时研究Cursor Agents，以下是必须分享的硬核干货！
2024-12-10
[Cursor从入门到精通：不可错过的七大技巧分享，Agent、Cursorrules（详细教程）
2024-12-01
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这种自动的上下文管理模式你也应该去引用你想让他修改的文件。
文章链接：
[我花了72小时研究Cursor Agents，以下是必须分享的硬核干货！
2024-12-10
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服务源码。 有疑问的可以合集群里问。
#合集群聊入口：
[WindSurf+Bolt+Cursor+Sealos：构建AI播客应用程序，前后端分离、对象存储、数据库存储、部署、K8S
2024-11-28
如果解锁合集但二维码过期，可在公众号后台加微信。 当然这里介绍一下本文用到视觉模型： GLM-4V-Flash 是 智谱开放平台（bigmodel.cn）新上线的视觉理解模型，可以理解图片中的语义并做出对应合理的文字输出。
基础能力：图像描述生成、图像分类、视觉推理、视觉问答、图像情感分析等。 模型优势：免费、好用的多模态理解（图片），默认200高并发（企业级并发）。
这是 继智谱 GLM-4-Flash 之后第二个免费开放接口的大模型，也是第一个免费开放的多模态模型。 多模态模型免费后，应用场景将提升一个维度，大模型对社会的影响将会大幅提升。
获取免费 GLM -4v-flash模型API点击下方 阅读原文 即可，前文所述相关资料公众号后台回复” glm “即可。
🌟 知音难求，自我修 炼亦艰， 抓住前沿技术的机遇，与我们一起成为创新的超级个体 （把握AIGC时代的个人力量）。