在 AI 助力工作流革新的背景下，一款代码工具逐渐成为非技术人员高效表达想法的新选择。它能实现指令到可交互网页 demo 的快速转化，还支持设计稿与代码的双向转换，为产品、设计等岗位降低沟通成本，但也存在适用场景局限与协作复用等问题，这份指南便聚焦其基础使用与实操技巧。

本简易指南面向产品、设计、运营等非技术人员，了解cursor的基础使用，实现“输入指令，输出可交互的网页demo”，用于快速表述、迭代想法，降低沟通成本。之所以是简易指南，是因为术的事情模型比我更懂，比如如何把代码发到git、如何部署买域名等，所以不赘述。

能解决：

代替纸笔/axure，不用纠结一个事情到底用什么交互做，省脑子。

产出物可直接交互，更快迭代想法——实际页面点起来才有更直接的体感这是不是我要的。

设计稿与代码文件的相互转化，设计稿可以转代码，代码产出的页面也能转回figma。

不解决：

简单场景。几句话能说明白的事/固定组件的堆砌，无需使用。

设计规范。企业使用场景下的组件库、设计风格，这部分暂时还没探索能否让AI给出符合规范的输出。

80分以上的设计。如果你让AI和你聊你很擅长的事，你会发现他有时也没那么懂。设计也同理。

开发协作。做demo的代码对实际开发的复用价值存疑，新产品可能大一点。

上路离精通就不远了。

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 协议。