Skip to lesson
Exit
Edit a running page with design mode1 / 2

2 min lesson

Prepare the Design Mode edit

Select three pricing cards, change their shared styling once and check the result at 1440 and 390 pixels.

Step 1 of 2

Open /pricing at 1440 pixels in 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. browser and turn on 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.. Use multi-select for the Basic, Pro and Enterprise cards because the change concerns their relationship. Confirm that the selection identifies all three PricingCard instances and includes a screenshot of the misaligned state. Ask Agent to align their top edges and use the shared padding token without a private translate, fixed height or one-off margin. Inspect the diff before another visual edit starts. After hot reload, check the three cards at 1440 pixels and again at 390 pixels. Keep the badge position, heading wrap, stacked gap and shared padding with the handoff.

Edit the cart on the running page

0:21 · narrated
Read this demo as text
  1. Browser already has the cart open. Visual work starts from the running page beside the agent.
  2. Ask to align Apply with SAVE10 on that page. The answer names the Coupon card you can see — not a guess from typecheck.
This reconstruction shows Agent grounding a cart edit in the running page. The practice below uses the current Design Mode selection controls.

Practice next: Open /pricing, select the three related cards and describe the alignment between them.

Simulated Cursor 3.12 (macOS, light) — beta educational reconstruction, not the real product.