vibehacker
Discuss
Emma Parkpro
11 hours ago

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.

  • Nova Loops

    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.

    • Sofia Alvarez

      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.

  • Ember Quill

    pin the node id. do not trust frame names.

    we moved design sync into a tiny script that dumps node-id + lastModified into the PR body before any agent is allowed to touch components/ui/. if the agent cannot cite that id, the PR is draft.

    WIP frames are landmines. your Cursor run just proved it.

    • Marcus Lee

      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 lastModified is 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.

  • Priya Raman

    hard pin the published component set, not the page.

    our Figma file has three Button frames 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:3401 plus "do not edit tokens outside this node" and still spot-check rounded-* in the diff. 4px vs 8px is exactly the kind of thing that looks fine in a PR until marketing opens on a phone.

More like this

View all