延伸阅读
Cursor 延伸阅读
已发布指南中列出的、使用 Cursor 进行设计的教程、文档和演练。
Cursor 
OpenDesign 用 Cursor
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Cursor 设计界面：用 Design Mode 在真实代码上进行可视化编辑，以 Figma 作为输入，一个从 brief 到经过评审的文件的定价页任务，以及开始前需要了解的限制。
从 brief 到界面01 / Cursor
您带来想法↗
“一个可以在设计模式中调整，
而非在 CSS 中调整的定价页面。”
一个完整的 Cursor 设计任务
一个 Cursor 设计任务：从 brief 到界面
一个完整呈现始末的任务：你交付的 brief 与约束条件、返回的产物，以及完成前仍需进行的检查。下方界面是为本页制作的示意性示例，并非 Cursor 实际运行的记录。
1设计 Brief 与约束条件
Brief为一款开发者工具设计定价页，包含三种方案和月付／年付切换。将中间方案保留为推荐方案，并让对比一目了然。桌面端与手机端均需覆盖。
- 设计系统现有应用 token；Albert Sans 字体，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互计费切换开关、方案 CTA 状态、FAQ 链接、切换开关上的键盘焦点
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Cursor 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Cursor
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Cursor 产物：1440px 和 390px 下的定价页面
4交付前审查
Layout
网格与间距
三栏等宽，基于 8px 网格；推荐方案通过边框凸显，而非尺寸。
Hierarchy
视觉层级
先价格，再方案名称，再功能；强调色仅用于一个徽标和一个主按钮。
Responsive
移动端布局
方案纵向堆叠，推荐方案排在最前；切换开关始终固定在顶部可触达。
Interaction
交互检查
切换计费开关，用 Tab 键依次到达各 CTA，并打开一个常见问题链接。
Fit
Cursor 适用与不适用的场景
Cursor 适用于
- 设计模式。点击、绘制或用语音描述 UI 变更，Cursor 即可编辑源代码——由真实代码支撑的可视化编辑。
- Figma → 代码。Figma MCP 服务器将真实的布局和 token 提供给 Cursor，使其基于设计而非截图进行构建。
- 双向 Figma。部分 MCP 让 Cursor 能以编程方式读取并修改 Figma 设计，而不仅仅是使用它们。
- 设计到代码的循环。常见模式：在可视化工具中起草，导入 Cursor，再由 Agent 进行完善和扩展。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您没有此 Agent 所需的凭据。需要：Cursor 账户（使用您自己的服务商密钥）。OpenDesign 不提供也不代理凭据。
- 您的团队使用 Claude Code 或 Antigravity 工作。这些 Agent 有各自的页面；工作区相同，设置有所不同。参见相关 Agent。
兼容性
使用 Cursor 前的要求
本指南涉及通过 OpenDesign 桌面应用连接的 Cursor。已发布参考资料的核对日期为 2026 年 9 月 6 日。
工具范围Cursor，由 Cursor 出品
Cursor 是一款基于 VS Code 打造的 AI 优先代码编辑器，内置可在整个项目中进行编辑的 Agent。本页介绍如何通过 OpenDesign 使用 Cursor 设计界面，而非 Cursor 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证Cursor 账户（使用你自己的服务商密钥）
Cursor 账户（使用你自己的服务商密钥）。Cursor 使用你自己的服务商密钥——不会通过 OpenDesign 代理。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
在下载页面查看桌面版本。源码快速入门中的 Node.js 与 pnpm 要求仅适用于从源码运行，不适用于安装桌面版软件包。最低兼容的 Cursor 版本：此处未验证。
连接检查成功的标志
按照你所安装版本显示的连接说明操作，然后运行一个小任务。确认 Cursor 已处理该任务，且产物可以打开。仅完成下载并不代表连接已建立。
从桌面应用开始
三步完成 Cursor 设置
先下载，再针对你安装的版本完成 Cursor 设置，然后检查一个小结果。你无需从源码构建 OpenDesign 即可完成此流程。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备您的 Cursor 连接
按照您已安装版本中的 Cursor 说明操作。Cursor 使用您自己的服务商密钥——不会通过 OpenDesign 代理。
# .cursor/rules/design.mdc --- description: Project design conventions alwaysApply: true --- - Reuse existing design-system tokens and components; never hardcode hex or spacing. - At most two typefaces and one accent color. - Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners. - Build responsive by default; verify desktop and mobile in the preview before finishing.摘自已发布指南中的 Cursor 设置说明；请查阅厂商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Cursor 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Cursor 设计工作流
五步完成 Cursor 设计工作流
同一个定价页任务，从 brief 到验证文件的完整过程。每个步骤列出您提供的内容、Cursor 完成的工作、OpenDesign 贡献的部分，以及您需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Cursor读取 brief 和项目的说明文件；遇到不明确之处会提出询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Cursor在编写任何一行代码之前，先将 DESIGN.md 的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Cursor 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子（hooks）。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Cursor规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件并修复出错之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Cursor阅读您对预览的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Cursor就地应用更改，并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Cursor 设计资源
限制
Cursor 的局限性、人工检查与后备方案
- 范围本页面介绍作为连接到 OpenDesign 的 Agent 的 Cursor，并非涵盖 Cursor 的所有功能。
- 使用限额使用限额和费用取决于您使用的凭证（Cursor 账户（使用您自己的服务商密钥））。本页面对免费额度不作任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。与 Figma 之间的往返需通过 Cursor 自身的 Figma 集成完成。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Cursor 与 OpenDesign 的常见问题
Cursor 真的能做设计工作吗？
可以——在上下文中提供 skill、设计系统和真实的参考图片后，Cursor 能生成生产级质量的响应式 UI，其编辑器内预览功能可让你直观地验证与调整。若缺少这些上下文，它往往会默认输出通用外观，而这正是 OpenDesign 所填补的空白。
这是官方 Cursor 产品吗？
不是。OpenDesign 是一个独立的开源项目，将 Cursor 作为 Agent 集成其中。它以本地优先、开放的 skill 与设计系统库对 Cursor 进行补充。
用 Cursor 设计需要 Cursor 订阅吗？
你可以使用 Cursor 账户 / 订阅，也可以携带自己的模型密钥（BYOK）。无论哪种方式，OpenDesign 都不会代理你的凭据——它们直接由你的 Agent 使用。
前端设计该用 Cursor 还是 Claude Code？
两者都很强大。Claude Code 以做出具体且了解代码库的设计决策而知名；Cursor 的优势在于编辑器内紧密的“构建—查看”循环与实时预览。许多团队会同时使用两者——OpenDesign 让你在不改变设计工作流的前提下切换 Agent。
如何将 Cursor 连接到 Figma？
在 Cursor 中添加官方 Figma MCP 服务器，然后将 Figma frame 链接粘贴到聊天中，让 Cursor 实现它。该服务器会暴露真实的组件、变量和布局数据，使生成的代码与源设计保持一致。
用 Cursor 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。