How do you keep AI from changing parts of the UI you didn’t ask it to touch?
by•
One thing I find tricky about vibe coding as a product designer is keeping changes focused.
Let’s say I want to adjust a specific interaction or improve one part of a screen.
AI might make the requested change, but also modify the layout, spacing, or components around it.
The result isn’t necessarily worse. Sometimes it even looks better.
But that’s not really the point. I wanted to change one thing, not reconsider the entire screen.
It gets especially tricky when those surrounding elements are already part of an established design system.
I’m curious how other people handle this.
Do you give AI very specific boundaries before making UI changes, or do you let it make broader changes and review the result afterward?
30 views
Replies
Back when we used to comps, in Photoshop and slice image assets by hand you didn’t have to worry about some random action wiping out your padding. It was slow and annoying no doubt.. Now we’ve got machines generating frontend code in seconds.. Yet I end up spending twice as much time tracking down those accidental margin overwrites. It’s like we traded one kind of pain for another.
I would name the interaction that may change and require a separate proposal before editing a shared component or spacing token
Compare before and after screenshots at the same width, including another screen that uses that component. A small local fix can otherwise change every screen that shares it
Two things work for me. First, the design system lives in code the agent can't route around: every colour comes from one palette, every spacing value from one dimensions class, every text style from one typography class, and the rules file says no raw values in screens. Then the agent has nothing to "improve" with, it can only pick from what already exists. Second, I name the boundary in the request, "change only the button row in this file, nothing else", and I review the diff, not the screenshot. A diff that touches ten files for a one line ask is my signal to roll back and ask again. Is your design system in code already, or mostly in Figma for now?
I struggled with the same thing early on, but after using Claude Code for a while it's mostly gone now. Honestly I can't tell if that's because the models got better or because my harness got more complete. Which LLM are you using, by the way?
One thing that helps me as a solo maker: keep a short 'do not touch' list of the shared pieces (spacing scale, shared components) and name the single component you want changed in each request. Then I skim the diff for anything outside that scope before accepting, so the extra 'improvements' are easy to spot and revert.