how do you prevent ai tools from constantly breaking responsive layout designs?

by•

​I have been using automated coding tools to push quick layout updates, but every time i ask for a small desktop tweak, it silently breaks mobile responsiveness or alters existing padding. ending up with unexpected flexbox overlaps or messed up grid classes after every prompt iteration slows down the whole prototyping vibe.

​for anyone building full-stack frontends with ai, How do you scope your layout prompts so it only touches the exact component without ruining rest of the page CSS?

27 views

Add a comment

Replies

Best

the prompt never held for me.. what did was naming the one file it may touch, then checking the diff touched only that file. and i look at the page at phone width before accepting anything, the css diff looked fine every time it broke. is it editing the component itself or a shared class the whole page uses?

For us the fix wasn't the prompt. It's a rule that nothing gets reported as done until it's been checked on the real screen, and Playwright makes that cheap enough to do every time. The diff can look fine and the page still be broken.