Cursor 怎么用图片提需求？添加截图、限定区域并验证修改

用截图向 Cursor 提需求，关键不是“把图发过去”，而是同时交代图片身份、页面状态、修改范围和验收办法。图片适合表达布局、层级、颜色和错误现场，却不能自动说明接口数据、点击后的状态变化或精确尺寸。把这些文字信息补齐，Agent 才能从“看起来像”走到“改对组件并能复核”。

先选合适的图片输入方式

普通截图适合设计稿对照、报错截图和跨应用参考。Cursor 官方提示词文档说明，可以把图片拖进聊天输入框，也可以从剪贴板粘贴。若页面已经在 Agents Window 的浏览器中运行，可使用 Design Mode 选择元素、框选区域或在冻结画面上标注；它会把元素身份与截图一起交给 Agent，更适合定位前端组件。两种方式都需要你用文字说明目标，图片本身不是完整需求。

提交前准备一份可复现的现场

先裁剪掉无关与敏感区域，保留目标元素，并记录截图对应的页面 URL、视口宽高和操作步骤。

• 图片身份：写明“当前错误”“目标稿”或“参考风格”，不要让 Agent 自己猜。
• 页面状态：记录登录状态、测试账号角色、测试数据以及弹窗是否打开。涉及真实账号时应改用脱敏数据。
• 视口条件：至少写下宽度和高度；响应式问题还应准备一个正常尺寸和一个异常尺寸。
• 边界：指出哪些文字、交互、接口与公共组件不得改变，并说明项目实际使用的测试或构建命令。

如果使用 Design Mode，官方文档给出的入口位于 Agents Window 的浏览器中；可以单选或多选元素，也可以用 Shift 拖动框选区域。快捷键会随系统不同而变化，操作时以当前 Cursor 界面显示为准。

可直接复制的需求模板

图片 1 是当前错误，页面为 /settings/profile，视口 1440×900。
图片 2 是目标稿，只参考头像区的间距和按钮对齐，不照搬字体。

请先完成三件事：
1. 定位实际渲染该区域的组件、样式和现有设计变量；
2. 说明根因，并列出准备修改的文件，不要先写代码；
3. 保持上传接口、键盘操作、移动端布局和其他设置项不变。

我确认计划后再修改。完成后运行项目已有的相关测试，
并告诉我如何在 1440×900 与 390×844 两个视口复核。

把图片拖入聊天输入框，文字中标注“这是目标稿”或“这是当前错误”。随后让 Agent 先找现有组件和设计变量，再描述准备怎样调整。计划中如果出现新建重复组件、修改接口或大范围重写，应先暂停并缩小范围。

按顺序完成一次视觉修改

1. 附图并编号：多张图片写成“图 1、图 2”，逐张说明用途。报错截图还要把可复制的错误文本单独贴出，避免字符识别错误。
2. 限定目标：明确是改间距、换行、颜色、边框还是组件排列；对“更高级”“更好看”这类主观要求补充可观察标准。
3. 要求先定位：让 Agent 返回组件路径、样式来源和相关状态。若它找不到数据来源，不要让它从截图虚构字段。
4. 审查计划：核对要改的文件是否确实服务于该区域，是否复用现有 token、组件和响应式规则。
5. 小步修改：一次只解决一个视觉问题，查看 diff 后再处理下一项。这样出现偏差时容易回退。
6. 重现原状态：使用同一测试数据、路由、视口和交互步骤重新截图，避免拿不同状态作比较。

怎样验证修改已经兑现

验收要用同一页面状态和视口做前后对照，同时确认代码复用了现有组件与设计变量。

若画面仍不一致，先区分是字体文件、浏览器缩放、测试数据、视口还是 CSS 导致。只改变一个条件后再截图；不要连续追加“再像一点”而不指出具体偏差。若视觉正确但按钮行为错误，应回到交互和数据流排查，而不是继续调整样式。

失败分支与适用边界

• Agent 改错文件：撤销该步，让它只解释元素与源文件的对应关系，再重新确认范围。
• 图片信息冲突：指定哪张是最终标准，并把可量化的间距、断点和文本优先级写出来。
• Design Mode 选不中元素：改用截图加路由、组件名和浏览器检查信息，不要凭猜测继续。
• 只在你的电脑正常：核对字体、缩放、系统渲染和依赖版本，并让团队在相同测试条件下复核。

截图可能包含账号、密钥或客户数据；上传前必须脱敏，且视觉相似不代表业务逻辑正确。

相关问答

一次可以提交多张截图吗？

可以。每张编号并写明“现状、目标、错误证据或参考”的身份，再指出哪些部分需要共同比较。若图片太多，按一个组件或一个页面状态分批处理，能减少上下文混淆。

截图能代替设计标注吗？

不能完全代替。截图能表达空间关系，关键尺寸、断点、交互状态、可访问性和数据规则仍需要文字或现有设计系统提供。对于正在运行的前端，Design Mode 能补充元素和代码信息，但最终仍要用测试与 diff 验证。

资料与适用范围

本文根据 2026 年 10 月 1 日核验的 Cursor 提示词与图片输入官方文档、Design Mode 官方文档 整理。示例流程未在你的设备、账号或仓库中实测，界面、方案、权限和项目命令应以当前环境为准。