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

本文是对AI Coding在前端研发实践中应用的复盘，系统总结了从工具选型、场景落地到效能评估的全流程经验。文章指出，AI在生成样板代码、单元测试编写及UI组件快速搭建等标准化场景中能显著提升效率，但在复杂业务逻辑理解、状态管理及样式细节把控上仍存在局限，需依赖人工审查与修正。通过实践，团队提炼出“人机协同”的最佳工作流：将AI定位为高效助手而非替代者，强调通过优化提示词（Prompt）、建立前端专属知识库及制定严格的代码审查规范来弥补AI的不足，最终实现研发质量与速度的双重提升，为前端团队规模化引入AI辅助开发提供了可复制的方法论。

引言

随着人工智能技术的迅猛发展，如何使用AI工具来帮助生产实践,已成为当前各行各业智能化升级的核心命题。在软件研发领域，由传统的“人工编码”到如今的“智能生成”，AI Coding 为传统开发流程带来新的可能性，逐步成为提升开发者研发效率的一种有效手段。前端开发作为产品用户体验的核心环节，也迎来了智能化升级的新机遇。

在实际项目中使用AI辅助编程工具，能够提升开发效率、降低重复性劳动。借助智能化代码生成与辅助理解能力，也使得后端开发者能够在不深入掌握前端细节的情况下，高效生成可运行、结构清晰的前端代码，快速完成页面搭建与功能测试。

本文将围绕实践过程中的成果、问题与反思进行全面复盘，旨在总结经验、提炼方法，为后续更高效地使用AI工具辅助开发提供参考与启示。通过对项目全过程的复盘与总结，深入探讨AI如何帮助后端人员高效开发前端应用，为类似场景下的工程实践提供可落地的经验参考。

相关理论基础

在使用AI Coding工具时，我们常常需要通过文字来“告诉”AI我们想要什么代码。这些文字指令，就是所谓的 Prompt（提示词）。你可以把它想象成你和一位聪明但不太懂你心思的助手在对话——你说得越清楚，它就越有可能给出你想要的结果。

虽然AI很强大，但它并不能“读心”。写好Prompt，就像教新同事干活——要耐心、具体、有结构。不需要懂高深的AI原理，只要掌握这些技巧，每个人都能成为AI Coding的高效使用者。这不仅是技术工具的使用，更是一种“人机协作”新能力的培养。而其背后的核心就在于：目标准确、信息全面、拆解引导。

结合本次项目实践的经历可以发现，对于简单页面的开发，只要需求描述清晰，通过少量自然语言对话，AI Agent 就能够高效且便捷地完成所需的页面内容的开发。然而，面对复杂页面开发时，仅靠一次性的指令难以达成理想效果，需要开发中与 Agent 进行多次交互与“磨合”，逐步引导其理解需求、调整实现方式，引导Agent 去解决具体问题。接下来，将针对实践过程中遇到的典型问题进行回顾与总结。

实践中遇到的问题与当时的应对策略

▐  给出目标不清晰明确

通过一个例子,我们可以观察到所描述目标不清晰明确时所产生的问题:

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

由于没有指定Agent使用相同组件，而是使用模糊的“保持一致”的描述,导致生成的代码仅仅是模仿了参考组件的样式，不仅生成的页面样式不够还原，Agent还会去分析参考页面的样式,带来额外的成本,影响效率。

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

Agent成功识别到了用户的期望,使用相同的组件对页面进行了修改。

在另一个例子中，也可以更清晰地看到相同的问题,页面展示如图所示:

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

Agent调整页面后,仅仅新增了“同步配置”的全局按钮，并没有删去操作栏下的“同步配置”,虽然模型满足了用户的输入,却不符合用户的期望。

▐  给到Agent到信息不全面

在开发过程中，出现组件超出样式框，导致两组件互相干涉的情况。

在第一轮对话中，只截取了局部的截图给Agent，令其修改：

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

通过Agent的生成结果以及回复信息可以发现，Agent只修改了数据列表组件的样式，但效果并不尽人意。经过修改，页面效果并没有变化，换页组件依然超过了组件框的范围，用更全的截图去令Agent修改：

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

通过Agent的回复，可以发现Agent不仅调整了对应排行组件的样式，还对其父组件的样式进行了修改，成功将样式调整成功。

▐  不同组件修改的干涉问题

在3.2中问题得到修复后,Agent的修改由引入了新的问题。数据排行组件只是父容器中的一个组件,还包含一个展示折线数据的组件。排行组件的修改影响到了折线组件的展示效果,如下图所示: 

所以在用户输入时,除了提供足够的上下文信息以外,还需要对Agent的修改范围进行约束,否则就可能导致新修改影响到之前调整好的样式,需要额外的修复成本,增加了token的消耗。

▐  知识库缺失而导致的组件引用问题

由于知识库组件的信息的缺失，导致Agent无法找到所需的组件信息并进行使用，无论是在根据截图还是根据组件能力都不能使用所需的组件来构建页面。以下是参考截图：

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

Agent根据用户传入的属性枚举,自定义实现了子页面跳转的基本功能,但样式却不符合要求,经过多轮尝试后,发现Agent由于缺少相关组件库的知识,使用了落后版本的组件库, 部分交互功能未能原生支持，导致需通过自定义实现跳转逻辑。

针对于该类情况,就需要我们去持续迭代并更新相关组件库的知识,来保证Agent可以获取到最新的组件库信息。

AI Coding实践复盘总结

▐  对于Prompt

通过对整个Ai Coding实践的复盘，再一次深刻的体会到了人机协作的潜力与其当前的便捷，为了更高效、便捷的进行开发，接下来我们对本次实践进行复盘并总结，以便于更清楚、更准确地引导Agent，提高开发效率。

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

▐  AI Coding工具当前的局限

进一步地，分析并学习当前Agent生码能力的边界在哪里，能够让我们清楚地认识到当前哪些情况Agent可以实现，哪些情况Agent很难实现，以避免多次无效对话的情况，进而降低效率。

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

总结

通过对本次AI Coding实践进行总结，明白了虽然AI在简单页面开发中效率显著，复杂场景仍需人工引导。未来，AI将深度融入开发流程，成为得力助手。开发者应提升Prompt能力与系统思维，在人机协同中掌握主动，积极探索人机协同的新边界。