AI Coding前端实践后的复盘总结

▐  给出目标不清晰明确

• 用户期望:使用与参考页面相同的组件来构建新页面。
• 用户输入: 参照已有页面,对当前页面修改,以保证通知模块样式与参考页面保持一致。

• 用户输入: 参照参考页面,请使用相同包中的相同组件来修改当前页面组件。

• 用户期望: “同步配置”为全局按钮,不应在操作栏展示,而应展示在表头的操作栏。
• 用户输入: 同步配置按钮为全局按钮,与创建按钮放在一起

• 用户输入:数据列表组件a的分页按钮与下方卡片组件出现干涉,请进行修复。
• 用户截图输入: 

• 用户输入:使得当前页面的列表组件中的分页按钮完全放入数据列表框中,不要超出该范围。
• 用户截图输入:

• 用户输入:页面卡片组件无法根据传入的属性,在点击页面卡片时按照要求实现当前页面下子页面的跳转功能。

▐  对于Prompt

1. 高质量的prompt：与对话过程中时，要把将目标完整地、清晰明确地发送给Agent，这样才可以减少不必要的对话次数，提高开发效率。
2. 开发流程规范：虽然作为后端对前端react框架了解甚少，但不能忽略Agent所生成的回复，在遇到不期望的修改时，小问题进行修改调整;大问题一定要及时回滚代码，重新将更明确地目标输入给Agent，以防止生成的非期望代码影响到后续开发，造成难以排查的奇怪问题，影响开发进程。
3. 上下文限制：避免过长的上下文，可能会影响Agent生码的效果，及时新开对话。
4. 人工的干预指导：虽然Agent生码使得后端同学也可以快速开发页面，但可能会出现多次令Agent修改都无法达到预期效果的情况，这时也需要后端同学有最基本地读懂并分析代码的能力，以防止出现“无头苍蝇乱撞”的情况，导致大幅度降低了开发效率。

1. 过度依赖高质量的prompt：在对话过程中，要给出足够准确的信息与目标。
2. 上下文理解有限：受限于上下文限制与RAG功能的能力，Agent没有办法具有全局视角，进而会产生问题，如：组件间或不同对话间修改导致的干涉问题。
3. 截图还原能力有限：由于算法与性能限制，Agent当前还是难以根据截图页面实现接近原始设计的效果，这可能是由于对图片学习过程中的有损压缩以及注意力机制所导致的。
4. 对知识库的强依赖：知识库的缺失导致Agent缺少必要的组件信息，进而导致无法独立通过截图选择所需组件。
5. 代码的可维护性：在本次实践中，在最后代码审查环节，发现Agent生成代码出现了请求重复定义、组件重复定义的情况。此类现象令人警惕——在频繁迭代与多次AI生成、局部修改叠加的过程中，代码库极易积累冗余逻辑，导致结构松散、职责不清。这不仅暴露了当前AI在保持代码一致性与架构规范性方面的局限，也凸显出构建配套治理机制的紧迫性。未来不仅需提升Agent自身生成规范代码的能力，更应推动AI驱动的代码审查体系建设，利用AI自动识别重复代码、检测模块耦合、提示重构建议，形成“AI生成 + AI治理”的闭环，从而保障智能化开发的长期可持续性。