在人工智能推动工作流程变革的背景下，一款代码工具逐渐成为非技术人员表达创意的高效选择。它可以迅速将指令转化为可交互的网页演示，同时支持设计稿与代码之间的双向转换，这为产品和设计等领域减少了沟通的障碍。然而，该工具在适用场景和协作复用方面仍面临一定的局限性。本文旨在提供有关其基础使用和实操技巧的指南。

0. 导言

这本简易指南特别为产品、设计以及运营等非技术专业人士而设，旨在帮助他们掌握cursor的基本功能，实现“输入指令，输出可交互的网页演示”，以便快速表达和迭代想法，降低沟通的障碍。之所以称之为简易指南，是因为一些技术细节如如何将代码上传至git或购买域名等，本文不作详细说明。

能够解决的问题包括：

• 替代传统的纸笔或Axure，避免纠结于选择哪种交互方式，节省思考时间。
• 产出的作品可以直接交互，加快想法的迭代——只有在实际页面上操作，才能更直观地确认是否符合预期。
• 实现设计稿与代码文件的互转，设计稿能够转化为代码，而代码生成的页面也可回传至Figma。

而无法解决的问题有：

• 简单场景。对于那些几句话就能阐明的问题或固定组件的简单堆砌，这种工具并非必要。
• 设计规范。在企业应用中涉及的组件库和设计风格方面，尚未探索出让AI提供符合规范的解决方案。
• 高质量设计。如果你让AI参与你擅长的领域，可能会发现它有时并不如你所期待的那样理解设计。
• 开发协作。代码的演示在实际开发中的复用价值仍然存疑，特别是对于新产品来说。

1. 开始使用

迈出第一步，离熟练掌握不远了。

1. 下载软件

cursor.com

2. 完成会员注册

每月20美元，持有海外信用卡的用户可以直接充值，没有信用卡的用户可以尝试使用Bewildcard（已失效）或其他相关服务。此外，也有一些技巧，通过不断注册新账户实现免费使用（但设备可能会被封禁）。

新用户在cursor中有一定的体验次数，可以先行体验。

字节的trae可以免费使用Claude3.7，但由于其设计尚不够完善，导致模型表现出的智能水平较低，频繁产生bug，浪费大量时间。因此，优先推荐使用cursor。

3. 创建文件夹

代码需要保存在文件夹中。文件夹创建完成后，项目的一半就已经启动。

4. 配置全局设置

在设置中调整用户规则，可根据使用过程中的实际体验灵活调整。网络上有很多模板，我认为最重要的就是写好注释。

5. 打开侧边栏，开始指挥

使用command+I打开侧边控制栏，切换到代理模式，并开始给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的操作。

在最近的版本中，代理模式下可以启用yolo模式，让cursor自动执行控制台指令，无需逐步手动确认。这固然便捷，但由于语言局限性和长期记忆的缺失，AI理解你的需求错误的可能性依然存在。如果你发现它完全误解了你的需求，比如意外删除了其他模块的历史代码或交付了不相关的内容，可以果断选择回退版本。在重大方向错误的情况下，回退比修复要更为高效。

cursor提供详细的检查点，每一步操作均可回退，但从B回退到A后，就无法再回退回B。

若大方向出现错误，建议选择回退而非修复。修复大方向的问题往往会导致冗余代码增多，使得项目后期难以维护，因此不如重新开始。先询问，再执行。

在同一工作窗口中，模型会保持连续的上下文，因此不妨先用询问模式讨论问题和思路，然后再切换到执行模式开始操作。避免在沟通未清楚前直接开始执行，从而造成更多冗余代码。开启新的会话窗口。

这仍然涉及工作记忆与长期记忆的问题，不同领域的AI会采取不同的解决方案，例如陪伴类的EVE通过准备108个记忆槽位来记录与用户的关键交互，以模仿长期了解用户的效果。cursor和kimi一样，拥有自己的短期工作记忆窗口，如果需要添加与之前模块无关的新特性，可以适当开启新的窗口，以释放注意力资源。常用配置与模型选择。

选择新而非旧。Claude sonnet 4（thinking）作为主力模型，Gemini 2.5为备用模型。Cursor规则。

Cursor提供两种粒度的规则。

全局规则适用于所有项目，适合记录一些通用信息，比如告知AI我不懂技术，或者希望其始终以中文回复。

项目规则仅适用于特定项目，可记录该项目的介绍、设计风格要求等信息。在cursor最新版本中，支持通过/generate cursor rules指令让AI自动总结生成规则。这里的挑战在于，只有你对某个事物足够了解，才能写出合适的cursor规则，因此需要在磨合中不断调整。与Figma的协作思路：通过代码编写页面，并将其转回Figma。

这是更简单的解决方案，对智能的要求也较低。

虽然cursor支持图像识别，但单纯截取图像并告知其“照着做”的效果并不理想，因为模型的视觉能力尚不足以支持复杂页面截图的复刻。而Figma通过MCP开放的功能提供了更多关于布局、配色等设计信息，从而有效提升模型实现设计稿的准确性。【但一些信息仍无法传递，例如组件高度是多少px，因此最终效果可能存在误差】在cursor中添加Figma MCP。

1. 打开设置-MCP-添加按钮

2. 将以下内容复制粘贴到此处。

mac复制这段

{ “mcpServers”: {

“Framelink Figma MCP”: {

“command”: “npx”,

如何在Figma中集成MCP并优化设计工作流程

首先，在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”的提示，可以确认是否开启了agent模式，并使用了Claude模型。

需要指出的是，MCP的作用是为大型模型提供额外的信息输入，但信息传递过程中难免会有损失，因此在处理复杂任务时，无法做到100%还原。通过结合图片和MCP，可以有效改善结果。

还有一种选项是使用第三方工具，像https://v0.dev，这个工具在还原截图或设计稿方面下了很大功夫。下面的图示左侧为还原效果，右侧为上传的原始图像。虽然还原效果未必完美，但至少保留了基本布局。v0还支持授权Figma账号，并直接选择具体设计页面。具体使用哪种方案更佳，可以在不同场景下进行多次测试，变化迅速，因此不便于一概而论。

在生成基础框架后，可以将代码保存，继续在cursor中进行后续迭代工作，最终将页面转换为设计稿。

如果制作了多个版本后，需要进行一些轻微的调整，比如修改文案，可以使用工具将页面导出为设计稿，以便回到Figma进行维护。苹果官网的还原效果见下图。

推荐的工具可以高效且无损地将HTML转化为带图层的Figma设计稿，链接如下：
https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed。此外，还有一种方案是让cursor直接操控Figma。

这种选择虽然存在，但在智能溢出之前，操作最原始事物的准确性和效率仍然更高。可以考虑使用talktofigma插件。

目前这个方案尚不成熟，因此不予推荐。如下图所示，生成的Figma文件不完整，需要调用多种工具，耗时至少五分钟，且效果不尽如人意。

关于产品的职责，决策仍然是重中之重，思考与研究的时间同样重要。

随着Build门槛的降低，Sell的重要性愈加凸显。一位因营销乏力导致产品陷入困境的产品经理如是说。此时，文档的撰写也是一项重要的工作。

在设计的快感与需求的严峻现实之间，尚未找到撰写产品文档的捷径，依然需要面对理想与现实的差距，整理思路，撰写文档，并接受反馈。

当然，值得庆幸的是，这也意味着大家在短期内不会失业。

本文由人人都是产品经理的作者【紫兆】创作，微信公众号为：【于惊雷】。原创内容，未经授权禁止转载。

文章配图来自Unsplash，遵循CC0协议。