开源一篇产品经理用cursor的指南
- 2025-08-26 05:52:18
- 941
在AI助力工作流革新的背景下,一款代码工具逐渐成为非技术人员高效表达想法的新选择。它能实现指令到可交互网页demo的快速转化,还支持设计稿与代码的双向转换,为产品、设计等岗位降低沟通成本,但也存在适用场景局限与协作复用等问题,这份指南便聚焦其基础使用与实操技巧。
0.写在前面
本简易指南面向产品、设计、运营等非技术人员,了解cursor的基础使用,实现“输入指令,输出可交互的网页demo”,用于快速表述、迭代想法,降低沟通成本。之所以是简易指南,是因为术的事情模型比我更懂,比如如何把代码发到git、如何部署买域名等,所以不赘述。
能解决:
代替纸笔/axure,不用纠结一个事情到底用什么交互做,省脑子。
产出物可直接交互,更快迭代想法——实际页面点起来才有更直接的体感这是不是我要的。
设计稿与代码文件的相互转化,设计稿可以转代码,代码产出的页面也能转回figma。
不解决:
简单场景。几句话能说明白的事/固定组件的堆砌,无需使用。
设计规范。企业使用场景下的组件库、设计风格,这部分暂时还没探索能否让AI给出符合规范的输出。
80分以上的设计。如果你让AI和你聊你很擅长的事,你会发现他有时也没那么懂。设计也同理。
开发协作。做demo的代码对实际开发的复用价值存疑,新产品可能大一点。
1.上手
上路离精通就不远了。
1.下载
cursor.com
2.搞定会员
20刀/月,有海外信用卡的可以直接充,没有的可以用Bewildcard(已失效)的服务,或其他TB服务。还有一些奇技淫巧,通过不断注册新账号达到永久白嫖的效果(设备可能会被封)。
另外cursor新用户有一定的体验次数,可以先体验。
字节的trae可以免费用Claude3.7,但是工程上的设计还不够好,导致模型体现出来的智能不高,会频繁写bug,浪费很多时间。所以优先推荐cursor。
3.新建文件夹
代码需要存在文件夹里。新建完文件夹,一个项目就开始了一半。
4.打开设置,设置下全局规则
设置下userrules,这里可以根据用的过程中的体感灵活调整。网上有很多模板,我自己体验比较重要的就是写好注释。
5.打开侧边栏,开始指挥
使用command+I开启侧边控制栏,调整为agent模式,并开始给AI下指令(注意强调下做纯前端演示项目),并让他帮助你在本地预览项目。怎么把代码用浏览器打开(俗称本地预览)这种事情,直接问AI即可,这里不赘述。
2.沟通协作技巧(遗址)
0701更新在今天,其实并没有太多讲究了,直接打开就能自然用起来。
一点朴素的经验,花一些时间踩坑后你也会理解。少让他自己发挥
和前面说的告知AI这是个纯前端演示项目一样,更多的上下文可以带来更好的效果,避免AI完美主义天性犯了想给你交付大而全的作业,发挥一堆乱七八糟的东西。
保持代码里没有太多乱七八糟的东西比较重要,因为AI上下文窗口有限。上下文不够的痛
0620更新Claudesonnet4重新成为了最好的选择
0411更新gemini-2.5-pro模型有百万级的上下文窗口,实测下来长文档编辑时好用很多。
AI的工作记忆有限,并且对模式的理解还不够强(或者说长期记忆模块很难设计),所以并不像大家身边研发同事一样靠谱,你一句话就知道要改哪个模块大概咋改。
要增强其表现,可灵活使用“@”功能,艾特某段具体的代码,艾特你的终端的运行日志。前期你可能搞不清楚每个代码文件具体是干啥的,可以用command+f搜索页面里的中文,大概就知道这段代码对应哪里的内容了。平衡具体与模糊
因为没办法指着屏幕说“改这里”,所以指令最好具体到某个页面的某个模块。同时,如果要做比较精细的调整,比如增加一两个配置项,最好明确说出要加啥配置。
另一方面,如果现在只有想解决的问题,没有想好的解决方案,指令就可以抽象一些。比如这个模块用来告诉用户XXX,希望表现XXX,需要配置XXX。监控它做了啥
某近期的版本开始,agent模式下可以开启yolo模式,即让cursor自动执行控制台的指令,无需一步步手动确认。这当然很好,但因为语言的局限性+长期记忆的缺失,AI理解错你的需求还是很容易发生的。如果你发现他完全误解了你的需求,比如删除了一个文件里其他模块的历史代码,或交付了一个莫名其妙的东西,可以果断回退版本。多回退,大方向错了回退比修复好
cursor提供了比较很细致的checkpoint,他的每一步操作都可以回退,当然,从B回退到A后,就不能再回退回B了。
如果大方向错了,推荐回退而不是修复。修复一个大方向的问题往往会带来更多的冗余代码,这会让项目后期越来越难改,所以不如重新开始。先ask,再agent
在同个工作窗口下,模型会保持连续的上下文,所以不妨先使用ask模式把问题和思路讨论清楚,再切换到agent模式开始执行。避免在沟通清楚前直接开干,然后堆积更多冗余代码。开启新的会话窗口
这依然在讲工作记忆与长期记忆的问题,不同领域的AI会有不同的解决方案,比如陪伴类的EVE的做法是准备了108个记忆槽位,把他和你关键的交互记录下来,以模仿长期懂你的效果。cursor和kimi一样,也有自己的短期工作记忆窗口,如果你需要加一个和之前的模块不相关的feature,可以适当开新的窗口,释放注意力资源。常用配置模式与模型选择
买新不买旧。Claudesonnet4(thinking)作为主力模型,Gemini2.5作为备用模型。Cursorrules
Cursor提供两种粒度的rules。
全局规则对所有项目生效,适合放一些通用信息,如告诉他我不懂技术,如让他永远用中文回复。
项目规则则仅对某个项目生效,可以放这个项目的介绍、设计风格要求等信息。在最新版本的cursor中,已经支持了通过/generatecursorrules指令让AI自动总结生成规则。这里的难点是,只有你足够了解一个事情,才能写出足够好的cursorrules,需要在磨合中不断调整。与figma协作思路一用代码写页面,并转回figma
这是更低一层的解决方案,对智能的要求更低。
虽然cursor支持图像识别,但截一张图并告诉它“照着做”的效果并不会很好,因为模型的视觉能力还不足以支持复杂页面截图的复刻。而figma通过mcp开放出来的能力会提供更多关于布局、配色等设计信息,可以有效提高模型实现设计稿的准度。[但有些信息不会传递,比如组件高度是多少px,所以最终效果还是有误差]在cursor中添加figmaMCP
1.打开设置-MCP-添加按钮
2.复制如下内容进去。
mac复制这段
{“mcpServers”:{“FramelinkFigmaMCP”:{“command”:“npx”,“args”:[“-y”,“figma-developer-mcp”,“–figma-api-key=YOUR-KEY”,“–stdio”]}}}
Windows复制这段
{“mcpServers”:{“FramelinkFigmaMCP”:{“command”:“cmd”,“args”:[“/c”,“npx”,“-y”,“figma-developer-mcp”,“–figma-api-key=YOUR-KEY”,“–stdio”]}}}
3.打开figma首页-设置-安全,创建个人访问令牌。创建后,复制令牌并替换上面文件中的“YOUR-KEY”。
4.在figma右键需要AI关注的组件-复制为链接(不是整个设计稿链接),然后在对话时附加即可。如果出现“无法使用MCP”的反馈,可以检查下当前是不是打开了agent模式+使用的Claude模型。
MCP本质上还是给大模型提供了额外的一段信息输入,但只要是信息传递,就依旧会有损耗,所以复杂任务无法100%还原。图片+MCP一起可以改善效果。使用v0
另外一种方式是交给第三方。https://v0.dev在还原截图/设计稿上下了功夫。下图左为还原效果,右为上传的原始图片。显然没那么还原,但起码布局没缺胳膊少腿。v0也支持在授权figma账号,并直接选择某个具体的设计页面。具体用哪种方案更优可以在具体场景下多测试一下,变化很快,这就不写推荐方案了。
生成基础的框架后,可以把代码保存下来,继续在cursor做后续迭代。把页面转回设计稿
如果做了几个版本后,需要做一些比较轻的调整,比如改改文案等,可以使用工具将页面转成设计稿,回到figma维护。苹果官网还原效果如图。
工具用这个,可以以无损的还原率,把html转成带图层的figma设计稿:https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed思路二直接让cursor操控figma
这是另一种选择。但在智能溢出前,更上一层的包装,一定不如操作最原子的事物准确度与效率高。使用talktofigma插件
目前看本方案还不成熟,不做推荐。如图,产出一个如下图的不完整的figma文件,需要调用数十次工具,耗时五分钟起,且产出非常不尽如人意。
https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp写在后面(懒得分类的内容)别着相
产品最重要的职责依然是决策,做什么怎么做。所以散步发呆思考做用研的时间依然重要。
且Build门槛越来越低,也意味着Sell会越来越重要。一位因营销弱鸡自己产品半死不活的产品经理如是说。依然是文档民工
做设计一时爽,写需求火葬场。目前没有找到写产品文档的捷径,你依然需要自己拆解理想和现实之间的差距、组织语言表达、埋头写文档、挨喷。
当然,好的一面是这也意味着大家短期内不会下岗。:)如果你需要翔实的引导
可以将疑问直接评论在本文里,争取摸鱼时间更新。
也可以翻阅AI编程蓝皮书2.0(更新Claude4+MCP)。虽然有点卖课风,但人家写的很全,所以还是推荐一下。
- 上一篇:谢娜不基础谢娜妈妈更不基础
- 下一篇:南京头野猪多分钟横渡长江