逑美(皮肤健康咨询)
89.22M · 2025-09-29
随着AI编程辅助工具的快速发展，Cursor等工具已经具备了成熟的代码生成、智能补全和错误纠正能力。在此背景下，为有效提升研发效率、保障项目按期交付，同时深入探索AI技术在开发流程中的应用价值，我们决定在会员系统开发中引入Cursor作为辅助开发工具，通过实践验证AI编程对项目实施的提质增效作用。
会员业务作为公司战略重点，涉及大量前端页面开发工作。由于业务推广时效要求高，研发周期被大幅压缩，传统开发模式面临严峻的交付挑战，亟需通过技术手段突破效率瓶颈。
通过系统化应用Cursor进行AI辅助编程，前端开发团队整体工作效率提升达21%。原本预估需要188工时的FE开发任务，实际仅消耗149工时即完成交付。
在实践过程中，团队通过持续探索和经验积累，总结出一套体系化的Cursor使用方法和最佳实践，为后续AI辅助开发提供了宝贵经验参考。
在项目初始化阶段，通常需要根据原型图手动创建路由文件并逐个配置路由结构，尤其涉及英文命名时，往往需要反复查询和推敲，不仅效率低下，也容易产生不一致的命名风格。在项目开始初始化的时候，我看着空白的项目目录陷入沉思..对于这种重复性高且技术含量不高的事情，能不能让AI帮我们生成呢？于是我们尝试引入 Cursor 辅助生成路由，并实现了以下效果：
开发效率提升60%，路由结构自动生成准确率达80%
自动创建目录与路由文件，生成符合语义的组件英文名称
每个页面组件内置标准 React 初始化代码，减少重复劳动
形成风格统一、易于维护的项目结构
上传以下材料：
提出需求描述示例：
“根据所提供的原型图，生成符合页面层级的路由目录结构和页面组件文件。要求组件命名语义清晰、与原型图功能对应，并自动生成基础 React 代码。”
使用后主要带来三方面提升：
自动生成组件与路由配置：根据原型图自动创建路由文件与组件，减少手动命名的纠结和操作时间；
内置 React 标准模板：每个组件已包含基础代码结构，开发人员可直接进入业务逻辑开发；
统一项目规范：确保新项目结构清晰、风格一致，降低后续维护成本。
基于UI自动生成DOM结构，是前端领域常见的AI应用方式之一。以往我通常使用Cursor完成这一流程：截取UI图片后，直接请求AI“帮我生成页面”，生成的代码示例往往如下：
然而，这种方式存在以下几类明显问题：
为解决上述问题，我总结出一套高效的上下文构造模板，具体包括上传以下材料：
该页面对应的初始组件代码
mock数据结构（与UI内容完全一致）
| 内容 | UI描述 | 交互说明 | 代码规范 |
|---|---|---|---|
| “当前共xx字” | 靠左排列，字体样式为：font-family: PingFang SC; font-weight: 400; font-size: 24px; color: #111111; line-height: 24px;其中“2025年”需使用 zz-ui 的选择器组件，字体样式为…（具体样式说明） | 点击右侧，为选择器组件交互 | 写在页面主文件中即可 |
| 列表结构 | 标题(例如本月等级分）字体样式为xxxx，其下方8px处为等级分发放时间(4月1日-4月30日)，字体样式为xxxx，靠左排列；右侧内容为当月等级分总数值，字体样式为xxxx，右侧4px处为箭头，图片宽高为xxxxxx，链接为xxxxx | 1. 以“x月等级分”为一级标题，点击右侧可展开/收起； - 2.展开后显示二级子项列表。 | 请将该列表抽离为独立组件。 |
| 二级列表结构 | "消费(已退款)"字体样式为xxx，“等级分发放时间”字体样式为xxx，两者之间间距为8px，靠左展示。右侧内容上方为等级分数值，字体样式...，下方8px处为时间，字体样式为xxxxx | 无 | 无 |
在实际描述中，可口头描述即可，AI可自动识别，例如：
（以模块为粒度，依次描述UI、交互说明、代码规范即可）
该方法带来以下显著改进：
实现 100% 设计还原：生成代码与UI设计图几乎完全一致，极大提升视觉准确性。
组件化结构提升可维护性：AI合理抽离组件，结构清晰，便于后续扩展与维护。
数据‐视图分离明确：数据结构抽离至 script 中，DOM 使用正确的接口字段名，接入真实接口时只需替换数据逻辑。
高效完成UI微调：仅需按标注（红色部分）做局部样式调整，避免逐行修改间距、字体等低效操作。
内置交互逻辑：已自动生成如展开/收起等交互行为，无需额外开发。
最终，原计划10小时的开发任务，实际仅耗时2小时完成。
通过上传UI设计图并结合接口文件，我们实现了开发效率平均提升41%，输出准确度达到74%。该方法特别适用于结构相对简单的页面（如权益中心、等级明细等），不推荐用于强交互复杂场景。在已实施的六次实践中，在等级分明细页面效果达到最优。
在典型的互联网开发流程中，通常包括需求评审、技术方案与接口评审、开发、联调等环节。在这个过程中，联调前通常需要前端开发去手动构造mock数据，以便开发；尤其当接口结构复杂或属新项目接口较多时，往往非常耗时。
虽然现有API工具可以生成随机数据，但通常无法贴合UI内容，影响开发体验。理想情况是生成与UI图完全匹配的mock数据，以便后续进行UI Diff和走查。此外，手工编写接口对应的TypeScript类型也较为繁琐。基于这些痛点，我们决定引入AI mcp去生成mock数据。
上传以下材料：
UI设计图
mock数据目录结构
提出需求描述示例：
“这是该页面的接口文档链接：zapi.zhuanspirit.com/project/108…
请生成一套与UI内容完全匹配的mock数据，并据此自动生成TypeScript类型定义。”
利用AI生成mock数据，不仅大幅降低了构造模拟数据的时间成本，也显著提升了UI还原度和类型定义的准确性。这一方法尤其适合中后台系统、数据表格等重复型界面开发，为后续集成真实接口和UI验收奠定了高效基础。
会员落地页是本次需求中最为复杂的页面之一，涵盖动态效果、多种滑动交互与多层页面结构。在大型项目或复杂页面中，核心问题往往并非开发实现，而是后续维护。在开发初期，我便意识到该页面结构复杂、逻辑耦合度高，绝非易于维护的对象。因此，我为自己设定了一个明确的底线：该页面的主组件文件不得超过800行代码。
在开发过程中，每当主组件代码量接近该阈值，我便着手进行拆分与优化。然而，频繁的人工重构开始影响项目进度。于是我开始思考：能否在不改变功能的前提下，借助AI辅助完成代码优化？
基于与AI的多次交流，其已对会员落地页的业务与代码有一定理解。在此基础上，我向AI提出如下优化要求：
上传以下材料：当前tab所在组件的代码
具体描述：请帮我优化代码，具体如下
将功能独立的UI单元拆分为子组件；
DOM结构中应尽量引用组件，减少直接冗杂结构；
对JavaScript逻辑进行梳理，将独立业务逻辑封装为Hook，以提高可维护性；
保持代码可读性，避免过度封装。
通过多次迭代拆分与AI辅助重构，最终实现了如下结构：
utils 目录；components 目录；sub-components 中；composables 中的自定义Hook。最终，在保留全部交互功能与视觉效果的前提下，主文件 MembershipHome 的代码行数成功控制在800行以内，极大提升了后续维护性与可读性。
项目结构示意如下：
MembershipHome（主入口文件）
utils（存放工具函数）
composables（存放数据逻辑相关的自定义Hook）
components（一级组件目录）
sub-components（二级组件目录，存放大型一级组件中的子组件）
页面主DOM结构与样式调整完了，现在需要用接口替换Mock数据。需要写调用接口与接口数据承接逻辑。
考虑到其他页面中已经写过一次调用接口逻辑了，所以我并没有给很多上下文。
描述：
请帮我生成接口请求逻辑，使用zzfetch，请注意边界情况的判断，当进入页面的时候和切换选择器的时候，都请求一次接口，初始化的时候参数为今年的年份，切换选择器的时候为选择的年份
提效0% ，准确度50%。
为什么准确度50%但是提效却是0%呢？
我们都知道，调用接口的逻辑本身开发量并不大，且AI帮我调用接口完成之后，并不知道我接口返回的数据，所以做了很多边界判断，并且擅自对我接口的返回数据进行了一系列过度的边界判断与数据处理。导致我review代码时间比较多，甚至超过我自己开发接口的时间。
小程序中的webview页面里，发现无法正常自动播放动画视频。考虑到小程序的静态资源权限问题，已经在小程序后台配置相关静态资源域名。且已经将视频静音，但仍无法自动播放。所以想让AI帮我分析排查下相关问题。
AI优化接口请求与动效生成，效果有限，需审慎应用。
描述：目前我的视频动画无法在小程序中自动播放，在app的webview中能自动播放，请帮我排查问题并且修复
效果：提效0%，准确度50%。
原因：对于一些复杂动效，写完代码后由于逻辑非常复杂，阅读成本较大，且ai也不清楚到底哪种方案能用，就都给列举上了。需要大量时间去review代码，且最后发现没有一种方式可以用，逻辑错误，不符合要求。
举个例子，如下图：
上下文背景:UI图，zz-ui(公司内前端组件库)的组件。
描述：这是我的UI图，请帮我修改样式去达到UI图上的情况。
结论：公司内部zz-ui组件调用简易，AI生成框架有效，但样式调整需人工介入。
原因：对于公司内封装的业务组件，对于一些样式，必须要使用透传样式的方式去修改业务组件，而AI又不知道组件库内的组件的class具体类名，对于这种情况，不能用AI去做，准确度几乎为0。
举个例子如下：
我要改选中态底部的选中表示，将红杠换成倒白色三角，这就需要找到组件内的z-tab--active class类，设置background为白色三角的图片。但是AI并不知道选中态的类为z-tab--active，没有对应的上下文，对这种场景，AI修改对应样式就属于完全不可用状态。需要我们使用透传的方式，在业务代码中区修改样式。
UI图效果：
zz-ui组件当前效果：
人工书写最终写法：
通过系统化引入 Cursor 作为AI辅助编程工具，我们在会员系统前端开发中取得了显著成效，整体工作效率提升达21%，验证了AI技术在实际业务场景中提质增效的潜力。在多个典型实践场景中，AI展现出在生成页面路由、构建DOM结构、生成Mock数据与类型、优化代码结构等方面的突出能力，大幅降低了重复性、规范化工作的开发成本，同时有效保障了项目代码风格的一致性和可维护性。
然而，实践也表明，AI并非万能。在涉及复杂交互逻辑、动效实现、深度定制组件样式、接口联调与边界处理等强上下文关联或高业务耦合的任务中，AI生成结果仍存在准确率低、逻辑冗余甚至错误的问题，其输出需经过严格的人工审查与修正，甚至在某些场景下人工实现效率更高。
因此，我们认为：AI适合作为“高级代码助手”，而非“替代开发者”的工具。其真正价值在于释放开发者对重复性、低创造性工作的投入，使其更专注于架构设计、复杂逻辑与用户体验优化等高层级任务。如何用好AI类辅助编程工具，其实总结来看，也就归功于一个词---prompt。
随着生成式AI持续渗透至研发流程，我们正站在一场软件开发范式变革的起点。AI编程不再是遥远的概念，而已成为提升效能、加速创新、重构工作流的核心推动力。作为技术人员和团队，能否主动拥抱并善用这一工具，将直接决定我们在未来行业中的竞争力和话语权。
在我们看来，AI时代的关键不仅在于“如何使用工具”，更在于“如何重构认知与流程”。以下几个方面值得深入思考与实践：
人机协同的开发新模式将成为主流 单纯编码实现的重要性逐渐下降，而架构判断、提示词设计、逻辑校验、系统优化等能力变得愈发关键。开发者需逐渐转型为“AI调度者”，善于将业务问题转化为机器可理解、可执行的指令，并对输出结果进行高效审查与迭代。
上下文构建与知识沉淀成为团队核心资产 AI生成质量极度依赖上下文。建立规范化的需求描述、接口文档、组件示例、设计标注等输入标准，将显著提升AI辅助的准确率。团队应系统性建设高质量上下文知识库，形成可复用的AI协同工作流。
适应强AI辅助的研发流程重构 从需求拆分、任务分配、代码审查到质量保障，传统研发流程需针对AI特性进行优化。例如：更强调任务描述的清晰性、设立AI生成代码的审查 checklist、建立“AI-first”的组件抽象和接口设计规范等。
以AI为杠杆，聚焦更高价值创新 当基础代码实现效率大幅提升，团队应更多投入在用户体验、性能优化、业务创新等具有不可替代性的领域。AI不应仅仅用来“做更快的事”，更应助力我们“做更有价值的事”。
> 转转研发中心及业界小伙伴们的技术学习交流平台，定期分享一线的实战经验及业界前沿的技术话题。
> 关注公众号「转转技术」（综合性）、「大转转FE」（专注于FE）、「转转QA」（专注于QA），更多干货实践，欢迎交流分享~
