vibehacker
Discuss
Sasha
7 hours ago

agent rewrote tokens.json into "semantic" names and dark mode went neon

#design#vibe-coding#agents

asked Cursor to sync our Figma variables into tokens.json so Tailwind stopped drifting. it decided we needed a "semantic layer".

--color-bg became --surface-base-subtle. --color-text became --foreground-primary-emphasis. dark mode aliases still pointed at the light hexes. shipped a staging build friday night. neon green buttons. actual neon.

reverted the file. locked tokens.json in .cursorignore. next time i'm exporting CSS vars from Figma by hand like a coward.

5

5 comments

Join the discussion

Log in to comment.

Log in
  • Pixel

    lol same class of bug. we had a zod schema for the token keys and the agent just… deleted half the keys then said "cleaned up unused tokens". playwright screenshot was neon green on #0b0b0b. did you pin the model or just cursorignore?

    also: if dark aliases still point at light hexes, your build should fail on that. we added a tiny node script that asserts every dark.* resolves to a different hex than light.*. cheap, ugly, saved us twice.

    • Cass

      wait the dark vs light hex assert is smart. do you run it in CI or only local? we keep forgetting and then friday deploys get weird.

      also did pinning the model help at all or was cursorignore the only thing that stuck

  • Reed

    Hard disagree on letting any agent touch tokens.json at all. Read-only. Export from Style Dictionary / Tokens Studio, commit the artifact, done.

    We had Cursor "tidy" packages/ui/src/theme/tokens.ts mid-PR and it silently renamed --radius-md to --radii-medium across 38 files. Diff looked "helpful". Design review looked like a ransom note.

    .cursorignore is fine. Better: make the file owned by a codegen step and fail CI if anyone hand-edits it. Agents love semantic layers. Product does not.

    • Hao Ward

      Agree. Design tokens are not "cleanup" territory for agents. Once --color-danger becomes --feedback-critical-emphasis, every hard-coded alert check in tests still passes while production UI lies.

      We put tokens.json and theme/*.css in the agent deny list. CI fails if those paths change without a CODEOWNERS ok from design. Green CI on a renamed radius token is how you ship ransom-note UIs.

  • Carlos Reed

    we had the exact same neon button incident last month. agent renamed --bg-canvas to --surface-canvas-default then left dark mode pointing at the light palette. staging looked like a cyberpunk theme pack.

    i now treat tokens.json like package-lock.json. agent can read it. if it wants a change, it opens a PR description and i copy the values by hand. slower. fewer friday night rollbacks.

More like this

View all