关于我用 Ai 完成了一套系统 99% 代码这件事

最近开源了一套Ai小说生成器系统，说系统可能不太准确因为他只有前端，但是已经足够用了，这套系统 99% 由 Ai 开发，我几乎没动代码（除了调了几个大小间距），全部代码都是用 prompt 编写。

这篇文章我想写一下关于一些使用 cursor 上的经验，你不用担心Ai依然无法代替程序员，人更多的是要为它架构。

Ai 的缺点： 缺乏真正的创造力和对系统级别的理解能力：举个例子 Ai 不可能理解你整个系统都有哪些功能，我说我做个淘宝，那他只能理解成做个购物平台，但无法理解到具体模块，即使agent提前思考规划也无法做到真正的创新跟真实想要的效果实现出来相差甚远。

代码质量存在隐患：还是让他做个淘宝的例子，他做出来东西很多都是错的，跑Ai十分钟调试半个月很正常，所以要让他先搭框架。

依赖高质量prompt：提示词不是写的越细越好，而是要写的精确简单，不要废话过多，不要对 Ai 说一些客气词这些一点用都没有。

废话不多说让我们来看看具体怎么写出一个系统；让 Ai 写系统分两块，一个是系统流程，另一个是效果抽卡。

我们先来看第一个业务流程：

如果让 Ai 写一个系统级的产品，首先使用者自己要对这套系统有一个非常具体的概念，比如你要知道这套系统怎么布局，结构是什么样的，业务流程是什么样的，这个很重要，否则让 Ai 盲写就会写的很烂。

比如我最初让 Ai 写这个小说系统的时候就先告诉它。

你是一位全栈工程师，同时精通产品规划和UI设计。  
我要做一个ai小说写作工具，可以自动生成符合小说写作风格的文章。  
我的设想布局是这样的：左侧是输入框，右侧是生成的文章。左侧输入框可以输入一些关键词，然后点击生成按钮，程序会自动生成符合小说写作风格的文章。右侧显示生成的文章，可以点击复制按钮，将文章复制到剪贴板。  
中间是小说内容编辑区，生成之后可以选择加入编辑区中，进行进一步的编辑。  
最后，我还想加入一些其他功能，比如：  
- 加入模板功能，可以选择不同的模板，生成符合模板风格的文章。  
- 加入语料库功能，可以导入自己的文章，训练模型，生成符合自己的风格的文章。  
- 加入自动摘要功能，可以自动生成文章的摘要。  
- 加入情感分析功能，可以分析文章的情感倾向，给出建议。  
- 加入自动生成封面功能，可以自动生成文章的封面。  
- 加入自动生成目录功能，可以自动生成文章的目录。  
- 加入自动生成插图功能，可以自动生成文章的插图。  
- 加入自动生成字数统计功能，可以统计文章的字数。  
- 加入自动生成阅读时长功能，可以统计文章的阅读时长。  
- 加入自动生成字数推荐功能，可以给出字数建议。  
- 加入自动生成阅读建议功能，可以给出阅读建议。  
- 加入自动生成文章评分功能，可以给出文章的评分。  
- 加入自动生成文章标签功能，可以给出文章的标签。  
- 加入自动生成文章分类功能，可以给出文章的分类。  
使用技术栈 vue3+pinia+pnpm+vite

这段提示词分三块，头部是人设设定，这个东西几乎是固定的复制上就行，下边是我的需求，然后是我对这个产品的大概布局思路，最后是要加入的功能，功能这块我直接让Ai按需求生成的，然后就是抽卡，因为我已经给Ai设定好了布局，剩下的功能让Ai自己往布局里填充，它感觉怎么合理怎么来，这部分我称之为抽卡，这块是让我惊喜最多的，往往Ai生成的布局比我自己写的还好。

生成大概的布局之后我们就是对细节的优化，下边这段提示词是我对系统优化过好多次之后的一个bug修复的提示词，基本思路就是，让他去寻找【文件→模块→功能区域→按钮或编辑框→问题描述】这么描述会给它一个具体的路径让它去寻找具体是哪个地方出了问题，然后加一个问题描述让它知道是出了什么问题。

有两个问题：
1.点击加入编辑区按钮无反应，这可能是刚刚编辑区编辑器变成了wangeditor-next的原因，请为我修复
2.我希望先根据主题（标题、标签、分类、关键词等）生成大纲，然后根据大纲和之前的粗略内容生成文章，左侧区域应该有一个大纲栏目

