注：可能有点标题党了（

开发新系统的时候，公司要求业务需求优先级高于新系统。

所以新系统虽然开发了一年多，但实际有效开发时间很少。

上五休二全力开发，预估仅需三个月。

前言

在昨天我终于完成了公司后台的完全重写，就差测试完成上线部署替换。

这是我人生中最勇敢的一次决定，我终于完成它了！

具体的过程就不写了，很长而且也很枯燥，所谓的困难、坎坷都将融入我的大脑，成为我技术中的重要组成部分。

在开发后半段，我对于AI的掌握和使用也愈发精进，在开发期间节省了许多的工作量，所以本文会简单介绍一下系统的重写概况，并分享AI的使用经验（尤其是提示词）

重写概述

被重写的系统情况

技术栈：Angular11+Angular-Material+FuseAnimation+DevUI+NG-ZORRO+若干功能库（例如ngx-markdown、Quill.js）

被重写原因：

1.老板找不到商业闭源组件库FuseAnimation的购买凭证了，FuseAnimation库完全依赖于Angular的版本，导致项目所有框架、库都无法升级。

2.刚进入公司的再花技术理解有限，只会实现业务，而不考虑代码复用性、底层架构优化逻辑，导致屎山堆积。

3.因为框架版本限制，塞了各种各样组件库，只为业务服务，但项目性能越来越差。

重写后的系统

技术栈：最新版Angular+NG-ZORRO+若干功能库

重写优势：

1.使用单种更符合公司业务逻辑的组件库，样式交互逻辑更优。

2.完善底层逻辑，提升代码复用性，例如公共弹窗（老系统为了某个单独业务创建的弹窗组件估计有20+个）

3.框架可以随时跟着最新版本更新，性能更强、漏洞更少。

4.还有很多……就不进一步描述了

AI提示词

为什么要使用AI

在重写工作方面，因为新系统的底层逻辑和公共组件搭建非常完善。

大部分功能逻辑相似的页面（例如就一个筛选项+表格+分页器），编写的难度极低。

而AI最适合做这类难度偏低、信息准确、重复枯燥的代码处理

举一些例子：

在老系统中，关于时间段的单个筛选项代码如下：

<mat-form-field appearance="outline" class="purchase_search_long pr-8" fxFlex="33.3">
    <mat-label>下单日期</mat-label>
    <mat-date-range-input [rangePicker]="picker">
        <input matStartDate formControlName="orders_date_purchased_st" placeholder="Start date">
        <input matEndDate formControlName="orders_date_purchased_et" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

而在我编写的新系统中，单个筛选项代码则是：

<mic-picker formControlName="orders_date_purchased" label="下单日期" [nzAllowClear]="false"></mic-picker>

代码精简了许多并且也非常好理解。

以上是组件的调用方式，再举一个因为Angular框架升级导致的写法差异：

在Angular的html中实现if的方式，在17版本之前是通过*ngIf实现的

<span *ngIf="selectedColor?.palette">{{selectedColor.palette}}</span>

而在新版本的Angular中，则是使用@if实现的

@if(selectedColor?.palette){
<span>{{selectedColor.palette}}</span>
}

告诉AI这些差异，让AI帮忙生成重写后的效果，比自己写要快很多很多（某些页面的筛选项可能高达三十多个）

AI选择

我目前没有为AI付过一分钱，因为20刀一个月的订阅对我来说太过昂贵。

我绝大部分情况下都是使用ChatGPT

但GPT无法发送太多的代码，这种情况下我会选择Claude

在开发和想象力方面（开发新功能、新样式等创造性工作）我会选择Gemini Pro

非开发情况下（例如搜索一些百科知识）会使用DeepSeek，因为DeepSeek的数据源污染很严重，Angular相关的知识竟然还停留在Angular.js阶段（Angular1版本前），完全无法使用

如何向AI提问并获取想要的结果

重写主要分为三种情况：列表、详情、测试。

先说前两种。

因为我们公司的后台系统，绝大部分都是筛选项+表格数据的设计，部分带有操作按钮，进行数据处理或跳转详情页面实现复杂功能，所以我专门编写了两套提示词来分别处理列表和详情两种页面。

