前端成员 Cursor AI 实战经验分享 ​

汇集团队成员在 AI 辅助开发中的真实体会与宝贵经验，助你高效、理性地拥抱 AI 时代的前端开发。

盘枫翔：AI 开发的优势与挑战 ​

优势 ​

• 开发速度极快：AI 写代码的效率极高，能在短时间内生成大量代码。
• 功能探索便捷：对于不熟悉的功能，可以让 AI 快速给出实现方案，极大提升开发信心。

挑战与注意事项 ​

• 代码控制力下降：
  • AI 作为“同事”或“打手”时，容易出现不可控的代码变动。
• 修改混乱风险：
  • AI 可能会修改本不需要改动的部分，甚至覆盖其他功能。
• 版本管理重要性提升：
  • 建议多用 git 暂存、提交和交互式提交，保持可用版本，便于随时回滚。
  • 在需要时调整提示词，必要时可从头重来。
• 开发时间预估偏差：
  • AI 实现速度快，但调试和整理过程可能耗时较长。
  • AI 更注重“实现”，对架构不会主动优化，易导致项目结构混乱、单文件膨胀。

Electron 开发中的细节 ​

• 应用分层：建议将 app 层与 Vue 层分离，聚焦各自关注点，避免混乱。
• 系统快捷键管理：失去焦点时取消注册，重新获得焦点时再注册，保证体验流畅。

与 AI 一起学习成长 ​

• 学习 AI 的思考路径：AI 的推理和修改过程值得借鉴，能帮助开发者发现实际开发中需关注的问题。
• 扩展知识广度：通过观察 AI 的实现，能学习到 hooks、composables、store 等新模式。
• 主动思考潜在问题：在 AI 改动过程中，思考其可能带来的隐患，深化对代码的理解。

审阅与协作建议 ​

• 多做 Code Review：把 AI 当作高效的“助手”，每次实现都要认真审查。
• 警惕控制力下降：AI 代码无人完全掌控，调试时需花更多时间理解和排查。

复杂问题的提问与拆解 ​

• 分步提问，逐步细化：先 ask，后审阅，再细化方案，让 AI 更好地协助解决复杂问题。
• 记录与方案生成：让 AI 记录实现与实施方案，尤其对大组件开发有显著帮助。

时刻保持主动权 ​

• 警惕 AI 幻觉与遗漏：AI 有时会出现“幻觉”或遗漏，务必多加审查和验证。

吴纪文：Figma MCP 服务实战 ​

深度运用 Figma MCP 服务，有效提升了从设计图到前端开发的效率。

• 对于复杂事件，建议拆解为多个小事件，排好顺序后一次性交给 AI，节省资源消耗。
• 每完成一个功能点并进入新功能时，建议开启新的 AI 对话窗口，避免因 AI 理解错误而误改之前页面。

肖黎明：AI 工具在前端改造与优化中的应用 ​

• 利用 AI 工具纯前端导出 Excel 文件，并美化表格内容，提升可读性。
• 借助 AI 工具将 PC 项目高效改造为移动端项目。
• 用 AI 工具分析项目结构，进行主题样式修改、冗余样式移除、SVG 颜色滤镜处理等。
• AI 工具在小功能、小问题上非常高效，但面对复杂或需求量大时效果有限。
• 熟练使用 AI 工具后，遇到复杂需求时需给出更完整、准确的提示词。
• 多让 AI 主导或协助开发，能极大提升效率，解决以往难以实现或耗时的功能。

张文鑫：截图+标注+提示词的高效开发法 ​

最常用的方式是“截图+图上标注+提示词”组合，大幅提升开发效率。

• 针对个别页面，也会结合 MCP 生成工具辅助开发。

张晓伟：AI 工具的优缺点与使用心得 ​

优点 ​

• 代码能力强，开发效率高
• 上手简单，支持图片/简单提示实现功能
• 考虑全面，边界值把控好
• 能根据个人风格写代码，复用已有组件

缺点 ​

• 准确性有待提升：有时会随意修改不想动的地方，需要多次试错调试。
• 复杂逻辑处理有限：需给出大量精准描述才能实现复杂需求。
• 代码复用性不足：如 AB 两个页面仅参数不同，AI 可能会完全复制一份代码。

使用心得与场景建议 ​

• 给出模板参考，避免 AI 随意发挥
• 小功能点实现极快，尤其适合新知识或无思路时

邱刚锋：Cursor AI使用技巧与模型选择策略 ​

Cursor 对话管理技巧 ​

• 对话中断处理：当 Cursor 回答过程中间容易断或比较长出不来时，开启新对话即可恢复正常。
• 全新问题处理：当不想有关联（一个全新的问题）时，建议开启新的对话窗口。