当前功能bug都修复完成之后我们在继续追加功能，首先告诉它现在的功能已经玩不搞定了，不要再动，然后就是我们追加的新功能点，最下边是告诉它如果新功能关联到老功能的话只在老功能上追加不要改变。

继续完善功能:
现在功能问题已经优化完成不要再修改目前已经完成的功能逻辑，接下来我会继续追加一些功能，比如：
1.接入真实的openai api，实现自动写作功能，使用openai规范，模型列表和代理地址以及key参数可以放入json文件中
2.加入模板功能，可以选择不同的模板，生成符合模板风格的文章
3.加入语料库功能，可以导入自己的文章，训练模型，生成符合自己的风格的文章
4.加入自动摘要功能，可以自动生成文章的摘要
5.完善以上功能，新功能如果需要改动老功能的话只追加不要改变老功能原本的业务逻辑

然后就是 Ai 对整个业务流程可能理解不够到位，抽卡出来的功能可能有你需要的但是业务逻辑有些混乱，这里就要纠正它，我们可以尝试一下两种提示词来纠正业务逻辑让它重绘交互，前者是用纯语言描述业务逻辑，但是这样通常Ai并不能真的理解到，后者是用流程类似画图告诉Ai这样理解的更加深刻一些。

小说管理下边逻辑似乎有些混乱
1.Ai写作应该是点击进去某一个小说编进
2.小说管理可以删掉改成小说列表，点进去编辑小说
3.系统设置貌似只有页面样式，并没有实际功能
4.点击侧边栏收起只有文字收起了，外框没有收起菜单栏
5.头部栏的用户模块可以删掉我们不需要用户模块
6.小说编辑区再重新布局排一下版，现在这样太拥挤了，很多功能模块都挤在一起了，还有一些放在左边菜单栏的就不用放进编辑区了，可以从编辑区删除

小说生成流程
1.小说列表点击创建新小说，输入小说标题→选择小说类型→填写小说简介→选择小说封面→选择小说标签，实际上选择小说类型就可以把标签带出来，小说类型放到首页预设里预设几个类型可以添加正好选择对应类型的提示词
2.创建完成之后点击进入编辑区→Ai生成小说大纲（章节并且章节下生成简章内容）→点击大纲可以选择生成小说正文（小说正文生成之后可以选择部分内容进行改写，Ai扩写，润色等）
3.生成正文可以加入参考和选择不同的场景提示词，还可以选择不同的模板，生成符合模板风格的文章
4.选择章节生成内容在右侧内容区，可以点击内容区的复制按钮或者一键加入编辑器按钮
按照以上流程串联整个系统，完成一个完整的小说写作流程，帮我阅读整个系统的代码并根据系统进行串联一定要每个流程都要打通不要漏掉

对于数据管理因为我用的是纯前端，所以直接告诉 Ai 用 pinia 管理数据用 localstorage 存储数据就可以了，主要是告诉Ai哪些数据需要存储，哪些模块需要引用数据源，然后让Ai设计一个精妙的数据存储结构方便调用。

数据存储方案：
1.使用pinia管理数据
2.使用localstorage存储数据，为我设计一个精妙的数据结构便于本地存储和管理功能的数据，方便其他模块调用

使用的时候：

正文生成提示词数据来源：提示词管理模块里的基础正文分类数据

接口文档，千万不要吧一大堆接口放到一个文件里然后给 Ai，这样失败率非常大，建议两三个接口两三个接口的给，最好一个一个的给，这块比较简单没啥可讲的就是注意少量给然后完成一个测试一下确定可以通就可以，另外现在都是前后端分离的项目了，让Ai前期把数据结构规划好对接口的时候就更容易直接替换数据了。

然后说说对于 Ai 还原设计图，这一块是抽卡最严重的地方，现在没有任何Ai对图片布局可以很好的理解的，所以不要想着让Ai一次性根据设计图还原出来，Ai 只可以识别大概得布局、文字、颜色，然后根据这些信息去猜你想做个什么样的东西， 只能猜个七七八八，越是标准化的布局越容易猜到，越是创意行的布局越难还原，所以没有特殊需求尽量设计的标准化一些这样也好描述。

以上就是我对一个纯前端的系统项目使用 cursor 的一些体验，后端的思路跟前端也差不多，无非是先进行数据结构的设计，然后根据数据结构和技术栈去反推结构生成，等下次我做前后端联调的再具体些后端的吧今天分享先到这里。

放一下我最终生成的这个系统吧，以完全开源，欢迎 star github.com/ponysb/91Wr...