精准掌控Cursor作战，手把手教你如何指挥！

轻松搞定网页设计，分享我的AI工具使用心得

最近知乎搞了个活动，主题是 #我的年度AI产品。如果让我选一个我最喜欢的，毫无疑问，我会选cursor。说实话，它让我从一个普通的产品经理变成了一个“vibe coder”。不过，光靠cursor可不行，随便让它发挥可能效果并不好。今天我就来分享一个超实用的方法，教你怎么准确地引导cursor，让它发挥最大效用。

问题

如果你直接用cursor做网页，可能会发现成品挺丑的。就拿一个简单的博客页面来说，长得可能是这个样子：

这时候你觉得太难看了，于是去找了很多参考网站。比如，你找到两个：小绿和小蓝。你想要小绿的样式和配色，但布局却偏向小蓝。

那么该怎么做呢？今天就通过一个案例来演示一下这个过程，最终你可以得到如下页面：

看完这个，你就能灵活地将各种布局和元素融入到你的风格中。只要产品整体风格一致，基本的美感就能显现出来。

这套工具组合大家可以收藏起来，平时用得不多的话，免费版应该就足够了。同时，它也能帮助你在“vibe coding”中深入理解前端结构和MCP的使用。

开始动手做

你需要准备的工具有：

1. Chrome浏览器中的HTML2design插件
2. Figma（免费版就可以）
3. 在Figma中安装HTML2design插件
4. Cursor（可以选择付费或使用免费额度）或其他支持MCP的vibe coding工具

为了方便说明，我们把想保留风格的产品称为“小绿”，想保留布局的产品称为“小蓝”。那么，这些优秀的设计一般从哪里找呢？我给你推荐几个网站：

• https://dribbble.com/tags/web-design-inspiration
• https://godly.website/
• https://saaslandingpage.com/
• Just a moment…
• https://www.awwwards.com/websites/business-corporate/

整个过程分为两大步，感觉就像把大象放进冰箱那么简单：

• 第一步：“copy”小绿的风格
• 第二步：再“copy”小蓝的排版。

第一步：“copy”小绿的风格

1. 先用HTML2design插件抓取页面。通过浏览器安装HTML2design插件，打开它，选择你需要的设计宽度，比如PC版一般是1440px，移动端则是390px；然后选择直接将抓取的文件发送到Figma中的HTML2design插件，这样后续会更方便；点击“capture current page”（抓取整个页面）或“capture selection”（抓取部分区域）。

2. 完成后，打开Figma，新建一个设计文件（选择Design选项）。

3. 在这个设计文件里，点击下方的插件按钮，打开HTML2design插件（记得提前安装好，并用同一账号登录HTML2design，这样它才知道你刚才抓取的网页），点击Extension tab，就能看到刚刚抓取的页面，点击下载。

4. 然后你会发现小绿的设计已经被完整地导入到Figma设计文件中。

5. 接下来打开cursor，创建一个新项目。我们的目标是让cursor提取这个设计文件中的元素、风格和样式，构建你自己的设计系统标准（例如，产品中所有的button都用同一种风格，像圆角、色调和字体颜色一致）。但在这之前，cursor需要配置好Figma的MCP。

6. 配置好cursor的Figma MCP，让cursor能够访问小绿的Figma设计文件。你需要从Figma账号生成一个API KEY，打开Setting > Security，点击Generate new token。

将生成的token替换到以下代码中：

{
  "mcpServers": {
 
      "Figma AI Bridge": {
          "command": "npx",
          "args": [
              "-y",
              "figma-developer-mcp",
              "--stdio"
          ],
          "env": {
              "FIGMA_API_KEY": ""
          },
          "fromGalleryId": "GLips.Figma-Context-MCP"
      }
  }
}

把上面的代码复制到Cursor > cursor settings > MCP中，保存。

准备工作到此为止，接下来就正式开始与cursor的首次对话。

7. 为了让cursor更精准地完成任务，以下是经过多次尝试总结出的对话方式。你只需掌握引导AI的方法，每个人的对话结果可能不同，但引导的方式是一样的。接下来我以聊天记录的形式展示与cursor的对话：

我：现在你要构建一个前端项目，在开始之前，我需要你根据我说的条件，构建一个前端VUE框架， 请你说出你对VUE 框架的理解，VUE框架
中的设计系统是什么样的。

Cursor：给出VUE框架的理解(略)

注：在这里我会告诉它项目的背景，并询问它对VUE框架的理解。这不是考察，而是给后续构建提供足够的上下文。如果你对VUE不太了解，可以向AI提问，但也不需要太深入。以下是cursor的回答：

接下来让cursor读取设计文件，首先从Figma中获取设计文件的分享链接，稍后需要发给cursor。

继续对话。

我：这是我给你的设计稿：，使用Figma MCP，深度阅读设计稿件的所有细节。使用这些细节构建一个设计系统。完成后，请创建一个设计系统预览页面让我审查，这个页面的地址是 http://localhost:5173/design-preview  。我希望使用这个页面来记录所有的设计系统标准。

Cursor: 写代码写页面（略）

