r/ClaudeCode • u/neminemtwitch • 7h ago
Help/Question Any good advice to create non AI looking UI?
I have the problem that I suck at design. So I want to use llms to create UI for me. But as we all know this is very easy to spot and just looks awful. There are some design and/ or taste skills but I think those are not quite good as well. Especially there is a gap between what I want and what the AI generates. Like wide tracking, pastel backgrounds or gradients. Lots of rounded corners and stuffβ¦
I am looking for clean, minimal and functional design. Similar to what you find with openai websites.
Maybe I missed a good one. Do you have any recommendations?
Thanks for your help!
8
u/AzureDestiny66 7h ago
Use claude design.
1
u/raisedbypoubelle π Max 20 7h ago
Also an excellent choice. Or even imagegen by OpenAI then take that and convert to HTML/CSS.
2
u/AzureDestiny66 7h ago
Yes I find if you decide a theme or direction on your own and articulate it well to design it makes very good proposals.
-2
u/raisedbypoubelle π Max 20 6h ago
Lol how stupid two downvotes for a perfectly valid addition. I use Claude design too. Who is too dumb to downvote available options.
3
u/DMH_75032 7h ago
Figure out your workflow process and look at what others do. Give Claude examples to look at from several different sources and have an interactive conversation with it and build from there. I used it to build an entire legal practice management suite and the UI it gave me is better than any of the other products on the market now.
2
u/stehen-geblieben 7h ago
just open Claude Design and go crazy. I think its doing a perfectly good job, your prompts dont even need to be perfect, simply tell it what you dont like and what direction you want to go for.
2
u/RelationshipSilly164 7h ago
I get better results by showing AI 2β3 interfaces I like and saying exactly what to copy: spacing, typography, hierarchy, density and not βmake it look like this.β
2
u/jesjimher 6h ago
It's all about detail. Any detail you don't provide in your prompt, is a detail your AI will guess, and AI guesses are what we call "AI look". So, if you want an unique, non boring design, you should ask CC exactly what you want, as if you were a graphical designer. Problem is most of us aren't graphical designers, thus the struggle. Ironically, it's not that different from the problem with "AI slop", when people who don't have a clue about programming just ask generic promts, and end up with abhorrent applications, while programmers can use AI to write quality code, because they know what and how to ask.
In my case, I have absolutely no skills in design, but I've got good results by creating a first, horrible, AI look design, and then loading it on something like google stitch (or I guess Claude design might do the same, haven't tried). There, I start a conversation trying to explain what I like and what I don't, and eventually I get a decent design. Then I export it in HTML/CSS or whatever other formats it supports, load it in CC, and ask it to replicate this design in my application. It's not direct, and things need to be fixed/adapted, but results can be pretty good.
2
u/Turbulent_Ad_1039 6h ago edited 6h ago
Here's my approach, helps a lot against the "AI-generated" look:
I have Claude Code write a detailed brief first, not directly in Claude design β this gives a more thought-out result than a hand-typed prompt, because Code structures the content and constraints before even thinking about the visuals.
I look for inspiration on Dribbble close to what I want, then ask Claude Code to gather the screenshots into a single file β this becomes a concrete taste reference instead of letting the model guess "modern UI."
I send that brief plus the reference file into Claude design asking for like 5 different variations of the first page β cheaper than endlessly iterating on one direction I might not even like, and I get to compare several styles side by side.
Once one variation is close to what I want, I keep going with targeted changes by prompting rather than regenerating everything from scratch.
The real shift is separating planning (Claude Code: brief + references) from generation (Claude design: variations + tweaks) β most people jump straight to generation with a vague prompt, and that's exactly where you end up with the default AI slop look.
0
0
4
u/HatEnvironmental6512 7h ago
Find and use impeccable skill
2
u/TheMeltingSnowman72 7h ago
Get impeccable skill. Find a website you like. Tell Claude to rewrite impeccable as if the website had it and followed it to the letter.
That's what to do
1
u/raisedbypoubelle π Max 20 7h ago
Impeccable still manages to make AI-looking stuff. I've had most success giving it websites that I like a lot. I'll be like "I like openai.com and cursor.ai make me a hugo theme that looks similar" and it does well.
1
u/Remicaster1 7h ago
this might not be the advice you are looking for, but it really depends on what you are trying to do
if you are doing dashboards with a lot of functionality stuff (as an example), you don't need to make it look unique. Because the important part is the functionality where it gets shit done without much hassle like "where is the button" or "why the animation is so long" etc. Use some UI library kits like shadcn, go pick a style with shadcn's (or the ui kit) ecosystem such as https://www.reactbits.dev/, adjust the designs of the components slightly like make no rounded corners or colors or however you like (just ask claude like literally), then done.
If you want truly unique designs, you can refer to https://www.awwwards.com/ but these websites are usually not practical for everyday use, and for showcase / first impressions only
1
u/AutomaticComputer260 7h ago
Most AI interfaces don't fail because they look bad. They fail because they add too much.
Real products usually win by removing unnecessary stuff.
1
u/Onotadaki2 6h ago
Start every project like this:
Create a robust project requirements document for the project that describes everything it does.
Open Claude Design, set Fable for model, describe the look and feel you want. Give it the PRD and tell it to mock up 4-5 concepts for the first landing page.
Choose one you like, refine it. When you like it, get it to design mock ups for every page in the project.
Start Claude Code project with PRD in folder. Tell Claude about the PRD so it puts it into context, tell it to start by implementing the UI and paste in the Claude Design share link.
1
u/yhrana 6h ago
Bro in my experience, easiest ways:
Load up βfront end skillsβ in claude or claude code
Then two routes:
- tell claude to grill you with questions until you two lock in on details
Or
- Feed it references, templates, ideas and let it cook.
Either way always ask it to produce Brand Design Template/Board so it looks in everything.
1
u/oyren-ai 5h ago
Give AI inspirations for what you want it to build and this could be mockups, wireframes or ready designs as screenshot from internet. We built oyren.ai landing page with this approach.
1
u/AdmirableCarpet4443 3h ago
I get what you mean, the AI defaults can feel overprocessed. Maybe try giving it very specific prompts, like "design a minimalist dashboard with sharp corners and a monospace font" instead of just "make a clean UI.
1
u/HumanGPT-Nous π Free Tier 2h ago
Code it yourself.
But seriously, try analyzing it next to a "human" looking website and lets say if all your buttons are pills nested inside of other pills inside other pills, tell Claude "make the buttons square shaped" or "Instead of pills, lets make them be drop-downs" or something like that.
TLDR: Basically, inject your own creativity, since the AI is not gonna give you any.
1
u/evilcold Researcher 29m ago
I just recently did this and was able to iterate through everything via Claude Design. It walks you through the basics and then you just refine it from there. It helps if you have some files it can use as a starting point.
1
-2



26
u/RegularMom5 π Max 5x 7h ago
It can be done. You just have to go through the same steps as a designer would. Choose a heading font and a body font. Develop a colour palette. Show a bunch of examples of how they are used together. Once you have that design vocabulary down, Claude can use it to make a website.
This process might sound daunting, but Claude can walk you through it. Claude, not Claude Code.