在开发方面，AI对我来说最大的影响就是幻觉。

AI总会在信息不确定、未知、有模糊信息的情况下给出完全错误甚至离谱的结果，在代码方面更是如此。

所以我在编写AI提示词的时候，会尽可能的告诉AI，我具体是什么情况，我想做什么，我想要什么结果，尽可能覆盖所有细节。

就以列表为例，我们开始着手编写提示词：

首先我们需要让AI知道自己的定位，我想让他帮我开发Angular项目相关的东西，所以他应当是一位Angular开发专家。

因为我的代码可能存在隐患，我也可能存在问题，所以AI不应当完全100%按照我给的信息和想法行事（当然你也可以让它这么做），所以提示词的第一段话就是：

现在你是一位会反复检查的Anagular开发专家，你持怀疑态度，而且你会做研究。我并不总是对的，你也不是，但我们都力求准确。

这句话是我之前在小红书刷到的帖子而得的灵感，并非我完全原创，实际证明，加上这句话之后AI提供的答案确实会更准确

接下来我们需要告诉AI，我具体是什么情况，我想做什么，越详细越好。

我现在有一个老系统的页面需要写在新系统里，我需要你根据我提供的新系统另一个页面和旧系统需要重构的代码。

但这里不仅仅是重写，即使我给了两段老系统和新系统的代码，我也无法保证AI可以完全按照我想要的细节进行编写，例如：

新老系统使用的调用接口方法是一样的，但是typescript的函数名不一样，大体布局需要按照老系统的设计来，但具体的细节需要按照新系统来……诸如此类繁杂不确定的细节，于是我会添加一句说明：

按照旧系统的逻辑、调用函数，参考新系统的样式、逻辑实现方法写一个新系统的页面，具体写法应当完全按照新系统编写，只是表格具体的字段、整体布局、调用的函数名要参考老系统的。

接下来就是我想要什么结果，是关于技术、代码方面的，这时候我会告诉AI技术方面的更多信息：

其中新系统使用的angular20+ng-zorro，旧系统使用的是angular11+ng-zorro+angular material

开始具体代码细节的说明，因为每个页面分为html+ts两部分，所以需要分开编写：

html部分
1.表头固定为nz-page-header，你只需要修改nzTitle部分，其他则保持一致。
2.数据筛选部分，样式完全按照新系统的代码编写，而具体的字段、下拉框则参考老系统。
……

ts部分
1.具体的字段声明方式请完全按照新系统编写
2.列表页面调用函数传参，如果是get，固定使用this.general.getQueryStringFromFormGroup(this.searchForm)，如果是post固定使用this.general.postQueryStringFromFormGroup(this.searchForm)，这是我提前写好的公共函数。
……

最后，AI不仅仅是自己生成就可以了，它需要再检查一遍，在这一部分我会把我更多的要求（以及未来更多缺失的要求）填写在这里：

完成的新页面代码需要能够满足以下所有的问题检查机制：
1.新页面是否完整移植了所需要展示的所有数据、字段、以及按钮？
2.从上至下，新页面的样式展示是否符合老页面的样式设计（组件使用优先以新页面为主）
……

加入补充条件，以及对方需要返回什么：

注意，你返回的代码中不需要有任何注释，你最终需要返回我完整的html和ts代码。
以下是完整的四段代码，按照顺序分别为：参考用新系统页面html，参考用新系统页面ts，老系统页面html，老系统页面ts。

有时候会遇到代码太多无法一次性发送的情况，所以加上备注：

如果你只收到了一个页面的两段代码，那是因为单次消息无法发送过多的代码，那我会先将老系统页面html，老系统页面ts发给你，然后你可以回复“接下来请发送新系统页面的html和新系统页面的ts”，我就会将剩下的两段代码发给你。

这样，一篇关于列表方面的AI提示词就写好了，并且可以随着后续的开发不断补足，有哪个点没对，就继续添加，直到AI能够完整的返回你需要的结果。

以下是列表的完整AI提示词，以供参考：

