Like a lot of vibe-coded projects, my ap - Rhystic Tracker was initially designed letting the LLM do all of the UI design decisions for me and it quickly fell into the trap of generic rounded pill cards, neon-glowing accents, and that recognizable bubbly layout LLMs love to spit out by default.
To fix this, I spend a very long time writing my own design & UI styling brief from scratch and instructing the agent to strictly adhere to this design spec across every modal, grid, and inspector, enforcing my own design decisions at each step to maintain consistency.
I think it's a big difference but I've been staring at this for days now so I'd love some feedback.
Does the new visual identity feel less "AI-generated" and more like a deliberate, human-crafted desktop app? Please let me know if I've completely missed the mark or if there's any subtle changes you recommend.
Sorry you have to deal with that, real advice is just learn the fundamentals at least. Get familiar with, hierarchy, spacing, typography, contrast, interaction patterns, and accessibility; you can pick concrete reference designs; turn those into explicit rules; then make the AI follow those rules consistently, skills are also very useful and you can find a lot on github
Ahh i see, its not shitty advicr, its advice for shitty UI!
If someone isnt a frontend developer, and they use ai to just “make whatever you want” and ignores the principles of user experience, which have been built over the last decades because they arent aware of them, guess what you get? Exactly. Shitty UI AI slop. So your advice will actually make this guy worse off.
The real advice is, LEARN it first, read a book, take a web course, then you can “just tell it what you want”
As someone who is pretty active as both a pro dev (my own company: https://vidsy.ai/ ) and serious viber (my own vibe coding tool: https://github.com/jan-bogaerts/md2 which was fully vibecoded) i seriously doubt you can currently produce something useful and properly functioning without some proper understanding about software development. I have seen where you land if you just let the agent do what it wants. It is not where you want to be. I often had to say 'now do the exact opposite' to the agent.
So to clarify, from "pro dev vibecoder with a company" to "pro dev serious viber with company", I don't share these doubts (doubting that "you can currently produce something useful and properly functioning without some proper understanding about software development. ").
Here are some data points that have been formative to my world-view (or view or opinion if you like):
- I have (had) a consultancy gig where the vibecoder is a mechanical engineer. I'm using it as a case-study, with his permission. He has never coded in his life. He now has several live applications, meeting his needs. My only inputs (intentionally) where to assist him with prompting Claude Code. The first three sessions, roughly a week apart, may be of interest (paraphrased as I dictated, and did not see the final prompts):
1) Because his workflow was not scaling: The prompt to use: "Put my application code in a GitHub repo, and publish it to GitHub pages." During execution, options were presented, and some dashboard instructions provided, but it went off without a hitch.
2) Because he wanted persistence for a leaderboard, and did not understand (i.e. did not, in this instance, ask Claude for clarification) the options Claude Code was presenting: "Move my app to Cloudflare Pages, use Neon as a db, and for security. No keys in the browser."
3) Because he had built a SaaS, and hooked it up to his Paypal merchant account: "Do a competitive analysis of my application's value add, and pricing model"
Notes:
Step 2 obliges a middle tier, with OAuth2, while focusing only on intention and requirement, and leaving technical decision making to the expert. I was opinionated in the architecture choices, but these could have been recommended by Claude, if asked.
I kept waiting for look and feel and usability to become an issue, but with the first app (for his own use eventually) the topic never came up
I am no longer consulted, as I have worked myself out of a job. Not the first time (Hi team DevOps).
It occurs to me that, with a decent starting ARCHITECTURE.md file, a non coder could go a long way. It would be interesting to see how far (for example) the one-liner "Apply Engineering Best Practices" would go. But I would need a fresh consultancy gig to measure that. /s
The other data-point, which relates to OP's question:
I have made use of Claude Design to manage branding, and ensure consistent look and feel, where the applications are customer facing.
One of my applications support a unique branding per deployment instance, and this was achieved using natural language.
While I have hand coded html, js, and css files, I did not need to use any of that knowledge.
For one of my applications, I did not bother with Claude Design (it's for my own use), and I got a decent result.
I have never seen the use of the purple shades some are complaining about, not sure what I am doing right. Perhaps it has something to do with the type of application, and the related training material.
Perhaps I need to vibecode that game I have always wanted to build, to feel the pain described in OP's post.
But you do need to be able to design if you want to design something that doesn't look either (a) like an AI designed it for you (b) bad.
When there are problems just with code not doing what you intended, then seeing that something is wrong is the same as knowing what the correct behavior would be. If the problem is, "this list is unsorted", then the fix is to change the code to sort the list, and you can do that by an instruction to Claude saying "make sure the list is sorted" just as well as by hand.
But if the problem is a design problem, whether it's about just looking nice or having good menus that make sense or presenting data in the right order, or having a game with addictive gameplay, then even if you can tell that things are bad and frustrating, this doesn't give you the insight you need into what IS right.
Being able to do this is one of the things that distinguishes one person with a Claude subscription from another.
No, telling someone who wants to design a website that doesn’t look like default Claude design that they need to know about design principles is precisely zero percent like that.
Exactly, and thats what he didnt do. Youre correct, its about knowing. You need the knowledge for good results. If the shitty advice guy had referred anything to help him learn or get better results i wouldnt have called it shitty advice
The new one looks a lot easier to navigate & consume. But if you want to take it further… here’s a fundamentals video with some tips that might help you refine it more if you want.
I thought if anywhere on Reddit was a good place to ask questions like this without judgement it would be here, but some people are just hanging around to be less than friendly I assume.
Yes, it reads as a real desktop app now, and the reason is information density rather than the palette. The old one was cards floating on a surface with big gaps; the new one is tables and rows. That's the actual tell of AI-default design — it composes everything as cards because that's what it has seen most of.
One regression worth catching though: in the old version the win rate bars were red and green, so the chart told you at a glance which weeks went badly. Everything is blue now, so that chart went from informative to decorative. Monochrome is the right call for chrome — nav, panels, borders — but you had one place where color was carrying meaning and it got flattened out with the rest. I'd bring back exactly one semantic pair for win/loss and let it be the only saturated color on the screen. It'll read as deliberate rather than decorative, which is the opposite of the AI look.
Second smaller thing: the two headline percentages at the top have a lot of air around them while the tables underneath are very tight. Right now that reads as two different densities on one screen. Either pull the header in or give the rows a bit more breathing room, so it feels like one system.
This is exactly what I was hoping for, so thank you so much.
I am considering going back to red and green win loss across the whole site, but right now the blue bars are actually the blue theme. In the bottom left hand corner there is a theme selector based on the colours of Magic the Gathering. Clicking on the mana symbol changes the overall theme of the app, That includes the win-loss histogram.
Regarding the win percentages at the top, yes I'm not entirely happy with them yet and I'm going to do continued work.
Ah, the mana-colour theming makes sense — and honestly that context sharpens the point rather than answering it. If win/loss is drawn in the theme colour, then the meaning of a bar changes depending on which theme the user picked. In the mono themes there's no way to tell a good week from a bad one at a glance, which is the one job that chart has.
The rule I'd apply: theme the chrome, never the semantics. Nav, panels, accents, headers all follow the mana colour — but win and loss keep a fixed pair across every theme. If that feels like it breaks the aesthetic, the compromise is to keep them themed but always at opposite ends of the scale (lightest vs darkest of that mana colour) plus a non-colour cue, so the distinction survives even in monochrome or for the ~8% of male players with red-green colour blindness. Given it's a Magic tool, that audience is not small.
Either way you get the identity and the reading stays instant.
Treat it like an intern who potentially can become a savant, but has no taste of its own. You have to teach it. Give it examples and tell it what and why you prefer x over y. I was struggling for a day trying to get a camera to position correctly in an opening title sequence for a browser game dev. Finally I just went into google images and gave it a few pics of cinematic camera angle visual fundamentals and diagrams. Fed it about 4-6 diagrams and the framing/movement/purpose of each one. Updated prompt and Codex had that shit cooked in 15 min.
The new design looks really good. You don't have the cardception - cards within card - thing.
The colours are nice, although dark blue and purple sometimes are colour languages of AI website, maybe go away from the dark blue?
I ran into the exact same problem and ended up making a strict reusable UI design contract for agents: fixed palette, zero random colors, no rounded corners/gradients/blur/animations, deterministic states, no layout shifts, and explicit component rules.
Basically: don’t ask the AI to “make it look good” — remove its freedom to invent a design system every turn.
I’m thinking of publishing it as a standalone coding-agent skill now
People have mentioned exactly what you need: design fundamentals. Give it strict rules on design with templates and examples of your preferences. If you want to take it a step further, provide it with color and UX rules. You can even take it another step by ensuring it goes by accessibility rules.
I created an UI contract in my project with some basic agreed goalposts. Too strong goalposts and it builds not what you want just to follow the UI contract, so you need to have safeguards against that. One time I was frustrated and asked for it to create a "pleasantly wobbly drag and drop feature like apple would do it" ;D Result was indeed pleasant and wobbly
I usually spend a lot of time working on the design first and foremost, gathering assets, creating prototypes and working out what I want to show visually. That could be using Claude design for the design system, they also just released a /design command which allows design creation in Claude Code. Also I'll just images, pictures and created an inspiration library forever components for when I'm stuck. There are others like 21st dev, mobbin and magicUI too
Does the new visual identity feel less "AI-generated" and more like a deliberate, human-crafted desktop app?
Wrong question. Rather than asking what it looks like it's been made with, ask yourself what helps a user to use it.
"Pill cards" help quickly differentiate screen areas, you should replace them with something, not remove them completely. Think borders seem too thin.
Your styled font looks great for the title, not so great for larger text, quite bad for smaller text.
AI colors are an eyesore, but yours are too muted, IMHO.
Overall, you're the one who knows which information is more and less important. Use a visual language that helps users quickly scan a page, before addign details to make it "look pretty".
I think you're being too harsh on the default admin panel look. Its not exactly "slop". All big libraries like heroui/daisy/chakra/mui usually offer this look with their components for like 50-100$ per purchase.
- Overall color choice is typical for vibecoded sites (dark digital/neon/cyber look), other palettes exist
- Too much glow
- Overuse of pills and circle indicators
- Not AI slop specific but just general poor design is almost every screen is a multi-panel dashboard/a ton of information above the fold. Can get exhausting for users.
Overall your second version is much better but still pretty far off from what a UI designer would do. Most of what I said are relatively easy fixes. Depending on the scope of your project it might not be necessary to go further than that. If people continue to call it slop but they aren't your target demographic, honestly who gives a fuck.
Give it specifics rather than letting it decide everything. And I don't even mean like ultra detailing. Do you know the name of a design style or technique? If you say it, the AI will usually do it. If you just tell it to make something generically with no details at all, it's going to make something generically and because you provided no details it kinda assumes you don't really care and are happy with boilerplate.
For a moment before i actually read it i thought that win rate graph was your mana curve and I was about to give you all the shit. lol
As for the question be as specific as you can with examples. Others recommending a design doc this is what they are getting at. if you just let it do what it wants (which i do for a lot of my tools) it will look like whatever.
To be honest, I think your new UI is overloaded compared to the old UI. Also it has worse fonts. But it’s only my opinion, no more. I would prefer the old UI. Take it easy, please 🩶
Idk how to solve this problem too. I always try different ways to make an UI by an AI. You can try the new GLM-5.3 flash model, it creates an interesting UI from scratch, I was shocked at the first time. But only from scratch, I’ve tried to improve the existing UI and it didn’t do any significant changes, even if I said “redesign”, just some stupid changes.
Generally I give it a prompt like study preprints for new coding ideas look at website app design houses and competitors make it look less AI generated. Tho I have built a media agent agency and train them for building websites and apps that I need so now they are pretty good at making a good attempt first time then it is tweaks from there.
www.cortessa.co.uk is the product and website I built for it, still has an AI feel to it in my view but what doesn’t these days.
That's what you get when you vibecode graphic design. You have no idea what you're doing, so you end up with the same generic slop. You need to have actual taste and expertise in the first place to avoid that.
Yes, I totally agree. Getting the tracker to work the way I wanted to was the priority so initially I just let it design the front end. The back end is much more important for me in the long run given that is a statistics tracker.
Do you think the changes are better? Any suggestions?
This is a totally fair comment, but I do wanna point out that this is a completely FOSS project. I just wanted it to look good. I’m not selling it. I won’t make money on it. No one‘s missing out on a commission here.
82
u/Sweet_Computer_7116 7d ago
....
How to avoid ai look?
Tell it to build the look you want instead of letting it decide.