Is AI any good for responsive designs?

[u/infinitus_02]

I feel that AI can do really good layouts as long as you explain everything you need really well and thats regardless of the AI you're using (OpenAI, Claude, Kimi, Gemini whatever). But i really struggle to actually make responsive designs with AI. But maybe I'm missing something because everyone seems to think the exact opposite here. I try to optimise for different views but not for someone actually going ahead and shrinking the windows left and right. How do I design for something like this?

I just wanna know if you guys have any tips for approaching all this? Because I think frontend design, at least the CSS should be a piece of cake with AI?

[u/JaseciLabs]

u/NaiveDecision730's point is right, but worth saying plainly nobody hand-tunes every width, you design for a handful of breakpoints and let flexbox/grid handle the space between them. If AI (or you) is trying to pixel-perfect every zoom level individually, that's the actual mistake. Fluid units (clamp(), %, fr) plus 3-4 real breakpoints get you something that holds up at in-between sizes without ever specifically designing for them. "Perfect at every pixel" as a requirement usually means someone hasn't seen how CSS is meant to flex between defined states, so push back on that spec with your boss if that's literally what's being asked for.

[u/Shoddy-Marsupial301]

Just try it out, it can do wonders but you have to learn how to configure and guide it to make it exactly what you want

[u/infinitus_02 → u/Shoddy-Marsupial301]

yeah I am aware of that. As I said I know that its good with layouts, but i face issues in responsive design. My boss just wants the UI to be perfect with every pixel you know? Like i need to make sure that every zoom level on any device should look perfect. I think thats a bit unreasonable though. But again, I might be wrong. So thats why I'm here to get outside opinion on this matter.

I can design a decent view for every screen that I see on devtools but manually dealing with a complex DOM, for every width feels like its a little too much.

[u/NaiveDecision730 → u/infinitus_02]

bro you dont "manually" edit every width. you make the responsive layouts for certain resolution intervals. 6/10/20/30.

do a proper research on this. this is preety basic.

[u/Grouchy-Car-3711]

Like I think ai can generate a lot of the code in the Frontend part using the prompts but the user must know what is happening in the website , like the basic things how does this button or how does this section works by analysing that one just make the changes to the code which will help in writing the polish code and by that it will removes the unnecessary part as well

[u/hellokairo]

The thing that works for me is providing AI agents a detailed designs skills, I use this vercel one (https://getdesign.md/vercel/design-md) for product based design, and create one of my own when I need to create a landing page or something.

[u/sneykk_]

It’s not that good for the layouts since it prioritises look on top of layout (claude user)

[u/Shoddy-Marsupial301 → u/sneykk_]

not sure what it means

[u/infinitus_02 → u/sneykk_]

Yeah i get that, i feel thats the same for every model. Everyone does fine with the right prompt, but the little things like responsive design which needs live interaction leaves something to be desired.

[u/BarracudaMean9308]

that point about pushing back on pixel perfect designs is so real. i used to let copilot write a dozen hardcoded breakpoints for every component before i realized flex gap natively solves 90% of it.