现在你是一位会反复检查的Anagular开发专家，你持怀疑态度，而且你会做研究。我并不总是对的，你也不是，但我们都力求准确。
我现在有一个老系统的页面需要写在新系统里，我需要你根据我提供的新系统另一个页面和旧系统需要重构的代码，按照旧系统的逻辑、调用函数，参考新系统的样式、逻辑实现方法写一个新系统的页面，具体写法应当完全按照新系统编写，只是表格具体的字段、整体布局、调用的函数名要参考老系统的。
其中新系统使用的angular20+ng-zorro，旧系统使用的是angular11+ng-zorro+angular material
具体可以参考以下规则：
html部分
1.表头固定为nz-page-header，你只需要修改nzTitle部分，其他则保持一致。
2.数据筛选部分，样式完全按照新系统的代码编写，而具体的字段、下拉框则参考老系统。
3.其中我提前写好的筛选组件，输入框使用mic-input，下拉框使用mic-select，日期范围选择为mic-picker，日期选择为mic-date
4.表格样式完全按照新系统，具体的表头、字段则参考老系统，每页固定展示30条数据。
5.除非有额外需求，否则分页器一律使用mic-page。
6.所有图片都应当使用nz-image，如果源代码没有设置宽度，则默认[width]="50"
7.所有的接口提示消息，都用这句代码实现：this.confSvc.handleTip(res['msg']);
8.不要使用任何*ngif，*ngfor，*ngswitch用法，如果有，转换为@if、@for、@switch
ts部分
1.具体的字段声明方式请完全按照新系统编写
2.列表页面调用函数传参，如果是get，固定使用this.general.getQueryStringFromFormGroup(this.searchForm)，如果是post固定使用this.general.postQueryStringFromFormGroup(this.searchForm)，这是我提前写好的公共函数。
3.其余功能函数实现，写法请严格按照新系统，但具体调用函数、传参等功能逻辑参考老系统。
完成的新页面代码需要能够满足以下所有的问题检查机制：
1.新页面是否完整移植了所需要展示的所有数据、字段、以及按钮？
2.从上至下，新页面的样式展示是否符合老页面的样式设计（组件使用优先以新页面为主）
3.新页面是否使用了正确的组件，例如input框、input数字、日期选择、下拉框。
4.新页面是否完整移植了所有的@if逻辑？例如按钮的显示、组件的disabled，各个元素的显示隐藏逻辑
5.新页面是否完整移植了所有的交互逻辑？例如ngmodelchange
6.新页面调用的函数名（通常是 某个service服务中的某个函数名）是否相同（或含义相同）
注意，你返回的代码中不需要有任何注释，你最终需要返回我完整的html和ts代码。
以下是完整的四段代码，按照顺序分别为：参考用新系统页面html，参考用新系统页面ts，老系统页面html，老系统页面ts。
如果你只收到了一个页面的两段代码，那是因为单次消息无法发送过多的代码，那我会先将老系统页面html，老系统页面ts发给你，然后你可以回复“接下来请发送新系统页面的html和新系统页面的ts”，我就会将剩下的两段代码发给你。

详情方面其实和列表差不多，只不过具体写法、样式不同，就不再一步步分解，直接给出全文：

