在 AI 助力工作流革新的背景下，一款代码工具逐渐成为非技术人员高效表达想法的新选择。它能实现指令到可交互网页 demo 的快速转化，还支持设计稿与代码的双向转换，为产品、设计等岗位降低沟通成本，但也存在适用场景局限与协作复用等问题，这份指南便聚焦其基础使用与实操技巧。
本简易指南面向产品、设计、运营等非技术人员，了解cursor的基础使用，实现“输入指令，输出可交互的网页demo”，用于快速表述、迭代想法，降低沟通成本。之所以是简易指南，是因为术的事情模型比我更懂，比如如何把代码发到git、如何部署买域名等，所以不赘述。
能解决：
不解决：
上路离精通就不远了。
1.下载
cursor.com
2.搞定会员
20刀/月，有海外信用卡的可以直接充，没有的可以用Bewildcard（已失效）的服务，或其他TB服务。还有一些奇技淫巧，通过不断注册新账号达到永久白嫖的效果（设备可能会被封）。
另外cursor新用户有一定的体验次数，可以先体验。
字节的trae可以免费用Claude3.7，但是工程上的设计还不够好，导致模型体现出来的智能不高，会频繁写bug，浪费很多时间。所以优先推荐cursor。
3.新建文件夹
代码需要存在文件夹里。新建完文件夹，一个项目就开始了一半。
4.打开设置，设置下全局规则
设置下user rules，这里可以根据用的过程中的体感灵活调整。网上有很多模板，我自己体验比较重要的就是写好注释。
5.打开侧边栏，开始指挥
使用command+I开启侧边控制栏，调整为agent模式，并开始给AI下指令（注意强调下做纯前端演示项目），并让他帮助你在本地预览项目。怎么把代码用浏览器打开（俗称本地预览）这种事情，直接问AI即可，这里不赘述。
0701更新 在今天，其实并没有太多讲究了，直接打开就能自然用起来。
一点朴素的经验，花一些时间踩坑后你也会理解。少让他自己发挥
和前面说的告知AI这是个纯前端演示项目一样，更多的上下文可以带来更好的效果，避免AI完美主义天性犯了想给你交付大而全的作业，发挥一堆乱七八糟的东西。
保持代码里没有太多乱七八糟的东西比较重要，因为AI上下文窗口有限。上下文不够的痛
0620更新 Claude sonnet 4重新成为了最好的选择
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，可以适当开新的窗口，释放注意力资源。常用配置模式与模型选择
买新不买旧。Claude sonnet 4（thinking）作为主力模型，Gemini 2.5作为备用模型。Cursor rules
Cursor提供两种粒度的rules。
全局规则对所有项目生效，适合放一些通用信息，如告诉他我不懂技术，如让他永远用中文回复。
项目规则则仅对某个项目生效，可以放这个项目的介绍、设计风格要求等信息。在最新版本的cursor中，已经支持了通过/generate cursor rules指令让AI自动总结生成规则。这里的难点是，只有你足够了解一个事情，才能写出足够好的cursor rules，需要在磨合中不断调整。与figma协作思路一 用代码写页面，并转回figma
这是更低一层的解决方案，对智能的要求更低。
虽然cursor支持图像识别，但截一张图并告诉它“照着做”的效果并不会很好，因为模型的视觉能力还不足以支持复杂页面截图的复刻。而figma通过mcp开放出来的能力会提供更多关于布局、配色等设计信息，可以有效提高模型实现设计稿的准度。【但有些信息不会传递，比如组件高度是多少px，所以最终效果还是有误差】在cursor中添加figma MCP
1.打开设置-MCP-添加按钮
2.复制如下内容进去。
mac复制这段
{ “mcpServers”: {
“Framelink Figma MCP”: {
“command”: “npx”,
“args”: [“-y”, “figma-developer-mcp”,
“–figma-api-key=YOUR-KEY”, “–stdio”]
}
}}
Windows复制这段
{
“mcpServers”: {
“Framelink Figma MCP”: {
“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会越来越重要。一位因营销弱鸡自己产品半死不活的产品经理如是说。依然是文档民工
做设计一时爽，写需求火葬场。目前没有找到写产品文档的捷径，你依然需要自己拆解理想和现实之间的差距、组织语言表达、埋头写文档、挨喷。
当然，好的一面是这也意味着大家短期内不会下岗。
本文由人人都是产品经理作者【紫兆】，微信公众号：【于惊雷】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。