今天我试水了一把使用Trae开发网页，灵感来源于读到的一篇公众号文章。文章介绍了利用Trae能够相对轻松地构建一些简单的网页应用。看完之后，我顿时觉得手痒，迫不及待地打开代码编辑器。
首先是考虑要做什么，然后结合目标梳理具体的要求，尽可能把需要的文件格式、界面元素、交互要求、UI风格、拓展功能等一次性描述全面，目前AI策略将任务视为连续过程，因此首轮生成内容至关重要，后续调整均基于此。做后期调整的风险很大，很有可能中途针对某个问题或优化而生成的代码，反而导致网页面目全非。
一、生成初始页面
在Trae中选择目录新建文件，创建新的会话，输入提示词：
“我是一名老师，请帮我写一个完整html网页用来调整学生座位表。座位初识化为7行6列。请制作一个可以拖拽调换位置移动的座位表，让我方便调整，并且将男生女生分别用淡蓝和淡粉色表示，空位显示“空”用灰色表示。需要有保存座位表的功能。我们班一共42人。点击一键导入学生名单，支持excel文件导入， 一键导入学生名单，第一列是序号 第二列是姓名 第三列是性别。有个随机排列座位按钮，点击后支持随机排列座位。有个打印座位表的按钮，可以打印预览成word文档，以便下载。”
一开始追求效率使用的sonnet3.5，中途发现存在很多问题反复出现，如交互没效果、代码没合并、代码被注释、返回结果的错误处理等，切换为3.7，准度高了很多，但有时候需要排队。尽量避免一个问题调用不同大模型，会因为不同模型的风格偏向，导致新的代码问题。
在经历3轮优化后，座位表页面的功能可以稳定使用，随后开始要求AI不改变座位表页面，提供逐个页面的细化需求，让AI生成代码、进行人工测试。这个过程中很有可能会因为表述不清或AI生成代码问题，联动到已完成的页面，所以要做好定期备份，每轮提供的代码最好进行简单走查，如发现标红错误、覆盖健康代码等明显问题，也可提前规避。
二、生成剩余页面
“①增加历史座位表功能。要求点击“保存座位”就将当前的座位表进行保存，并且可以进行命名。可以查看历史座位表。每次调整座位表可以显示该学生在这个座位坐过的次数。②增加学生管理页面，可以新增、删除、修改学生信息，点击学生姓名可以查看该学生坐过的座位。”
每次调试的步子不要迈太大，我的习惯是按照功能-样式-测试功能是否符合要求来逐步调整，先输入要求实现什么功能，再提出样式的美观要求，最后补充一些点击等复杂交互的内容，分别对应的html、css和js，这样AI调试更有针对性，也符合写代码时高内聚低耦合的原则。
还有个问题，AI擅长修改和补充，但很少会做删减。如果功能比较复杂，就会在一次次调试中代码越来越长，最终超过trae的tokens限制，无法继续优化。可以通过拆分html、css和js文件，或定期通过关键词搜到一些无效代码，手动删除。
比如，当我增加了一个稍微复杂的排座位规则选择功能时，就会导致代码行数直接翻倍。除非明确地给出指令，否则AI会一直保留这部分代码，导致无效的tokens浪费算力，降低了整体的开发效率。Trae限制每个文件1,000行代码，这对代码基础薄弱并不打算长期从事编程事业的人来说，创作一个程序耗费最多1天就够了，无论是试错成本还是工具本身的局限性，都决定了较低的时间边际效益。
“随机排列右边增加“规则排列按钮”和规则下拉选项，可选择“男女同桌、男女不同桌、按列轮换、按行轮换”选项。
1、男女同桌就是每2列的性别不同
2、男女不同桌就是每2列的性别相同
3、按列轮换就是每次1列到6列，6到5、5到4,、4到3、3到2、2到1列
4、按行轮换就是每次1行到7行，7到6,、6到5、5到4,、4到3、3到2、2到1行”
总结下来，就是与AI的对话首轮很关键，决定了后面代码的整体走向。之后尽可能聚焦于具体的问题，类似LLM的预训练和微调过程，先确定整体框架，再冻结代码主体，只针对某个细节的相关代码进行针对性调整或丰富。过程中做好测试和代码的简单检查和备份，随时可以回滚，避免越调越离谱。