现在你是一位会反复检查的Anagular开发专家，你持怀疑态度，而且你会做研究。我并不总是对的，你也不是，但我们都力求准确。
我现在有一个老系统的页面需要写在新系统里，我需要你根据我提供的新系统另一个页面和旧系统需要重构的代码，按照旧系统的逻辑、调用函数，参考新系统的样式、逻辑实现方法写一个新系统的页面，具体写法应当完全按照新系统编写，只是表格具体的字段、整体布局、调用的函数名要参考老系统的。
其中新系统使用的angular20+ng-zorro，旧系统使用的是angular11+ng-zorro+angular material
具体可以参考以下规则：
html部分
1.表头固定为nz-page-header，你只需要修改nzTitle部分，其他则保持一致。
2.关于本页面的信息部分，使用nz-descriptions进行展示，列数固定为4，nz-descriptions外面还有一层<nz-spin [nzSpinning]="loading">
3.所有的只读信息均使用例如{{ Data.status_cn}}，所有有输入信息需求的部分，使用ng-zorro的组件，例如nz-input,nz-select等等
4.如果有表格，表格样式完全按照新系统，具体的表头、字段则参考老系统。
5.不要使用任何*ngif，*ngfor，*ngswitch用法，如果有，转换为@if、@for、@switch
ts部分
1.具体的字段声明方式请完全按照新系统编写
2.存放详情各类字段和数据一定使用Data，并且Data的声明一定是最简单的Data: any = {};。
3.其余功能函数实现，写法请严格按照新系统，但具体调用函数、传参等功能逻辑参考老系统。
4.如果有值得优化的地方，请在确保不会影响功能的情况下可以对代码进行一定优化和简洁
完成的新页面代码需要能够满足以下所有的问题检查机制：
1.新页面是否完整移植了所需要展示的所有数据、字段、以及按钮？
2.从上至下，新页面的样式展示是否符合老页面的样式设计（组件使用优先以新页面为主）
3.新页面是否使用了正确的组件，例如input框、input数字、日期选择、下拉框。
4.新页面是否完整移植了所有的@if逻辑？例如按钮的显示、组件的disabled，各个元素的显示隐藏逻辑
5.新页面是否完整移植了所有的交互逻辑？例如ngmodelchange
6.新页面调用的函数名（通常是 某个service服务中的某个函数名）是否相同（或含义相同）
注意，你返回的代码中不需要有任何注释，你最终需要返回我完整的html和ts代码。
以下是完整的四段代码，按照顺序分别为：参考用新系统页面html，参考用新系统页面ts，老系统页面html，老系统页面ts。
如果你只收到了一个页面的两段代码，那是因为单次消息无法发送过多的代码，那我会先将参考新系统页面的html代码和ts代码发给你，然后你可以回复“接下来请发送老系统页面的html和ts”，我就会将剩下的两段代码发给你。

测试的提示词会更简单，像上面两段提示词一样，告诉对方需要检查的部分（你额外注意的）。

但你无法保证你所列出的点可以覆盖可能出现的BUG，所以你还需要让AI自己检查。

7.另外我没有提到的部分，老页面有但新页面缺失了，你也需要告诉我。

AI在告诉你问题的时候，可能会给出你解决方案，这就会导致AI回复的信息过多，有些错误就不会告诉你，所以它应该只告诉我问题，我自己来判断哪些问题需要修改（有些可能并不是问题，只是AI觉得是问题）

你需要反复并完善的检查两个页面，并列出新页面缺失、错误、遗漏的所有点，但你不需要告诉我如何修改，只需要告诉我具体有哪些即可，我会在下一段对话中选择你提出来的某些点，那个时候你再告诉我选择的点如何修改。

前面我说过，AI是有幻觉的，两篇非常完美的代码，它依旧能强行指出你的问题，所以你需要补充一句，没有问题就是没有问题：

如果真的没有遗漏，那你就告诉我移植的很完美，不需要做修改。同样你也不需要告诉我哪些是已经做对的部分，我只想知道需要修改和完善的部分，如果没有，那就没有。

PS：后来我发现AI会对我的重写进行评分、评价之类的，莫名其妙并且毫无意义，所以我在最后又添加了一句：

最后你不需要对我的行为做出任何评价和评分，只需要提供我所需要的。

AI重写过程分享

提示词写完了，总该需要一些具体的实战记录吧？

所以我分享了最后和AI的一次聊天，用于写完系统剩下的最后几个页面所创建的。

你可以在聊天中看到，我用很完善的提示词第一次发送代码之后，后面甚至都不需要再次发送提示词，发送代码就可以生成我需要的代码，如果有问题我补充即可。

注：代码没有隐私泄露的风险，可放心观看，地址：Angular页面迁移

尾声

AI刚出现的时候我是非常惶恐的，但后续我发现作为一个普通的不能再普通的小卡拉米，时代的洪流中挣扎是毫无意义的行为，学习并拥抱最新的技术才是正确的。

不过总算也是一个人独立完成了一个大型项目从0到1的过程，还是很开心的，而且不说骄傲是不可能的，我真行！

后续除了在公司给自己找事儿做，会分更多精力在博客和AI工具（例如CodeX和Cursor）研究上，我已经在计划编写花墨3.0了。