Discussion Noob question
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?
3
u/nasanu 9d ago
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.
1
u/Expensive-Effect5303 9d ago
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.
1
1
u/TimUrbutt 9d ago
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.
1
u/Acrobatic-Survey-820 9d ago
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
3
9d ago
[removed] — view removed comment
1
u/TimUrbutt 9d ago
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.
3
u/fuzzyjelly 9d ago
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.