在人工智能推动工作流程变革的时代，一款代码工具逐渐成为那些非技术人员表达创意的新利器。它可以快速将指令变成可交互的网页demo，同时支持设计稿和代码之间的双向转换，帮助产品和设计等岗位减少沟通障碍。不过，它在适用场景和协作复用方面也存在一些限制，这份指南专门介绍了如何基础使用和一些实操技巧。
0.前言
这份简易指南是为产品、设计和运营等非技术人员准备的，主要帮助大家了解cursor的基本用法。通过“输入指令，输出可交互的网页demo”的方式，快速表达和迭代自己的想法，降低沟通成本。之所以叫简易指南，是因为很多技术细节，比如如何将代码上传到git、域名购买等，cursor本身比我更清楚，所以这里就不细讲了。
可以解决的问题：
- 代替传统的纸笔或axure，让你不再为选择交互方式而烦恼，省去思考的时间。
- 生成的内容可以直接交互，帮助你更快地验证想法——只有实际点击页面，才能更好地判断这是否是你想要的。
- 支持设计稿与代码文件之间的互转，设计稿可转化为代码，生成的页面也能回传到figma。
无法解决的问题：
- 简单场景。对于一些可以用几句话说明的事情，或者是简单组件的堆砌，没必要使用这个工具。
- 设计规范。企业内部的组件库和设计风格，目前还不能确保AI输出符合规范。
- 高质量设计。如果你让AI讨论你擅长的领域，可能会发现它并不总是准确，设计领域同样如此。
- 开发协作。生成的demo代码在实际开发中的复用价值值得怀疑，尤其是新的产品。
1.快速上手
踏上这条路，离精通就不远了。
1. 下载
cursor.com
2. 办理会员
每月20美元，有海外信用卡的可以直接充值，如果没有，可尝试一些已经失效的服务，或者其他的TB服务。还有一些小技巧，可以通过不断注册新账号来实现长期免费使用（但可能会被封设备）。
另外，cursor的新用户有一定的试用次数，可以先体验一下。
字节的trae可以免费使用Claude3.7，但在工程设计上仍不够理想，导致模型有时表现出低智能，容易出现bug，浪费时间。因此，优先推荐使用cursor。
3. 创建文件夹
代码需要放在文件夹中。创建文件夹后，一个项目就算启动了一半。
4. 打开设置，调整全局规则
在这里设置用户规则，可以根据使用过程中遇到的感觉灵活调整。网上有许多模板，我自己认为最重要的是写好注释。
5. 打开侧边栏，开始下达指令
使用command+I来打开侧边控制栏，调整为agent模式，开始给AI下达指令（特别强调要做纯前端演示项目），并让它帮助你在本地预览项目。至于如何在浏览器中打开代码（即本地预览），直接问AI就可以，这里不再赘述。
2. 沟通与协作技巧（更新）
0701更新：其实现在使用起来并没有太多讲究，直接打开就能自然使用。
一些朴实的经验，经过一段时间的摸索后你会理解。尽量不要让AI自己发挥。
正如之前提到的，要告诉AI这是一个纯前端的演示项目，提供更多上下文信息可以获得更好的效果，避免AI因为完美主义而给你交付一个过于复杂的任务。
保持代码简洁也很重要，因为AI的上下文窗口是有限的。如果上下文不够，会出现很多问题。
0620更新：Claude sonnet 4重新成为了最好的选择。
0411更新：gemini-2.5-pro模型有百万级的上下文窗口，实测在编辑长文档时表现得更为优秀。
AI的工作记忆有限，而且对模式的理解也不是很强（或者说长期记忆模块设计得很困难），所以没有你身边的开发同事那么靠谱，你说一句话，它可能不太清楚要改哪个模块。
为了提升AI的表现，可以灵活使用“@”功能，艾特特定代码段或你的终端运行日志。初期你可能不太清楚每个代码文件的具体功能，可以通过command+f在页面中搜索中文，大致了解每段代码对应的内容。具体与模糊之间要保持平衡。
由于无法直接指出屏幕上的“这里”，因此指令最好具体到某个页面的某个模块。如果需要进行细微调整，例如增加一两个配置项，最好明确说明要添加什么配置。
另一方面，如果只有想解决的问题，却没有想好的解决方案，指令也可以稍微抽象一些。比如说这个模块是用来告诉用户XXX，希望展现XXX，需要配置XXX。监控AI做了什么。
近期版本开始，agent模式下可以开启yolo模式，让cursor自动执行控制台指令，无需手动确认。这当然很好，但因为语言的局限性加上缺乏长期记忆，AI很容易误解你的需求。如果发现它完全误解了你的需求，比如删除了文件中其他模块的历史代码，或者交付了一些奇怪的东西，可以果断回退版本。多进行回退，比修复更有效。
cursor提供了详细的检查点，确保每一步操作都可以回退。当然，从B回退到A后，不能再回退到B。
如果方向不对，建议回退而不是修复。修复大方向的问题常常会产生冗余代码，使项目后期越来越难以改动，因此不如重新开始。先ask，再agent。
在同一个工作窗口中，模型会保持连续的上下文，可以先使用ask模式讨论清楚问题和思路，然后切换到agent模式开始执行，避免在沟通清楚前直接开始，导致更多冗余代码的堆积。开启新会话窗口。
这仍然与工作记忆及长期记忆的问题有关，不同领域的AI有不同的解决方案，比如陪伴类的EVE准备了108个记忆槽位，记录与你的关键交互，以模仿长期的理解。cursor和kimi一样，也有自己的短期工作记忆窗口，如果需要增加一个与之前模块无关的功能，可以适当开启新窗口，释放注意力资源。常用配置模式与模型选择。
买新不买旧。Claude sonnet 4（thinking）作为主力模型，Gemini 2.5作为备用模型。Cursor规则。
Cursor提供两种粒度的规则。
全局规则适用于所有项目，适合放一些通用信息，比如告诉AI我不懂技术，或者让它一直用中文回复。
项目规则则只对某个项目生效，可以放该项目的介绍、设计风格要求等信息。在最新版本的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”,
轻松搞定Figma与MCP的设置，带你玩转设计
首先，我们来看看在Cursor中如何添加Figma MCP。其实操作很简单，只需按以下步骤来做：
{
“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”]
}
}
接下来，打开Figma首页，进入设置-安全，然后创建一个个人访问令牌。记得生成后把令牌复制到上面代码中的“YOUR-KEY”位置哦。
然后，右键点击Figma中需要AI处理的组件，选择“复制为链接”（注意不是整个设计稿的链接），在你对话的时候附上这个链接就行了。如果你遇到“无法使用MCP”的提示，可以检查一下是否开启了代理模式，以及使用的Claude模型。
说到MCP，它其实是为大模型提供了额外的信息输入，但信息的传递总会有些损耗，因此复杂任务不可能做到100%还原。不过，配合图片和MCP使用可以明显改善效果。
另外一种方法是交给第三方工具来处理，比如https://v0.dev，它在还原截图和设计稿方面表现不错。虽然效果不是完美的，但至少不会让布局失去完整性。更棒的是，v0还支持授权Figma账号，直接选择特定的设计页面。至于选哪种方案更好，建议根据具体情况多测试一下，毕竟变化很快，这里就不推荐了。
一旦生成了基础框架，你可以保存代码，继续在Cursor中进行后续的迭代，甚至可以把页面转回到设计稿。
如果你做了几个版本后，想进行一些小的调整，比如修改文案等，可以使用工具将页面转成设计稿，方便回到Figma进行维护。苹果官网的还原效果也很不错，值得参考。
推荐一个工具，它能以无损的还原率把HTML转成带图层的Figma设计稿：
https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed。另外，你还可以直接让Cursor来操控Figma。这也是一个选择。不过，在智能化还没有全面普及之前，直接操作最基础的元素更加高效准确。
不过，目前这个方法还不够成熟，所以不太推荐。根据我的观察，生成的Figma文件往往不完整，需要多次调用工具，耗时也较长，效果也不尽如人意。
最后，我想说，产品经理最重要的职责还是做决策，思考做什么和怎么做的问题。因此，花时间进行用户研究和思考是非常重要的。
而随着开发门槛的降低，销售的能力变得愈发重要。一位因营销不力而苦恼的产品经理就曾这样说道。文档工作依然是产品经理的基本功。
设计虽然令人愉悦，但写需求往往让人感到沮丧。目前还没有找到快速撰写产品文档的秘诀，你仍然需要理清理想与现实的差距，组织好语言，埋头苦写，甚至可能还会遭到批评。
当然，积极的一面是，这意味着大家短期内不会失业。
本文由人人都是产品经理的作者【紫兆】撰写，微信公众号：【于惊雷】授权发布，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
