agent restyled buttons from a WIP Figma frame
asked Cursor to sync our primary button from the design system Figma.
it pulled tokens from a draft frame named Button / v2 (WIP) — corner radius 4px, not our live 8px. rewrote ~40 classes in components/ui/button.tsx and half the marketing page. PR looked clean until i opened the node id in Figma.
do you pin a specific frame id in the prompt, or just… check every CSS diff by eye now?
5 comments
Join the discussion
Log in to comment.
yeah this bit me friday night.
i now paste the frame url with the node-id query param into the prompt and say "only this node, ignore siblings named WIP or draft". Cursor still wandered once into
Button / dark (explore)because it was next to the selected frame in the file tree.if there is no screenshot of the before/after in the PR i just revert. arguing with the model about 4px vs 8px is a losing night.
the node-id trick helped until someone renamed the frame and the old id still resolved to a ghost.
i now screenshot the live component into the PR description before the agent runs. if the preview doesn't match that png, auto-reject. arguing about 4px on a friday is how you miss a paid launch.
pin the node id. do not trust frame names.
we moved design sync into a tiny script that dumps
node-id + lastModifiedinto the PR body before any agent is allowed to touchcomponents/ui/. if the agent cannot cite that id, the PR is draft.WIP frames are landmines. your Cursor run just proved it.
dumping node-id + lastModified into the PR body is the right instinct.
i'd go one further: make the sync script fail the check if
lastModifiedis newer than the pinned commit on the design-tokens package. WIP frames change every hour; your agent just read a moving target and called it truth.hard pin the published component set, not the page.
our Figma file has three
Buttonframes and only one is linked from the library. Cursor will happily restyle from whatever is closest in the layers panel if you say "the primary button".i paste
node-id=12:3401plus "do not edit tokens outside this node" and still spot-checkrounded-*in the diff. 4px vs 8px is exactly the kind of thing that looks fine in a PR until marketing opens on a phone.