Cursor 给设计师。

Cursor 到底是什么

Cursor 是 Anysphere 打造的 AI 优先代码编辑器。它是 VS Code 的一个 fork，所以保留了熟悉的编辑器、扩展和快捷键，但把整个工作流围绕一个 AI agent 重建——这个 agent 能读懂你的整个项目、跨多文件编辑、运行命令，并和你一起在回路里迭代。

对设计工作而言，关键的几个能力是：Agent 模式（你描述想要的结果，Cursor 规划并跨文件编辑）、用于快速微调的行内编辑与 Tab 补全、让你不离开窗口就能看到运行中 UI 的编辑器内置预览，以及让它能拉入外部上下文（比如一个实时 Figma 文件）的 MCP 支持。

• 项目规则: Cursor 会读取项目指令文件——`.cursor/rules` 下纳入版本管理的 `.mdc` 规则，以及一个纯文本 `AGENTS.md`——你可以把设计约定写在 agent 每次都会读到的地方。
• 模型: Cursor 在模型上很灵活：订阅自带前沿模型，也支持用你自己的模型密钥（BYOK），所以同一套编辑器工作流背后用哪台引擎由你定。
• MCP: 它支持 Model Context Protocol，外部 server——最相关的就是 Figma MCP server——可以成为 agent 的一等上下文。

• 厂商：Anysphere
• 凭证：Cursor 账号 / 订阅（Hobby / Pro / Business）或你自己的模型密钥（BYOK）
• 形态：AI 优先的代码编辑器（VS Code fork），内置 agent 与预览

为什么 Cursor 擅长做设计

Cursor 在设计上的优势不是某个单一功能，而是“边写边看”这条回路的紧凑度。有三点让它更像一个设计工具，而不是一个泛泛的代码生成器。

• 紧凑的“边迭代边看”回路: 你给出提示，Cursor 跨文件编辑，编辑器内置预览立刻渲染出结果——于是你能在几秒内调整间距、层级和动效，而不必在另一个终端和浏览器之间来回切换。
• 直接的可视化编辑: 除了对话，Cursor 还允许你在预览里选中元素、直接微调样式，让小的视觉修正更像设计编辑、而非翻代码考古。
• 项目规则与 MCP 上下文: 有了 `.cursor/rules`（或 `AGENTS.md`）和 Figma MCP server，agent 是对着你的 tokens、组件和真实设计规格在工作，而不是靠猜。

结论和每个 agent 教给我们的一样：Cursor 默认并没有审美。只有当你给它约束——一套设计系统、一个审美 skill、具体的参考——它才能产出好设计。Open Design 打包的正是这些输入，这也是两者天然契合的原因（下文详述）。

从零把 Cursor 配置成能做设计

下面是从一台干净机器，到一个能对着你的设计系统构建、预览并验证 UI 的 Cursor 的完整路径。

1. 从 cursor.com 安装 Cursor，用 Cursor 账号登录，或在设置里配置你自己的模型密钥（BYOK）。
2. 打开你的项目，在对话 / Agent 面板里选一个模型。
3. 加项目规则：用 `.cursor/rules/*.mdc` 写结构化、按 glob 作用域生效的约定，或用一个纯文本 `AGENTS.md` 写简单可读的指令。
4. 接入 Figma MCP server（可选），让 agent 能读取实时设计上下文。
5. 启动你的 dev server，用编辑器内置预览边迭代边看、边验证 UI。

一份最简的项目规则文件，就能让 agent 对着品牌做设计、而不是退回到一个泛泛的样子。把它放在 Cursor 每次都会读到的地方：

# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---

- 复用已有的 design-system tokens 和组件；不要写死 hex 或间距。
- 最多两种字体、一个强调色。
- 品牌优先的层级；克制的动效。不要 hero card，不要过大的圆角。
- 默认做响应式；收尾前先在预览里验证桌面端和移动端。

• 把设计规则写下来: 把你的 tokens、基础元件和约定放进 `.cursor/rules` 或 `AGENTS.md`，并让 Cursor 指向它们，这样产出会贴合品牌、而不是退回到泛泛的样子。
• 让提示保持小而聚焦: Cursor 的紧凑回路偏爱聚焦的请求——一次只迭代一个组件或一种状态，每一轮之间都盯着预览看。

从预览到 UI 的工作流

用 Cursor 做设计，杠杆最高的回路就是把一张参考变成能跑、且响应式的 UI，并在编辑器里一直盯着实时预览迭代到匹配为止——而不是靠猜。

1. 从你手上最清晰的视觉参考开始——并且要包含多种状态（桌面与移动、hover、空态、加载态），而不只是一张主视觉。
2. 提示要具体；含糊的提示只会产出泛泛的 UI。
3. 准备好设计系统，并告诉 Cursor tokens 和标准基础元件都在哪里。
4. 让编辑器内置预览开着、dev server 跑着，这样每次编辑都能在你关心的断点上立刻渲染出来。
5. 通过把渲染出的 UI 和参考反复比对来迭代——小的视觉修正就直接在预览里选中元素来调。

把图片附到对话里来喂参考，然后用具体约束给出提示：

用 React + Vite + Tailwind + TypeScript 实现这个设计。
复用我已有的 design-system 组件和 tokens。
匹配间距、布局和层级；做成响应式。
预览一直开着——验证桌面端和移动端都和参考一致，
迭代到一致为止。

好的迭代就提交，坏的就回退（回退时告诉 Cursor 一声），让每一轮都建立在干净的基础上——这是让任何 agent 回路不跑偏的同一条纪律。

Cursor + Figma：经 MCP 的设计 ↔ 代码往返

