前端cursor的小技巧

5 阅读2分钟

一、你的核心思路的优点(值得保留)

  1. 工具定位精准

    • Gemini 擅长视觉→代码的还原(图文理解、UI 还原是其核心优势),适配前端视图还原的需求;
    • Claude 长于长文本 / 上下文理解、结构化逻辑梳理(对 token 的利用率更高,处理数据逻辑 / 业务结构时不易丢上下文),刚好匹配数据 / 业务逻辑开发的场景。
  2. 结合 Cursor 生态:提到「配置好的 Skill(如 ESLint 数据类型)」,符合 Cursor 的使用核心 —— 通过 Skill 标准化开发流程,避免重复配置,提升效率。

二、可优化的细节(让规范更落地)

  1. 补充工具适配场景的细节

    • Gemini 除了视图还原,还可补充「动效还原、多端样式适配(小程序 / H5)」,因为它对视觉类 prompt 的理解更精准;
    • Claude 补充「接口联调逻辑、状态管理设计(如 Redux/Pinia)、复杂条件分支处理」,这类场景更依赖上下文连贯性。
  2. 补充 Skill 的使用建议

    • 明确「跑项目前加载的 Skill 清单」:除了 ESLint,前端常用的还有「React/Vue 语法校验」「TypeScript 类型推导」「小程序语法规范」等,可按项目类型(React/Vue/ 小程序)分类配置;
    • 建议「自定义团队专属 Skill」:把团队的代码规范、接口请求模板等封装成 Skill,提升团队一致性。
  3. 补充 token 管理的小技巧

    • 用 Claude 处理长上下文时,建议「分段投喂」:把业务逻辑拆成「数据结构定义→接口调用→页面逻辑→异常处理」四部分,逐段发给 Claude,减少单次 token 消耗;
    • 用 Gemini 做视图还原时,建议「精简截图 / 标注」:只截取核心视图区域,标注关键样式(如字号、色值),避免冗余信息占用 token。

三、优化后的规范表述(更易落地)

Cursor 使用规范:

  1. 视图层开发(UI 还原 / 动效 / 多端样式):优先使用 Gemini,精准还原视觉稿,提交前加载「样式规范 Skill」;
  2. 逻辑层开发(数据结构 / 业务逻辑 / 接口联调):推荐使用 Claude,利用其长上下文优势,处理复杂逻辑时分段投喂减少 token 消耗,加载「ESLint/TS 类型校验 Skill」;
  3. 项目启动前:必选加载对应技术栈的标准化 Skill(React/Vue/ 小程序 / ESLint 等),团队通用 Skill 统一维护,避免重复配置。

总结

  1. 你的核心判断(Gemini 做视图、Claude 做逻辑)完全正确,贴合不同 AI 工具的核心优势;
  2. 补充「场景细节 + Skill 清单 + token 技巧」后,规范会更易落地;
  3. 结合 Cursor 的 Skill 生态是关键,能让 AI 辅助开发的效率最大化。