2 min lesson
Paste a Figma file link straight into the prompt
Answer this: "You're prototyping a dashboard in Cursor and your team uses Figma as the source of truth. How do you keep Cursor's output on-spec, and how do you get a finished component back to the designers?"
Step 1 of 3
Inbound: pull the design system intokens, type, color: not a guess
Paste a Figma file link straight into the prompt: "use the design system at this link to inform the design of my dashboard, make any relevant color and typography changes." Cursor's Figma MCPModel Context Protocol. A standard that lets an AI agent pull in context from outside the repo, like Jira tickets or internal docs. Press Enter for the full definition. (Model Context Protocol) reads the tokens, typography, colors and variable definitions, screenshots the frames and applies them to the live code. The point of feeding it the real file is that it stops Cursor from hallucinating its own icons, kerning and padding and quietly rebuilding your design system from scratch.
Learn more
Full explanation
Prototype by clicking the rendered UI
Prototype by clicking the rendered UIDesign Mode + @browser
Type @browser in a prompt and Cursor runs your built app in a pane inside the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition.. There's a Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. button in that pane: toggle it on, click any div in the running app, and that element plus a screenshot is handed to the agent as context. Then you just describe the change ("make this font 3x as big and bright red") and Cursor edits the code and re-renders live. Command+L adds an element to context, so you can select several divs at once and describe multiple changes in one prompt; Cursor identifies the distinct components and edits each.
It's a very quick way to prototype and rapidly iterate without having to go in, find the div and hand-edit the CSS. You change the UI by pointing at it, the way you'd mark up a screenshot.
The browser pane isn't just for looking. Ask the agent to take control and test interactions ("test that the category slider works, take control and make sure it works") and Cursor will scroll, click and drag sliders on its own. That in-browser agent QA is how a lot of folks actually do QA at Cursor.