有设计稿的开发流程 ​

截图或 MCP 转代码策略 ​

• 提示词模板：参考这个设计稿完全实现，新增路由页面，能直接预览。
• API 集成：生成界面的同时把后端写好的 API 接口文档复制给 AI，一起发送
• 联调优化：界面生成的同时联调工作一起实现，自动匹配对应的字段
• 数据匹配：参考这个 API 风格，生成对应的 API 接口数据，入参查询条件 AI 自动匹配
• 响应数据处理：如果接口文档里面没有响应数据，可以把这个响应数据给 AI，AI 自动匹配后渲染出来
• 字段命名规范：只要字段名称尽量用英语或者拼音或者缩写等有规律的字段，AI 就能正常匹配

无设计稿的开发策略 ​

• 原型图参考：如果没有设计稿，只有最基础的原型图，可以让 AI 参考其它页面已经有的样式布局风格来实现具体功能，能保持风格一致
• Excel 需求表：如果既没有设计稿也没有原型图，只有 Excel 需求表，AI 也可以通过 Excel 直接生成功能页面（把 Excel 另存为 htm）

功能模块生成 ​

当从接口文档中复制编辑、详情、删除这三个接口的文本内容提供给 AI 时，AI 会依据这些接口信息生成对应的功能模块。

AI 模仿深度分析 ​

尤其在让 AI 模仿另一个页面时，它并非仅停留在模仿风格与样式层面，还会深度复刻页面的写法逻辑与交互细节。例如，若被模仿的页面中，编辑功能是以弹框形式呈现，且作为一个独立组件存在，那么 AI 生成的编辑功能也会遵循相同的风格，采用弹框设计并作为单独组件开发，同时在代码写法和交互逻辑上与被模仿页面保持一致。

问题排查技巧 ​

如果 AI 生成的功能没有正常效果，大多数情况下是出现了报错。此时建议打开浏览器控制台，将报错信息复制并发送给 AI，AI 通常能够根据报错内容快速定位并修复问题。

模型选择策略 ​

不同模型的特点对比 ​

• Claude 4.0：Claude 4.0 是当前最具创造力和深度思考能力的模型之一，擅长复杂系统规划、架构设计和多层次逻辑推理。它不仅能根据提示词生成高质量代码，还能主动提出优化建议和最佳实践，有时会锦上添花，带来意想不到的创新点。但在某些场景下也可能“画蛇添足”，需要开发者根据实际需求灵活把控。适用于需要全局规划、复杂业务梳理和创新型项目开发。
• Claude 3.5：Claude 3.5 以稳健、守规矩著称，能够严格按照开发者的指令进行代码修改和功能实现，极少出现超出预期的改动。适合对输出结果有明确要求、需要精确控制实现细节的场景。对于常规功能开发、代码维护和批量修改等任务，Claude 3.5 能够高效、可靠地完成目标。
• Gemini-2.5-pro：该模型在知识广度、推理能力、逻辑思维、智商测试以及数学运算等方面表现尤为突出。无论是复杂的技术问答、深度逻辑推理，还是高难度的数学题解，Gemini-2.5-pro 都能给出高质量的答案。适用于需要严谨推理、知识密集型、数据分析和算法设计等场景，是目前综合能力最强的通用型大模型之一。
• O3 模型：O3 模型以其卓越的推理能力和强大的代码生成能力著称，能够高效处理复杂的逻辑任务和多步骤推理问题。在实际开发中，O3 在算法设计、复杂业务流程梳理、跨领域知识整合等方面表现优异。适合用于需要高阶思维、创新性解决方案以及多领域知识融合的场景，是当前AI开发和技术创新中的有力助手。

模型切换策略 ​

• 一般在这三个之间切换：Claude 、Gemini-2.5-pro、O3
• 一种模型一次解决不了，就换提示词
• 还不行就换模型，一般这三个都能基本解决
• 如果还是解决不了就在网上找方法，把方法地址给到 AI，AI 就能解决
• 注意有一些是旧的方法，需要告诉它新的文档和方法

特定场景的模型选择 ​

• Claude 4.0 thinking：适合做规划
• Claude 4.0：当你不想花太多精力在交互细节上时，Claude 4.0 能自动补全并优化界面交互，往往会根据上下文脑补最佳实践，极大提升开发效率。当然，这种“锦上添花”有时也可能带来不必要的复杂度，因此建议在需要时灵活利用其特性，结合实际需求进行把控。
• Claude 3.7：UI 也比 3.5 要好不少

结语： 让 AI 成为你的高效助手，但始终保持主动思考与严格审查，才能真正发挥 AI 辅助开发的最大价值！