Cursor 通过官方的 Figma MCP server 连接 Figma，让 agent 对一个实时 Figma 文件有结构化访问，而不是只拿到一张扁平截图。这就把交接里的猜测成分去掉了。

• 设计 → 代码: 在 Figma 里复制某个 frame 的链接，粘进 Cursor，让它去实现这个设计。MCP server 暴露的是真实的设计上下文——组件、变量、布局数据、tokens——所以生成的代码是贴合源文件的，而不是近似。
• 保持对齐: 只要在 Figma 里一致地使用设计 tokens、样式和组件（有 Code Connect 时用上），Cursor 的产出就会映射到你真实的设计系统，而不是重新发明一套基础元件。

远程 Figma MCP server 配一次，就能作为一等上下文供 Cursor 使用。由于 MCP 是开放标准，同一个 server 可以在 Cursor、Claude Code、Codex 和 VS Code 之间复用——这正是 Open Design 生来要去编排的那种可移植、多 agent 能力。

Cursor vs Codex vs Claude Code：做设计怎么选

做设计没有唯一赢家——每个 agent 各有所长，有经验的团队会把它们叠着用。一个公允的总结：

社区反复得出的结论是：审美来自人。三者在没有 skill、参考和约束时都会退回到一个泛泛的样子。那才是真正要解决的问题——而它是“设计工具”形状的，不是“模型”形状的。

常见坑，以及如何避开“AI 味”观感

对 Cursor 生成设计最常见的抱怨，是它看着很泛——柔和渐变、悬浮面板、过大的圆角、夸张阴影，一股“Inter 字体加紫色”的味道，“一看就是 AI 做的”。其他被反映的问题还包括移动端布局错乱、指令文字泄漏进 UI 文案里。

• 加一个设计 skill: 一个精选的审美 skill 会逼 Cursor 选定一个真实方向，而不是用默认那套。
• 用预览来验证: 在编辑器内置预览里跨断点渲染并自检，这样布局就不会在移动端悄悄崩掉。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图，是对产出质量影响最大的那个杠杆。
• 把规则写进 `.cursor/rules`: 把“不要 hero card、最多两种字体、品牌优先层级”这类规则，放在 agent 每次都会读到的地方。

注意到没有：每一条缓解措施都是在给 agent 一份精选的设计上下文。逐个项目、用手去维护这份上下文，正是 Open Design 帮你省掉的苦活。

在 Open Design 里用 Cursor 做设计

Open Design 就是上面这套工作流一直在要的那一层开源设计层。它把 Cursor 当作一等适配器，外面裹上一个精选的 skill 与 design-system 库、一条结构化的渲染流水线，以及一个本地桌面端 UI——让那份让 Cursor 变好用的设计上下文，从第一次运行就在那儿，而不是每次都手工拼。

1. 安装 Open Design，选 Cursor 作为你的 agent。
2. 用你的 Cursor 账号或你自己的模型密钥（BYOK）认证——凭证留在你的机器上，绝不经我们代理。
3. 挑一套设计系统和一个 skill，然后生成审美一致的演示稿、原型和落地页。
4. 每一份产物和 DESIGN.md 都存在你自己的 repo 里，而不是某个托管云。

同一个 Cursor agent、同一把密钥——外面再加一套真实、可移植、开源的设计工作流。它本地优先、Apache-2.0 授权，所以你的工作和凭证没有任何东西会离开你的机器。

常见问题

1. 01 Cursor 真的能做设计吗？ +

   能——只要上下文里有一个设计 skill、一套设计系统和真实参考图，Cursor 就能产出生产级、响应式的 UI，而它的编辑器内置预览让你能在视觉上验证并打磨。缺了这份上下文，它就容易退回到泛泛的样子，而这正是 Open Design 补齐的缺口。

2. 02 这是 Cursor 官方产品吗？ +

   不是。Open Design 是一个独立的开源项目，把 Cursor 作为 agent 集成进来。它用一个本地优先、开源的 skill 与 design-system 库来补充 Cursor。

3. 03 用 Cursor 做设计需要 Cursor 订阅吗？ +

   你可以用 Cursor 账号 / 订阅，也可以用自己的模型密钥（BYOK）。无论哪种方式，Open Design 都不会代理你的凭证——它们由你的 agent 直接使用。

4. 04 前端设计选 Cursor 还是 Claude Code？ +

   两者都很强。Claude Code 以具体、懂代码库的设计决策著称；Cursor 的优势是编辑器里“边写边看”的紧凑回路加实时预览。很多团队两个都用——Open Design 让你切换 agent 时无需改动设计工作流。

5. 05 怎么把 Cursor 连到 Figma？ +

   在 Cursor 里加上官方 Figma MCP server，然后把一个 Figma frame 链接粘进对话，让 Cursor 去实现它。该 server 暴露真实的组件、变量和布局数据，让生成的代码贴合源设计。

6. 06 怎么避开泛泛的“AI 味”观感？ +

   加一个设计 skill、提供真实的设计 tokens 和参考截图、把品牌规则写进 `.cursor/rules` 或 `AGENTS.md`，并在预览里跨断点验证。Open Design 把这些做成一个精选库，让你省掉逐项目的搭建。

7. 07 Open Design 和 Cursor 或 Anysphere 有关联吗？ +

   没有。Cursor 是 Anysphere 的产品；Open Design 是一个独立的开源项目，把它作为一等适配器来支持。Cursor 和 Anysphere 是 Anysphere, Inc. 的商标。

8. 08 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先。你的文件、产物和 DESIGN.md 都留在你自己的 repo 里，你的 Cursor 或模型凭证由你的 agent 直接使用，绝不经 Open Design 的服务器中转。