2 min lesson
The app hot reloads with the cards aligned
Complete "The app hot reloads with the cards aligned". Check the final state against the lesson before you move on.
Check your understanding
Run this practice: Design Mode — align three mismatched cards without leaving the running app.
Outcome: The app hot reloads with the cards aligned; you confirm the selected group is what changed and the shared card component still reads consistently.
Design Mode — align three mismatched cards without leaving the running app
Browser in the Agents Window, Design Mode on
DoOpen the browser 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. and toggle 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. with ⌘Ctrl⇧D.
SayThe middle pricing card sits higher than the two beside it — easier to point at than to describe from the code.
DoShift-drag to select the area spanning all three cards so the agent sees the relationship, not one element in isolation.
SayAlign these three cards to the same top edge and match the middle card's padding.
SeeCursor attaches the elements' identity (xpath, component, computed styles and props) plus a screenshot of the current layout, then edits the source.
DoNarrate the next tweak by voice while that edit runs — the mic stays open — and queue it only because it extends the same alignment task.
SeeThe app hot reloads with the cards aligned; you confirm the selected group is what changed and the shared card component still reads consistently.
Learn more
Optional practice
Practice: The app hot reloads with the cards aligned
QYou've applied it. What actually proves the work is done, not just a plausible answer?