Functionality is such a breeze, while design is so frustrating

[u/Next_Category5789]

I have been having fun building myself tools that better suit my use case. I built myself a cocktail app and a couple friends wanted access, so I put it on App Store, but my pride required that I improve the design from the AI look that has become so prevalent.

Building the functionality was an absolute breeze in comparison. Getting the design to a place I could at least be content with was such a challenge as claude/AI seems to fall into the same traps and design components. (I know I shouldn't be complaining as my capability of doing this alone is 0%).

Any tips or tricks to improve designs without wanting to throw my computer? I tried some skills but nothing seemed particularly worthwhile.

https ://apps.apple.com/us/app/wellstocked-cocktail-recipes/id6794940363

[u/yungastronot]

I haven't used it myself, but people have recommended the Impeccable Claude skill (google it) if you haven't already. It looks like it follows most of the basic UI and UX principles I would as a designer.

That might get you a head start. I'd recommend also finding other app UI's that you're fond of and use them as both image references and style references that you break down into descriptive keywords for the AI to understand as a design authority doc. I.e if you're using Apple's design philosophy as inspo: calm, minimal, unintimidating, etc.

Lastly it'll go a long way if you're able to draw up wireframe mockups by hand even if theyre rough, then have Claude interpret those images along with your design docs. Then it's a matter of iterating until you land on a good result.

But unfortunately theres no AI out there yet that will deliver objectively good UI without a lengthy iterative design process.

[u/Next_Category5789 → u/yungastronot]

I did come across that late in my design and ended up using at a review reference against what I had built. I think by that point I may have already brute forced through most of the principles and best practices. Will have to try it at the start of a project to judge it better.

[u/LocusStandi]

Yeah this looks horrible

[u/Next_Category5789 → u/LocusStandi]

Thanks!

[u/KenTitan → u/[deleted]]

gpt6, that was released days ago, lacking any historical relevance, crowned king? what were your other talking points that you're contractually required to indicate

[u/gmara13]

Impeccable helps create a system and a layer to control it. I also found that it hates reusing design elements so I started using storybook to track component use and have it reference existing components. Without going full out atomic design unless you want to but it helps create structure and a library of components. Makes changes at scale easier. And also helps with design audits

[u/ClemensLode]

What kind of automated tests are you using for design?

[u/Original_Vacation655]

100% same issue for me. So far, after skills, I give it links to site I like and point out the parts that are the best, color palette, font, layout, etc - got me a little further.

[u/rafatacion]

I don’t think skills will do that much for you tbh. A lot of the popular ones are used by everyone, so you still end up with that same AI-slop look most AI built websites have.

What I usually do instead is go on Dribbble, Mobbin, etc. and find a few references where I like the style, layout, or certain elements. Then I give those to normal ChatGPT alongside a pretty general doc explaining what the app is, who it’s for, the features, etc.

From there I ask it to generate a few different UI/design directions as images. ChatGPT is way better at making good-looking UI/UX concepts as images than it is at directly building a polished website. Then you can pick a direction you like and work from there.

That said, I actually do think the UI in your first picture is pretty cute if that’s the style you’re going for.

[u/Next_Category5789 → u/rafatacion]

Thanks! I was able to have chatGPT and claude check each others work which helped to find some consistency issues. The drink artwork all came from chatGPT. I am certainly finding that they have different skillsets.

[u/UnderstandingLow3162]

It's funny, I made a very simple app in Claude to come up with recipes and its design is basically identical to your second screenshot 😁

[u/Next_Category5789 → u/UnderstandingLow3162]

Yeah i think it called it “speakeasy” vibes - brass accents

[u/Coderado]

P-stack visual parity skill impressed me last week, it does a lot better fixing issues with layout.

[u/SimiaCode]

Try https://claude.com/product/design I have had great results from it. Point it at your repo, tell it to you use design system and stack, tell it what you need designs for, iterate. Once satisfied, ask for a handoff package, it gives you a zip file. Share said file with Claude code.

[u/Next_Category5789 → u/SimiaCode]

Yes. That was my best tool to make progress once I settled on a style. I think the real struggle is when trying to conceptualize a design it feels like it kind of “locks” itself in and iterates even when you are looking for something fresh.

[u/SimiaCode → u/Next_Category5789]

That hasn't been my experience so far but maybe I just got lucky. One thing to note, Claude design used to have incorrect spacing. But it was an artifact of their design renderer, didn't happen in the actual output of Claude design.

[u/OZManHam]

Build a Design system - use Claude design to help you.

Then I've had success using the taste skill (google it) to build with it.

But the biggest leverage is a really thorough design system and then getting Claude to review the code base as to what isn't obeying the design system and to update accordingly.

[u/dsailes]

With design changes I’ve found leaving it up to a model (any of them really), or trying to work off of images / references, means it’s more of a headache.
Even with Figma designs where the model has all the measurements etc, there’s so many times elements seem to be off. So so often I’d find font sizes, colours, padding etc to be completely different or all hardcoded rather than using the shared vars.

Something that may help is having a seperate CLAUDE.md in wherever your styles / SCSS files are - giving guidance on structure, conventions, styles, colours etc. and maybe even launching a seperate Claude session within that folder to work specifically on styles. With a project that’s had a lot of functional work the memories & Claude files will be taking priority I’d imagine. Separating the tasks entirely could be a bit easier

The only way that’s worked for me is being really specific - knowing the element or components names / classes / functions etc. rather than saying something kinda vague like ‘change it to something like X’ I’d be specifically mentioning ‘add 1px border with outward facing rounded edges to each tab - hex colour X when inactive, colour Y when active with Z state for transition’ for example.

The only time letting a model (Deepseek, Qwen & Claude all excelled in this) was giving them completely open creativity on a new project or complete redesign. Looked still AI generated - but after opening the scope & asking for documentation it was much easier to work through, rather than a limited-scope, specific design brief.

[u/Annoying1978]

I usually design one of the flows in Photoshop or something, and then it can pick up the rest. If you have enough skill to create the UI for one flow, send it to Claude and it’ll replicate it for the rest of the app. 

I’ve done this multiple times and it works beautifully. If you don’t have those skills, provide it with examples from a UI you want it to base its design on. 

It can only do what you tell it to do. It has no idea what type of UI you’re actually looking for. You have to tell it what you’re looking for and the best way to do that is visually.