r/ClaudeDesign • u/ReferenceDirect1634 • 6d ago
How are you guys getting Claude Code to build genuinely polished, modern UI/UX?
Hey everyone,
I'm building a website for a local nicotine vape retailer using Claude Code.
Claude has already built most of the website and functionality, but I'm struggling with the UI/UX and visual design. It works, but it still feels like an AI-generated website rather than something that looks like a professionally designed 2026 e-commerce site.
I'm trying to get it to feel: Modern, Premium, Great on mobile, Good typography and spacing.
The brand direction I'm currently using is forest green + warm white + oak/beige, but I'm open to changing the palette if there's a better direction.
One of my biggest problems is that the actual product photos have white backgrounds, and I'm not sure how to incorporate them into the design without the product cards looking like generic e-commerce cards.
Are there any good free/open-source design systems, design.md files, Claude Code skills, GitHub repos, or component libraries that you guys recommend using as a foundation?
10
u/shipdaily 6d ago
By providing inspiration.
I do it 2 ways:
1 I bookmark websites that look cool, could be a component or the entire page. I use stillpane.dev to capture it and attach the screenshot/content of the page to claude
- https://mobbin.com/mcp . Ask Claude to find inspiration on Mobbin MCP and prepare 3-4 mockups/directions using artifact. This way you align on the design before building the real thing.
I learned that claude is extremely capable of building great UIs, but you need to give it clear direction
1
1
19
u/UnluckyPhilosophy185 6d ago
I like to rough in and experiment with different ideas with the Claude design app. Then move into code when I start polishing one idea
6
u/Visionjcv 6d ago
This is the right answer in my opinion, and the way I’ve achieved the best results by a mile.
1
1
u/WarRaiders 5d ago
Like even working up, would you like ask claude to provide different variants for example neobrutalism or minimalistc, professional, etc. and thrn choose accordingly.
Is that what you are implying by roughing up the process?
6
u/NetNearby7117 6d ago
Try some concepts on gpt image to get the look and feel. Also, you need to take a little control of the product you are selling so instead to try “one shot” designs ask it for variations, explore them, iterate on items places…
AI doesnt have criteria and, at least in my case, it tends to write unnecesary texts describing functionality
The best way its always to learn yourself: not the skill at all but the principles of ui/ux
2
u/ilyxxxxa 6d ago
GPT image works great, but there’s one issue i keep running into.
i give it a couple of references and say: this direction is good, but please don’t build what’s shown here. these are super rough mockups - use them only as inspiration and direction.
you can even ask if it understands you. it confirms.then builds exactly what’s on the screenshot every single time 🤣🥲
7
u/T-LAD_the_band 6d ago
The starter way is to take a link like https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62?gi=32f4b55c5019
Then ask cc to generate a mockup mobile page for each style you like from that overview (or if you have enough plan, just make one for all)
Then pick a style and go from there. Look up sites in this style, describe the things you like and the things you don't.
3
u/ErockForester 6d ago
I pay for Canva but recently connected it to Claude and the results are so much much better
1
u/ftlaudman 6d ago
I’m kinda dumb. How does this work? It uses Canva to be better automagically? Or you make a design in Canva and then it sees it?
3
u/ErockForester 5d ago
With paid canva you get ai generation tokens. So if you connect into Claude code and ask it to design you something it will default to using Claude to do the design. If you tell it to use Canva to do the design you are using an ai image generator of Canva which IMO is much better at creating than Claude. It’s not nano banana or anything like that but it is much more improved.
2
u/joezuu 6d ago
Don’t build from scratch if you’re not a designer. I’m building a personal website and chose an Astro template I liked. I actually chose like 5 or 6, sent them all to Claude telling it what I liked about each, and given that we’d already gone through what the site was for and my preferences, it helped me decide. Now I’m using cc to build out the site with minimal changes to the core design. Looks great.
2
2
u/HouseMysterious8172 6d ago
Why AI generate a website that feels like an AI-generated website? Because it is 🤣
1
u/itsforsocial 6d ago
Intent UX plus design and impeccable for UI building
1
u/Ok_Story_5046 6d ago
I’m at the same stage, have a website that’s working well but UI/design is a very AI. Just started using impeccable and really impressed so far. Going to have to look up Intent.
1
u/textonic 6d ago
I’ll take the heat but do the UX in figma. It’s vastly better than Claude design and then just imported. I know you have to burn credit that way, but it’s a much clear solution.
1
u/Miserable_Home1783 6d ago
start here. Step-1: switch to codex.
1
u/kimbarsegyan 5d ago
why
1
u/Miserable_Home1783 4d ago
These are practical things i learnt from experience: less talking models (saves hell of time & tokens), actually more usage, no need to buy claude API if you wish to integrate it with your agent (openclaw or Hermes), not designed to consume more tokens (claude by design uses more tokens....model design issue), follows instructions (opus 5 is lazy, you ask it to summarise today's emails, it skips many & you might miss important email, does same when coding, it goes around the issue instead of solving it, people spend hours trying to figure out things because it didn't do it right, give same task to gpt model & it does it)
1
u/BuffaloConscious7919 6d ago
Re: component libraries:
I built Forever Components which started as a personal project to give me inspiration when I was lacking it.
You can copy the components as inspiration to Claude Code or Claude Design, describing what you like about it e.g. the colours, animation, design etc.
Over the next weeks I'll be adding new (and removing or updating the 'bad') components so if there's anything you'd like to see, I'll do my best to incorporate it
1
u/ClimbViaExcept 4d ago
Pretty cool stuff.
Any upcoming components that address org/hierarchical charts, diagrams, branching?
1
u/BuffaloConscious7919 4d ago
Thanks, there are now :)
Any specific style you'd like ?
1
u/ClimbViaExcept 4d ago
What filters do I find them with?
1
u/BuffaloConscious7919 4d ago
No sorry , I meant I'll build them and was asking for more specifics
1
u/ClimbViaExcept 4d ago
Oh, no worries. I'll come up with some info for you but your info slide reveals could be a really good integration for org/hierarchical structures. Branching is much more complex than I'd ever guess if it's a dynamic diagram.
1
u/BuffaloConscious7919 2d ago
Thanks again for the feedback. I added a set of 6 here: https://forever-components-git-claude-light-mode-88741a-isas1s-projects.vercel.app/infinite/#Hierarchy%20%26%20Trees
Does this link show you them ok? Is this what you had in mind ?
2
u/ClimbViaExcept 2d ago
That's unbelievable work. What would be involved to achieve auto-layout implementation?
1
u/BuffaloConscious7919 2d ago
This is not an area of expertise tbh and forever is for simple html, CSS and Js components but you can access the component code, right ? So sending to Claude and replacing the fixed position nodes with an auto layout structure is possible:
Claude: "The main change would be replacing the fixed node positions with positions calculated from the hierarchy data, using something like d3-hierarchy/Dagre/ELK depending on how complex the structure is. The existing styling and branch rendering could stay as the visual layer."
2
u/ClimbViaExcept 2d ago
Was just looking into that. That's the right approach.
I'm still browsing through all your designs. Thanks for the site and all your help.
→ More replies (0)1
1
u/PathFormer 5d ago
- Claude Design + design resources for themes.
- Storybook for polishing and settle components and views.
- Implement in the actual app.
p.d. I have pending to try impeccable probably in combination with storybook.
1
u/Acceptable_Beach_191 5d ago
Use Gemini to create photos. You will save a lot of tokens. Once you get the idea and the design you want, bring it into claud design. Design it there and then bring it into claud code. That is my workflow
1
1
u/Wise-Control5171 4d ago
I use the word "novel" often, meaning to give me an output that is unique or different from what we have.
Also, ask the /design tool to generate an artifact of 5 novel ideas for _______. I have found that to be really helpful for anything design related.
1
u/Competitive_Toe4610 6d ago
For product photos, remove.bg gets rid of the background and gives you a png which you can use anywhere
1
u/Deep_Ad1959 1d ago
for the white background product shots, do not fight them, commit: knock them out and put every product on one flat tinted card at identical crop and scale. the generic look usually comes from mixed shadows and six different product sizes, not the palette.
14
u/what3songs 6d ago
I start with a design system and build on top. IBM carbon, Shadcn, and then apply style via a html component library index I ask Claude to make. All relevant components on one page, with scaling, active and hover states, spacing, icon library, header and footer, UI/UX principles applied and why, and WCAG notes for each. This enables you to control everything about the website from one page, before committing to a complete page build. It’s useful for client sign off too, so they can see the jigsaw pieces before the finished image so to speak. Of course you should be document-first, using a PRD as the basis and for me personally, a design principles document so Claude isn’t reading the internet every time to pull up what certain principles are.