I've tried AI tools for UI work, including browser-based debugging, but the results still have inconsistent buttons, unfinished links and elements clipped by their containers or the viewport. The backend work seems more promising. Is there a better way to guide the UI work, or are these just common limits?
Are AI tools just bad at building UIs, or am I using them wrong?
Asked by
fewer_tabs_today
Answers
Give the tool a component library and a few explicit rules instead of asking it to invent the whole visual language. Something like shadcn or Bootstrap can provide a consistent starting point for buttons, forms and spacing.
A short style document helps too. Specify which components to use, how variants should work and what the layout should do at different viewport sizes. An open-ended prompt leaves a lot of room for inconsistent shortcuts.
Reply to this answer
Try separating functionality from appearance. Get the links, controls and basic layout working first, then do a styling pass. Asking for both at once can make it harder to tell whether a change fixed the behavior or just made it look nicer.
fewer_tabs_today:
That sounds easier to review than trying to fix the links and visual inconsistencies in the same pass.
Reply to this answer
Some of this may be more obvious in a UI because you can see a mismatched button or clipped panel immediately. Inconsistent implementation and shortcuts can happen elsewhere too, but they aren't always as visible on the surface.
Reply to this answer
Browser debugging is useful, but it doesn't replace reviewing the result. Check the generated CSS for duplication and maintainability, test links and controls, and inspect the layout at different viewport sizes. A page can look close to finished while still needing a fair bit of cleanup.
Knowing enough CSS and web development to spot and correct those problems makes the tool much more useful. Treat the output as a draft, not proof that the interface is done.
Reply to this answer
Visual references may help if the generic look is the main frustration. Give the tool a concrete example of the style you're after, then spell out which features matter. Otherwise you may still have to steer lots of small details, which can get expensive in time and usage limits.
Reply to this answer
Add your answer
Answers are reviewed before publication.
tally!ho~maybe+:
Existing examples in the project can help as well. Ask it to follow a working component rather than making a new version of the same pattern.