经过这一轮对话，你将得到这样一个页面，展示的就是你的设计标准。如果你曾经和注重设计规范的设计师一起工作，应该对这个不陌生。优秀的设计师通常会在开始设计之前提供设计规范。

对应的代码也会生成一些记录着标准组件的代码。

当然，最终结果可能与你的不同，你需要检查一下是否所有关键组件都已经提取出来了，如果没提取齐全，就提醒AI补充一下。

到这里，你就完成了小绿的样式风格复制，同时也准备好了小蓝的布局。

第二步：再“copy”小蓝的排版。

1. 同样使用HTML2design将小蓝的设计稿导入到Figma中。

打造个性化页面的简单指南

2. 在Cursor里开始构建页面时，我发现它有时候会漏掉Figma中的一些设计元素。可能是因为Figma在流量较大的时候会返回429错误，所以建议先做好规划，确保所有页面布局都在规划中，然后再开始写代码。

我： 构建一个博客列表页，放在blog文件夹下。 这个列表页请你使用figma MCP，以最大深度读取设计稿  
，参考设计稿的布局，但必须使用已经有的设计标准 
@design-system @src/components/Button.vue @src/components/Card.vue @src/components/HelloWorld.vue @src/components/Input.vue @src/components/Typography.vue 的样式、元素、色彩风格 和组件来构建此页面。 
在必要的情况下可以新增组件。要求考虑自适应， 保证在PC端、平板端和手机端有很好的展示。 页面构建好之后，以/blog  路径展示。 
请你先规划，不要写代码。
​
Cursor：读取figma设计稿，并计划（略）

从中我们可以看出，Cursor确实遭遇了Figma的访问限制。这就导致它没能获取到所有的布局元素，比如顶部的导航栏、底部的footer，还有footer与分页组件之间的banner。

这时候就需要通过多次提醒来确保信息被完整读取，像下面这样：

我： 你读到了设计稿中的footer 了吗， 使用figma  MCP 尝试再读取一下设计稿

cursor：读取到footer（略）

我：在footer 与 pagination 之间还有一个banner ，你能读取到吗

cursor：我读到了（略）

等到读取完毕后，再发出写代码的指令：

我：好的，现在我已经确认你读到了页面设计的所有内容，现在你结合所有的设计来总结一下你要做的事情，注意参考设计稿的布局，但必须使用@design-system @src/components/Button.vue @src/components/Card.vue @src/components/HelloWorld.vue @src/components/Input.vue @src/components/Typography.vue 的样式、元素、色彩风格 和组件来构建此页面。 
在必要的情况下可以新增组件。要求考虑自适应， 保证在PC ， 平板端和手机端有很好的展示。 页面构建好之后，以/blog路径展示。 
请你先总结计划，然后开始写代码。

等待几分钟后，或许你会看到一个页面，但可能还是会有一些样式没有正确应用设计系统中的配置，而是直接用了设计稿里的元素。这时你需要提醒它进行修改。每次修改之前，先确认哪些组件已经使用，然后再进行调整。以下是一个对话示例：

我：（发现footer里有些元素样式不对）帮我确认 footer v2 里的 使用了哪些设计系统里的组件。
​
Cursor：...BlogFooterV2.vue 仅使用了 Typography 组件，其余为原生 HTML 元素（, 
 等），样式通过设计系统的 CSS 变量实现。
​
我：不要使用原生 HTML 元素的样式，尽量使用设计系统里的变量。
​

这样做的目的是为了搞清楚哪些元素没有被采纳，从而进行修正，避免因为误解而产生新的问题。

在这个过程中，你也可能会发现需要增加一些设计标准，可以通过对话的方式将其同步更新到设计系统中。以下是一个典型的对话示例：

cursor：（在某次修改中）使用设计稿中的阴影：0px 5px 35px 0px rgba(0, 0, 0, 0.1)覆盖 Card 组件的默认阴影，确保阴影效果明显
​
我：将设计稿中的阴影纳入设计系统中， 并在所有卡片中引用。
​
Cursor：已将阴影纳入设计系统，并在design-preview中展示，并在所有卡片中引用。

你会注意到在/design-preview页面中，新增了相应的阴影设计标准。

经过几轮调整，最终你会得到这样一个页面，看看是不是符合你的期待呢？

总结

回顾一下，我们依次完成了几个步骤：

1. 找到你喜欢的参考对象（小绿、小蓝）。
2. 使用html to design将网页转换成设计稿。
3. 在Cursor中利用Figma MCP提取小绿的设计系统标准。
4. 再次在Cursor中通过Figma MCP，将小蓝的布局套用在小绿的风格上，这一步要确保Cursor完整读取了Figma设计稿的内容后再开始执行。完成后进行多次修正，每次修正前先询问当前状态，然后进行修改，同时不断更新设计标准。

完成这个流程后，你就能把任何设计风格“迁移”到你自己的项目中。怎么样，这个过程够详细了吧？快来试试吧！

---

我是专注于AI产品开发的二姐，致力于分享丰富的AI学习经验。如果你觉得这篇文章对你有帮助，欢迎关注、点赞和转发哦！