Using AI To generate Frontend UI

Hey guys and gals,

I've been trying to generate frontend using AI. Claude and codex mostly. However the outcome is still slop and I almost have 0 knowledge of how a frontend should be structured. It just keeps nesting, keeps making wrong offsets and does not align the content correctly.

I wanted to ask if anyone is using AI to put out professional looking frontends? What are your wisdom? Do you use a certain platform? Do you use certain prompts and negative prompts?

use figma mcp and also claude design.md prompt around those keywords

jeezabull said:

Hey guys and gals,

I've been trying to generate frontend using AI. Claude and codex mostly. However the outcome is still slop and I almost have 0 knowledge of how a frontend should be structured. It just keeps nesting, keeps making wrong offsets and does not align the content correctly.

I wanted to ask if anyone is using AI to put out professional looking frontends? What are your wisdom? Do you use a certain platform? Do you use certain prompts and negative prompts?

Click to expand...

AI tool are useful, but the output quality depend on your proces. start with a proper design system, components, nd layout plan before asking ai to code the frontend.

I usually start with Claude Design (even on plugins) and then, once i have what i want and design everything i need, i push that design through Claude Code, the results are great so far. In Claude Design you al also paste screenshots of things you like and that way you can have a bit more original design and not the first thing claude decides.

Base44, Lovelebly

milles said:

AI tool are useful, but the output quality depend on your proces. start with a proper design system, components, nd layout plan before asking ai to code the frontend.

Click to expand...

Thanks for the recommendations.

seoargentina said:

I usually start with Claude Design (even on plugins) and then, once i have what i want and design everything i need, i push that design through Claude Code, the results are great so far. In Claude Design you al also paste screenshots of things you like and that way you can have a bit more original design and not the first thing claude decides.

Click to expand...

I'll try feeding it what I like and have it come up with a similar design.

Brigada88 said:

Base44, Lovelebly

Click to expand...

The issue is same with these, if you are generic it just spits out the same design over and over again and you become another brick on the wall.

jeezabull said:

Hey guys and gals,

I've been trying to generate frontend using AI. Claude and codex mostly. However the outcome is still slop and I almost have 0 knowledge of how a frontend should be structured. It just keeps nesting, keeps making wrong offsets and does not align the content correctly.

I wanted to ask if anyone is using AI to put out professional looking frontends? What are your wisdom? Do you use a certain platform? Do you use certain prompts and negative prompts?

Click to expand...

I use base44 to create some apps for me but I have a bit of coding knowledge, not much. If you want to utilise such services freely you need to learn coding.

May be try out Google Stitch. I have used it in a few projects and it works pretty well. You can generate design variations, color schemes etc too.

Nikolaos said:

I use base44 to create some apps for me but I have a bit of coding knowledge, not much. If you want to utilise such services freely you need to learn coding.

Click to expand...

Gogol said:

May be try out Google Stitch. I have used it in a few projects and it works pretty well. You can generate design variations, color schemes etc too.

Click to expand...

Thank you for your suggestions, I've used google stitch for a while back but did not get a usable result, maybe if I connect it to figma and finetune there with their ai it may work better

Yes, it's doable, but not through prompt wording. With nothing to obey, the model invents the layout fresh each time, which is the drift you're seeing.

We had a card render with no styling because the model invented a class name from the label instead of copying the one the existing cards used. The name looked plausible. There was just no CSS behind it. Now a script reads the live page, finds an element with the same label, and copies its classes verbatim, refusing to run without a match.

The wording that works: point it at a block that already looks right and tell it to reuse those exact class names verbatim, and to stop rather than guess if it can't find a match. If you have no system yet, pick a component library or a fixed spacing scale so pixel values are off the table.

You can't judge new markup without frontend knowledge, but you can check whether something was copied or invented. Look at each component in the browser as it lands. Don't let the model name anything. Make it copy what already renders right.

Best,
Floqal

Your own diagnosis contains the fix: you said you have close to zero knowledge of how a frontend should be structured, and that is the actual constraint rather than the model or the platform. These tools do not fail at CSS, they fail at unspecified decisions, so when nothing in the prompt pins down spacing, hierarchy or nesting depth, the model invents a fresh answer per component and you get exactly what you describe, endless wrappers and misaligned offsets. What fixes it is giving it a constraint system instead of a description. Define a spacing scale up front, four, eight, sixteen, twenty four, thirty two, and forbid arbitrary values. Give it a hard nesting limit. Name your layout primitives, a stack for vertical rhythm, a cluster for horizontal grouping, and make it compose from those rather than inventing a new flex container each time.

yeah i think ai works better when you know basic frontend structure and give clear instructions use examples and improve the code step by step instead of generating everything at once.