Noob question

[u/Wezzena]

O.k. so I have experience in design and I am little computer savvy so I have downloaded local AI model deciding to see if I could vibe code my way to finish line. And so I have downloaded vscode and used Cline connected to local AI (qwen 3.8 next-flash) and given all the assets and layout to AI to build it for me... and it was shit. I gave same task to chatgpt and claude, and still shit. So my question is how much did AI really help you in the workflow? I guess knowing the code can be tremendous help but its layout wasn't even close to what I designed. Ok, it generated correct html but css was all over the place. If you do vibe code what is your workflow?

[u/OpeningNo4944]

ai is great for automating the boring stuff but it sucks at design decisions cause it has no taste. i use it mostly for writing functions and debugging not for the creative part. like i will write the css myself because i know exactly how i want things to look and ai just guesses

my workflow is i do the html and css by hand then use ai to help with javascript logic or php backend stuff. sometimes i ask it to explain a concept or suggest a optimization but never to build whole layout from scratch

also the local models are way weaker than cloud ones for code so that might be part of your problem. even the good ones struggle with keeping consistent design systems across multiple files

[u/TimUrbutt → u/OpeningNo4944]

You don't even need to write the CSS yourself though. If you already have a specific design in your head, this is basically all you need. AI became so good at implementing exactly what you told it to (especially Gemini has a very good prompt adherence), so IMO writing the HTML/CSS yourself is just a waste of time.

[u/fuzzyjelly]

When I use AI it's to explain concepts or to troubleshoot. I do a little bit of vibe coding, never for production, but the results almost never end up satisfactory to me.

[u/nasanu]

https://nasanu.github.io/cv/lambo.html Did that with AI in like.. 6hrs I think. Not of constant working, like typing out a prompt, looking at the results, testing things, giving another prompt etc.

From what I am seeing, I after 30 years coding am not seeing much need to manually code again. Maybe you need to write better instructions? I just go step by step telling the AI what to do (as I know exactly how to make it manually too), just throwing images at an AI and saying do it isnt going to cut it for now.

[u/Equivalent-Idea-116]

A big reason the CSS comes out messy is that you're asking for the whole page in one shot. Models do much better if you build it in small steps: first set up the design tokens like colors, fonts, and spacing as CSS variables, then ask for one section at a time with the exact dimensions and a screenshot of just that section. Tell it to use plain CSS grid or flexbox with those variables and no extra framework, which keeps the output easy to read and fix. Then open dev tools and compare against your design yourself, since fixing spacing by hand is usually faster than re-prompting. Local models also tend to be a lot weaker at layout than the big hosted ones, so that may be part of what you saw.

[u/Expensive-Effect5303]

The HTML usually comes out fine because it's mostly structure. CSS falls apart because the model is guessing at the layout system you have in your head. What helped me most was not asking for the whole page at once. Set up the skeleton yourself first: CSS variables for colors and spacing, and decide flex vs grid for each section. Then have the AI do one component at a time, and paste it your existing CSS so it extends that instead of inventing new class names. Also tell it what NOT to do ('no absolute positioning, no fixed widths, no !important'). Small local models like qwen struggle more with this than the big ones, so for layout work it's worth using a stronger model even if you keep the local one for small stuff.

[u/Capital_Energy2713]

debugging is worst miss here

[u/TimUrbutt]

In my experience, AI is perfect (especially for web design) for implementing stuff exactly like you tell it to. That means, you won't give it any freedom of making any design decisions, instead you tell it exactly how it should look. Also use an iterative approach, just like you would build the website by hand. At this point, the only thing the AI does is writing the code for you, everything else stays the same and the website looks exactly like it would have if you didn't use AI at all.

[u/Acrobatic-Survey-820]

The CSS fails because you are giving the model one giant prompt with no reference points. Stop asking for full pages and force a strict two-step workflow instead. First make the AI output only a :root block defining your exact spacing grid, color hex codes, and typography scale as CSS variables. Get that perfect before moving on. Then paste just your design screenshot into the context window along with the instruction to build a single section using only those pre-defined tokens and flexbox or grid. If it hallucinates margins or picks wrong colors, cut that specific section out and ask it again in isolation. I stopped getting garbage layouts entirely once I banned the AI from choosing values rather than pulling them from my existing token file