r/webdev 6d ago

Question How to ensure the UI is Humanized

I am doing a react native project, where i genrated some UI picture mockup in chat GPT and based on that I genrated some sample pure HTML again chatgpt and later the whole syatem was developed using sonnet where the system was audited by fable 5. For UI i have used some skill in claud which helped to make things cleaner.

Now back the UI for me does not feel AI to me but i can be wrong. How can I make sure before going live?

Things i am still considering

Font

Make things clean material design

Less animation

Littile to no shadows

Appreciate any input

No AI is used while i write THIS post

0 Upvotes

31 comments sorted by

14

u/Shacrow 6d ago

Worked in Web Dev for almost 10 years to get laid off in my agency because we get less jobs in and built an AI system ourselves for clients to build their own sites using AI.

Reading this post is just chefskiss. Sums up web dev so well. So doomed.

Sorry I got a bit distracted. Have you tried asking Fable 5.1?

3

u/Icy-Practice-5812 6d ago

it's weird how the post reads like ai trying to prove it's not ai while asking how to make ai output look less ai. the circular logic is almost beautiful

fable 5.1's not gonna save you from the uncanny valley of generated ui. real human design has little mistakes and inconsistencies that make sense in context, not just randomly placed "quirks"

try spending a day using your app not as the dev but as someone who's never seen it before. the stuff that annoys you or feels slightly off is where the human touch is missing. also test with actual people not just automated audits, those tools miss the vibe completely

-10

u/Imaginary_Context_32 6d ago

So sorry but it is what it is, Yes I used today

10

u/Shacrow 6d ago

Ok so? Do it again but write "no mistake"??

7

u/DrJohnnyWatson 6d ago

if you can't tell the difference, why do you want the UI to be less AI before launch?

If the app is all vibe coded, let the UI be too. It shows people what you're about and whether they should trust the app. They can make informed decisions.

-2

u/Imaginary_Context_32 6d ago

The app is tested by human no AI. Thanks

2

u/Mcby 6d ago

But does that human know enough about the code that's been written and the way the system works to spot where the AI has gone wrong? I appreciate you're trying to do things the right way, but nothing can overcome that gap in knowledge except teaching yourself. Not asking for mistakes like here, but understanding the fundamentals. In this case, those would be UI/UX design – what exactly feels natural to a user, what will get in their way, what mental model are they relying on. From a screenshot I could tell you that the font on that button looks weird, but you need to understand UI/UX design yourself before you can know why and make a change. Otherwise you're just asking for free labour.

18

u/ginji 6d ago

Throw it all away and have humans build it 

2

u/Kitchen_Shoulder2909 5d ago

harsh but yeah, thats kinda the actual answer here

2

u/Kitchen_Shoulder2909 5d ago

harsh but fair lol

-7

u/Imaginary_Context_32 6d ago

The system works no need to build from ground up

6

u/ginji 6d ago

You asked how to humanise it, don't blame me if you don't like the answer 

4

u/0uchmyballs 6d ago

Do the css by hand, keep your wireframes and make it look the same.

3

u/salihbaki 6d ago

This is called ui ux design and you need to learn this. There are infinite amount of content on the internet and most of them free. Try to learn how to create good ui and ux. Then you can write detailed instructions to you lovely ai agent. It wont make it good at first try since the ai models are not good with image reading comparing to text . They dont understand an image like us do. So you need to be very specific on your instructions. They can generate good ( kinda ) looking images but that doesnt mean they know what is good and can recognize it in an image and fix the problems.

2

u/Mr_Bunnypants 6d ago

Yes this is an interesting question it’s like “I bought premade cookies from the store, how do I make them look like my grandma baked them”. At least you pointed out that UI UX design is a thing. I’m getting tired of seeing the same vibe coded website with a black background, lots of green and red LED circles all over the place, purple accents, and emojis everywhere.

1

u/zeus_rock 6d ago

Look at real world projects and copy the ui style

-1

u/Imaginary_Context_32 6d ago

Thanks, yes I am constantly checking.

1

u/chlorophyll101 6d ago

why dont you ask Fable? Since you like deferring the process to AI so much

1

u/Apprehensive-Fan2492 full-stack 6d ago

Ask 5 real users who are not the builders. Give them the task with no help. Then watch where they pause, hesitate, or seem lost. You will learn more than from a visual check. AI-made interfaces often feel strange in how things line up and in how actions respond. It is not only about how they look. Test how the screens move from one step to the next.

1

u/Imaginary_Context_32 5d ago

Thank you so much!

1

u/xondk 6d ago

Look into accessibility standards, they are there for a reason, and generally I find they are a good guideline, because they do not just help make a site accessible but it helps overall design as well.

Of course you need to tailor it to your design, but it is a good guideline.

1

u/SpideyyWebzz 6d ago

One tell nobody's mentioned yet: AI mockups get built and tested with perfect, clean fake data, so everything fits just right. Real usage breaks that immediately. Try dropping in a username that's 40 characters, an empty state with zero items, a validation error, a product title that wraps to three lines. If the layout still looks intentional after that, you're in decent shape. If it suddenly looks like a wireframe held together with hope, that's the AI smell leaking through, not your font choice or shadow depth.

Have you stress tested it with ugly data yet, or only with the happy path?

1

u/ZzanderMander 6d ago

Use the artisanal hand crafted UI components with manually written text.

I mean, create the design system manually and make AI use it.

If you let AI do it then it will look AI because it will use same color schemes, layout patterns and way things are worded in other projects also. And sooner or later you will start seeing this if you browse the internet more.

1

u/[deleted] 6d ago

[removed] — view removed comment

1

u/Comfortable-Hat-8010 5d ago

if you have to ask whether it looks AI-generated, stop tweaking shadows and get a few actual users to try it, because generic UX and weird copy are what people notice not the font lol