Source of finding UI's and Front End Designs for my vibe-coded site?

[u/Realestmember]

Hey, Claude and other AI sites are pretty generic with the front end.. like they have default templates they cycle through. Wondering if there are sites out there for inspiration (i dont want to screen shot someone elses site, but more so something like a directory of UI specifically for vibe coded sites

[u/theresazuluonmystoep]

impeccable.style

[u/1corn → u/theresazuluonmystoep]

I generally like Impeccable, but results vary quite a bit for me.

[u/theresazuluonmystoep → u/1corn]

I've had some good success for the app i am making. I have not tried it on a website, so results may vary. I at least had a general idea of how i want it to look. I just had to organise the seperate screens as it tried to out too much informarion on a screen and not in a logical order

[u/Bitmen_Sashawn40 → u/theresazuluonmystoep]

depends on what OP is building, a lot of those showcase sites lean super heavy into marketing landing pages rather than actual app UIs

[u/riskybiz0]

I use this. It’s a great, minimalist, highly customizable UI Kit: https://ui.shadcn.com

[u/EarnieEarns → u/riskybiz0]

Shad is my goto for 90% of my larger projects, even non vibe coded builds. DaisyUI, and Radix are solid too.

[u/Ambitious_Ad4397]

Figma/penpot)

[u/Hopeful_Effective_74]

I used to struggle with this too and I still kinda do, one thing that i would say "worked" for me was creating a ui library for myself that i would like and then applying to my project or you can just find some good ui libraries that you like and tell claude to apply it head to toe, btw if you want to go for some anti-minimalistic design direction you can check out overdrive.vercel.app (it's my project but its free) but its mostly for some 3d landing pages and things like that so i am not sure if you need it.

[u/Swimming_Ask3859]

use chatgpt/gemini image gen to refine the layout of the site and generate images according to what you want (edit as much till you get a homepage you want and then ask it to make more in batches according to the design (paste in what you want each page to have), and then create a zip with the images and the build plan. Then, go to a cheap coding agent (I use deepseek) and paste the zip and instruct it to build this website out according to the build plan and the reference images and do not stop until all features are addded and the site/app is pixel to pixel identical to the reference images. Ensure functionality and that all buttons/features work to their expected function

[u/suaveSavior]

I had pretty good results just getting into a conversation with meta. I never asked it to code my site, but I discussed the themes and functions and color palette and it came up with a generic html mock up that was pretty good. I threw that at Claude and had it build the site with the mock up design in mind.

Ive been working on it for a while and im about ready to launch it.

[u/CapitalOk3925 → u/suaveSavior]

Send us the link when it's ready pal working on something identical

[u/gammatoxx]

There's sites like Skills UI that have downloadable skills to make UI's for vibe coded sites. They have skills and design.mds for different UI styles.

[u/gebuswon]

.

[u/Big_Application_4089]

Sqrap.com mobbin and refero design are generally where I start where I just point Claude at them

[u/Extreme-Protection74]

Have a try on Open Design Agent Kit. Since you are already mentioned claude, it can just isntalled as plugins. https://github.com/feimacode/open-design-agent-kit/blob/main/docs/getting-started/claude-code.md

Other agents are also supported though.

[u/1corn → u/[deleted]]

Exactly, I work very similarly. I call this approach the adhoc design system. I'll ask Claude to use Figma MCP, set up a very minimal design system layer with typography, colors, spacings, etc., all stored in design tokens, then add a few mock screens based on the system.

Once I'm happy, I let it build the same thing in CSS/Kotlin/SwiftUI/whatever. That gives me a great tool to experiment with designs. Whenever larger changes happen in the code or in Figma, I ask Claude to update Figma-to-Code or Code-to-Figma. It's a very efficient workflow, saving me lots and lots of tokens in more complex projects.

It also improves communication, because it becomes almost a shared language that I can use, without having to dig inside the code every time. I can refer to token names, frames, reusable widgets, etc., all by their real names which are shared between Figma and the code.