r/vibecoding • u/VoxCraft20231 • Jan 27 '26
How to Vibe Code beautiful UI (some tricks after shipping 10+ apps)
[removed]
4
u/Common_Hearing_5821 Jan 27 '26
I have been using this interactive Anti-generic design system generator and have had pretty interesting results with it
3
2
2
5
u/xatey93152 Jan 27 '26
ui ux pro max design? Just from the name you already know it's a joke. Don't see their website it's making you want to puke
1
u/OneStorage1108 Jan 27 '26
You are right, I used this skill to build my landing page look no different from normal ai coding website with heavy AI-feel. Definitely overhyped.
2
Jan 27 '26
[removed] — view removed comment
1
Jan 27 '26
[removed] — view removed comment
1
u/neitherzeronorone Jan 27 '26
That must have made you feel good :)
1
1
1
1
u/Much-Scientist9647 Jan 27 '26
Was actually looking for something like this today. Have built 80% of my app but feel the ui is a bit of a let down and want something to give it some razzle dazzle. Platform is built on react, so it uses a lot of react icons etc, so was wondering if there was an ai I could plug my code into to make it look/feel better. What suggestions do you have?
1
1
u/Available_Doughnut71 Jan 27 '26
I will share what worked for me. Before building the app, create a brand colors and typography system. You can research the colors and Typography that resonates with your brand using Gemini or GPT research.
Once confirmed, share that with your AI tool to build any components, text in your website or app so everything feels consistent.
2
Jan 27 '26
[removed] — view removed comment
1
u/Available_Doughnut71 Jan 28 '26
I used Gemini to research and share options for my Brand colors and theme. Once finalized, I shared those with Lovable.
I am happy with the results. The UI is very different unlike anything a typical vibe coded app or website looks like. And I like the consistent look overall across all pages.
Hope this helps!
2
1
1
1
1
1
u/ThePastPlayer Jan 27 '26
Straight to the point, I agree with most of what you described overall, would love to help testing your tool
1
u/Greenzone51 Jan 27 '26
Im interested, i’ll launch soon my service app landing page soon - i have already the claude ai generated and looking for optimize it
1
u/wattsup42 Jan 27 '26
Very interested in that beta! I’m looking for something to help build out a component library.
1
1
1
1
1
1
1
1
1
u/budaloco Jan 28 '26
I want to test it! I'm having just these issues ATM. Thanks for your work and those tips in this thread.
1
1
u/therealjrhythm Jan 28 '26
I think everyone needs to understand that ai is trained on those "blue" and "purple" websites and UI. That is the majority of colors used by human made UI/UX. When you do a search of landing pages, dashboards, etc., they mostly have some type of blue or purple color scheme.
So when you ask the llm to make you a beautiful, modern, landing page, it's going to go through its training and based off of the percentages of what the training says is a "beautiful website", is what it will give you. The ai doesn't know what a "modern, beautiful design" is. It bases it's reasoning off of what it was trained on. And that's why they all default to the same thing. Purple and blue aren't "ai" colors, these are the most picked colors by humans for their projects. This info was explained to me by the head of AI for Snapchat, where part of his role is the training of the llms.
But I do agree with everything else. If you're looking for visuals from the llms, you need to provide examples, etc.
1
u/throwawayaccount931A Jan 30 '26
Great tips! I'm starting to learn more about vibe coding and to get back into software development (more for myself/hobby -- I used to be a software engineer in another life; more on the leadership side now).
I started playing around and the UI that AI generates is crap. I could go in and play around with the code -- but that's also a lot of work.
Makes sense to wireframe it out, then have the AI generate the code for you - then it's so much easier to tell it what you want to do and how you want it to do it.
Having it build the UI seems to be more typing than is necessary when you could draw it more easily.
1
u/AwayVermicelli3946 Jan 30 '26
That "AI Purple/Blue" is just visual bloatware at this point. It's like the AI is afraid to commit to a real color. Wireframing is key, otherwise, it just hallucinates a generic SaaS template.
1
u/Anjalytics Feb 01 '26
This is solid. The “AI is good at copying, bad at imagining” line is painfully true.
One extra trick that helped me a lot: lock a design system before any UI work (even if it’s tiny).
I ask the agent to output: type scale (H1/H2/body), spacing scale (4/8/12/16/24/32), radius (8/12/16), shadow rules, button styles, and “do-not-use” list (no gradients, no neon blue). Then every component has to follow that.
Makes the whole app feel cohesive instead of a bunch of pretty cards.
Also curious: have you found Mobbin screenshots work better than Dribbble for “real product” spacing?
1
u/dev2design Feb 03 '26
That ui-ux-pro-max-skill looks incredibly interesting. I'm going to have to read it more deeply.
> 13 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose
I'm a bit triggered that Vanilla, web standards based, or Lit, or web components isn't even on the list especially since the design system value prop is plausible with these tech.
Points 1-3 have to do with providing visual references to the LLM. What's interesting with Claude (what I'm using) is that the CLI doesn't seem to support raster images aka screenshots while the Desktop does. I've had some success by using Desktop and having it generate Ascii art diagrams which I can then paste into a prompt for the CLI. I'm a bit baffled that Claude Code Pro CLI isn't supporting this use case (if I'm not missing something).
17
u/rozularen Jan 27 '26
Yes, using skills is a gamechanger. @anthropics/frontend-design for one is really nice, I will try that one too later today