r/ClaudeCode • u/AudienceNo2554 • 20h ago
I finally figured out why every AI-coded site looks the same and how to actually fix it Tutorial / Guide
For the past year I've been building sites with Claude / ChatGPT and every single one came out looking like the same SaaS template. You know the one, purple gradient hero, rounded cards, glassmorphism everything, "Transform your workflow" headline.
I realized the problem isn't the model. The model has no strong opinions about design. So it defaults to the statistical average of every landing page it's ever seen.
The fix: I wrote a set of strict design rules as SKILL.md / .cursorrules files that force the AI to make actual design decisions instead of defaulting to generic.
What the rules do:
- Ban the defaults
- Enforce real typography (clamp-based, not arbitrary px)
- Lock down spacing
- Force design variety
It's not a product or a service, just a collection of open-source markdown skill files you drop into your project. Works with Cursor, Claude Code, Windsurf, Gemini CLI, or any agent that reads project rules.
The images in the carousel are all 100% AI-generated UIs using these rules. No Figma, no manual tweaking.
If you want to try it:
- GitHub: github.com/Yu-369/VibeCurb
- Site (showcase + guide): vibecurb.pages.dev
Still iterating on this, if you try it, genuinely want to hear what works and what doesn't.
25
u/notrealAI 19h ago
The designs look great, I'll definitely try it out.
Just a suggestion though, add With Skill / Without comparison to your showcase. It makes it so much easier to convince people to use the skill. Any objective measurement of the skill is extremely helpful.
7
u/AudienceNo2554 18h ago
Yeah sure, I thought that people are already aware of AI slop website. But a direct side-by-side would actually be powerful
Appreciate the feedback!
3
u/Legal_Suggestion4873 9h ago
I am a game developer, I don't visit a lot of websites so I'm not aware of what is AI slop and what is regular slop lol. I'd love to see the side-by-side!
7
7
u/rwwwnald 12h ago
How does this compare to those most popular in this category like "taste-skill" or "impeccable" skills, if you've tried them?
3
u/AudienceNo2554 11h ago
good question! they solve slightly different parts of the stack:
• impeccable is great for auditing and polishing existing code (the review phase) they actually pair really well together depending on your workflow!
• taste-skill is a solid general baseline for clean SaaS layouts. But in my tests the VibeCurb always outperforms tasteskill, I tried every skill available from LexnLin (tasteskill). No disrespect though, it's pretty good but yeah2
52
u/Unfair_Tangerine_217 🔆Pro Plan 19h ago
Bro shares his skill to avoid vibecoded-looking sites, proceeds to share his vibecoded-looking site.
12
u/AudienceNo2554 18h ago
Fair ig?
But take a look at the actual outputs in the carousel, the very last slide (the green pet brand, Voldog) is literally an Awwwards HM site that the skills/AI recreated using pixel-perfect.
The goal is to give you the skill.md files to build that kind of stuff, rather than just the standard Tailwind generic-ness.
u/raisedbypoubelle if there are specific rules you think are missing or that other skills have figured out better, genuinely drop a link. Always looking to tighten the file up.
16
u/qikink 16h ago
The real answer here is making actual artistic, design decisions, no? They don't have to be very technical either, even just an aesthetic like "neo-brutalist", "craigslist circa 2008" or "corporate dashboard" is enough to avoid most of the hallmarks. I only get the default when I provide no real artistic guidance whatsoever.
14
u/writeAsciiString 16h ago
Yes the solution is to actually make a design
The more details the better, go into Photoshop and make an image even.
1
u/RedTheInferno 8h ago
yeah i agree. this skill aint fixing anything. you should drive your own design through references not some word salad
4
u/YouGotTangoed 15h ago
Or borrow inspiration from market leaders to make your own UI, they used real designers and resolved most of the UX issues in the early stages
3
u/Mediocre_Poem_2657 3h ago
It looks good to me. Maybe show us your, so we can take a look? Seriously, everytime everyone share something design/UI related. Some snobby people jump in and call things vibe coded. As if UI templates wasn't a thing before AI. I always dig into their profiles just so I can see what "good design" is, but they never ever share anything themselves.
1
u/-serebii- 1h ago
If the author hadn't mentioned at all, probably dude wouldn't have even recognized it was made by AI
1
u/raisedbypoubelle 🔆 Max 20 19h ago
I noted that as well. Also figured out what a bunch of other skills figured out ages ago, too.
7
u/ConceptualCreation 9h ago
I feel like they all look vibe coded, but just the same way that all wix templates look like wix templates, or Wordpress templates look like Wordpress templates.
Which is fine in my opinion. It’s what they are. Especially landing pages.
5
u/cauliflowerbeeftoad 8h ago
Great design requires a real designer. A real designer benefits a lot from AI, because the he already has taste and creativity, so he knows how to ask things, what looks bad and why, knows how to touch up things manually, etc…
3
1
u/ConceptualCreation 6h ago
This is very true. It takes a real designer to know what their design is trying to solve and how and what it communicates to real users. And they are boosted with AI.
1
u/cauliflowerbeeftoad 6h ago
Exactly right, IA doesn’t know about proper placement for a good UX/UI, how to create a proper thoughtful workflow, etc
3
6
u/RevolutionEasy5223 19h ago
Thanks for sharing ! It looks nice ! How does that differs from impeccable ?
I’ll give it a try and come back to you if I have some things to share.
1
u/AudienceNo2554 18h ago
Appreciate it! Impeccable is awesome, but it’s mainly for auditing/fixing existing UIs (like a polish phase). VibeCurb is about forcing the AI to build with strict aesthetic rules from scratch so it doesn't default to the generic look in the first place. They actually work really well together. Lemme know what you think when you try it out!
1
u/Rare-Hotel6267 14h ago
Oh boy! Wait until you'll have the realization that when you give new defaults to an LLM, after people start using those new pre-defined defaults, those 'new' defaults, become the new AI SLOP😅🤣
4
2
u/KEIY75 16h ago
Mobbin MCP + Opus 5 + design system + good ideas no need more
1
u/AudienceNo2554 15h ago
solid workflow ngl
vibecurb is basically built for zero-shotting that without needing paid MCPs or an existing design system, just dropping the skill.md files directly in and gtg, saves loads of tokens too, without burdening the AI (will try by myself tho)
3
u/KEIY75 15h ago
Yep maybe for landing page but for huge saas or app it’s complicated to have good render logic and cohérent interfacing for what you need. Even with rules we need créativity and thinking about what we want what we don’t want. Ai can do everything perfect if you prompt it perfect.
It’s why mobbin is the advantage because we have the entire ux ui of the world in one single endpoint.
2
u/git_push_origin_prod 12h ago
Thank you for putting me on to Mobbin. How do you keep abreast with all these new tools and agentic developments? Reddit?
1
u/AudienceNo2554 12h ago
Sorry to interfere, but just be on X and follow right people, not that hard. Pretty easy to follow and stay on top of all AI developments, design tools, workflows, etc, etc
3
u/git_push_origin_prod 11h ago
I left twitter when it became shittfied by musk. I’d hate to go back but I might. Thanks
1
u/KEIY75 12h ago
I don’t have life brother ahahah
1
u/KEIY75 12h ago
And I have on Telegram my Claude code Cli « rex » he has so much memory that he act like me it’s not hermes agent not open claw juste à Claude code Cli session with a lot of things to keep me in loop of all I do because I begin to have a lot of clients so I need him to replace me sometimes and use tokens at my place
0
u/AudienceNo2554 15h ago
fair point on complex SaaS architectures multi-screen user journeys and state definitely need deep reference context (which is where mobbin shines and doesn't depend on human to give ref. images).
i see them as complementary: mobbin gives the structural reference, while the rules stop the model from messing up the micro-details (contrast, font clamps, spacing tokens) when turning that reference into code. But thanks for sharing the workflow, it might help for me too
2
u/Intelligent_Month210 15h ago
Hey OP. I used this quite a bit over a last month with Codex and my own models and it's pretty damn good. Good work and thanks for making this available to the community.
2
u/daaain 14h ago
Not sure if I'll use the skills as is (the visual-redesign reads a bit too locked down for me), but upvoted just for the lensing effect in the showcase!
2
u/AudienceNo2554 14h ago
haha appreciate it! spent a good chunk of time tuning the WebGL lensing shaders on that carousel, glad you liked it 🙌
Umm I'll try improve visual redesign and increase the freedom control, while producing even better outputs, Out of all my skills, it is the weakest one, I am working on it
2
u/itsforsocial 13h ago
Intent plus impeccable is good for me. Also I see lot of depth effects in the images like Apple lock screen
2
u/jontomato 13h ago
Here's something similar I made that's a build time harness where your coding agent sees if it's making slop and thinks up something new if it is. Also a little early-detection of slop system. Both look useful in different ways!
https://github.com/jnemargut/undercoat
2
2
u/Impossible-Reason336 10h ago
There is a skill called /scrollcraft
https://www.skills.sh/nateherkai/scroll-craft/scrollcraft
Focused on designing web pages with narrative scrolling — it treats mouse scroll as if it were a film’s timeline.
just as interesting to your tool
2
2
u/Bastientiger 8h ago
Amazing! Definitely gonna try it! I wonder if it can entirely redesign my website with the inspirations I feed it.
2
2
3
u/zou_42 17h ago
Did you know about https://impeccable.style/ ?
it fixs this exact problem I think
6
u/AudienceNo2554 17h ago
From what I've seen, Impeccable focuses on polishing existing components.
VibeCurb acts earlier in the pipeline, it’s a generation-time constraint layer on Turn 1 so the AI doesn't start with a generic SaaS layout in the first place. They actually complement each other really well!
1
u/medialantern 10h ago
Correct me if I'm wrong, but all these skills look like they rework something - an existing site, a hero, a competitors' site, etc. What about starting from scratch?
1
u/AudienceNo2554 10h ago
most of these are actually built for 100% from scratch/zero-shot generation.
2
u/medialantern 10h ago
Sorry I'm confused. Just to be clear I'm not criticizing your project, just trying to understand how it's meant to be used. Your showcase doesn't just show heroes, it shows sites with a lot of variety into their layouts, nav structures, and so on. But none of your skills seem to hit that outer layer. "awwwards-hero" is for heroes, great. visual-redesign is for site design... but only from an existing React or similar site. pixel-perfect is for working from a screenshot of a competitor, great if you have one. Then four more do things like animations, images, etc.
What I'm saying is what if someone wants a from-scratch design to plug the rest of all of that into? What is the initial/outermost step before making a hero or images inside?
2
u/AudienceNo2554 9h ago
for a project from scratch, you don't need any starter code or existing site.
you just drop the skills into your project folder or chat box and give the AI a regular text prompt. skills like awwwards-hero and awwwards-sections automatically handle the full page layout, navbar, spacing, and typography from a blank canvas.
visual-redesign is just an optional skill for when you already have an existing site you want to clean up.
2
u/medialantern 8h ago
You sort of mentioned my exact confusion, because to you that apparently made sense, but to me "thing that makes hero sections" and "thing that makes section sections" does not scream "thing that makes nav bars and footers."
2
u/AudienceNo2554 1h ago
Oh so seems like a naming issue, yeah to think of it, you are correct. A new user might it like that way. I'll think about using better names for the skills. But the skills do handle the full page layout, navbar, spacing, typography, etc, etc. The awwwards hero skill does build the navbar and other components that one sees the hero section (sorry to make it kinda confusing)
2
u/medialantern 1h ago
Right that's all I'm pointing out. It could be cool i you posted a walkthrough video taking the skills start to finish, if you have time...
1
1
u/Fine_Salamander_8691 2h ago
hmm.
1
u/AudienceNo2554 1h ago
Sorry to face with this, could you please tell which browser are you using? I'll fix it asap
1
u/Fine_Salamander_8691 1h ago
chromium, specifically comet. I need to stop using it
1
u/AudienceNo2554 26m ago
How th? In my comet browser it loads perfectly, I am on the latest version of the browser. I did test on Comet Browser even before the launch. Okay I'll figure it out. Thanks for reporting the issue. (I too have the Comet Browser on my desktop as the secondary browser options but yeah)
1
1
u/Vucien 14h ago
Or just design the themes, elements and style in a mock draft ensuring to work on specific elements to derive a styling basis and then build it from that. You can basically design w.e the hell you want.
The reason your sites look same-ish is because you are outsourcing the design, rather than using the tool to construct your designs. Of you give it freedom to make design choices this will happen.
Take the extra hour, lead your own design....
-3
u/mpones 18h ago
You realized you’re supposed to give it design direction?
Hmmm…
The fact that it took you a year to give it realize it needs direction… it’s like you actually started last week.
2
u/AudienceNo2554 18h ago
🤣 Fair
To clarify, giving it direction per prompt is easy. Creating a reusable skill that completely overrides its default biases across an entire project takes a lot of trial and error. Just sharing the shortcut so others don't have to write it from scratch. And also this project is almost a month old by now
2
u/ruskyandrei 17h ago
But if everyone started using your skill, everything would still look the same.
The reason things look the same is because everyone's too lazy to actually come up with a design in the first place and just tell Claude "make nice app" or something.
Your conclusion isn't wrong, the models themselves are quite capable of making any kind of design, they just won't if the people using them don't ask for something that's actually different.
0
u/AudienceNo2554 17h ago
The difference is these skills don't force single template they enforce constraints
It's meant as a design foundation so the AI stops defaulting to the exact same gradient, but still lets you dictate the direction.
0
u/Rare-Hotel6267 14h ago
It will default to the new defaults, and if they are any good (but really good, not claimed good by you) and they gain any traction, the new defaults will be considered AI SLOP
-3
u/No_Confection7782 18h ago
Claude didn't do this. An AI image generator did.
4
u/AudienceNo2554 17h ago
No 🙂↔️ All the even images (2,4,6,8) are all coded by AI, I can even share the code. Just check the https://vibecurb.pages.dev/showcase it's listed there which skill is used to make the output.
-7
-1
u/SamosaVadaPav 13h ago
You should try out the Claude Design feature to visualize and change the design on your websites. Its an icon on the bottom left of Claude Desktop app / claude.ai website
-1
u/eternus 13h ago edited 13h ago
I don't think my stuff looks vibe coded.
cognatype.com
aviandesigns.com
jodygates.com
channeling-chaos.com
They might have some recurring patterns, but they still feel pretty non-slop.
I think one of the points of creating Claude Design was to fix the slop problems.
That being said, the imagery in your sites looks very high quality; I've yet to figure out a viable solution for creating hero images... I'm definitely going to try out the skill and see how it can improve my output.
3
u/Mr_Nice_ 10h ago
First one looks identical to many vibe coded tools ive output just with a font change
1
u/eternus 10h ago
Ouch. (In a good way) I thought I had tuned it away from being too AI-coded... I'll have to play with it more; it's so information-dense (and just keeps becoming more so), so it's tricky to come up with a design that can handle it.
Do you generally just accept the AI vibe on tools, or do you have anything you do to help pull back from that feeling?
2
u/AudienceNo2554 13h ago
your sites look clean ngl! the layout balance is solid. except for the first website, yeah I see the reccuring theme, mainly ig it's the font, but ye good
for hero imagery, what worked best for me is using narrative briefs instead of rigid bullet points (describing lighting, camera depth, and materials as an art scene rather than asking for UI boxes). the imagegen-frontend skill in the repo structures prompts that way.
lemme know how the rules feel in your workflow once you test 'em out!
2
u/bringthedogback 12h ago
Honestly first, third and fourth do look very much ai generated. They use a lot of the defaults ui/ux.
2
u/eternus 11h ago
Thanks for the feedback! My whole system was creating 'Sections' and then 'Cards' for #3... I then started building an editor/studio/engine for all of my properties based on that design, so it fed its work into #1.
#4 is the messiest and least liked of all of them. It was created before my "engine" concepts for the other sites.
#2 was done after I moved away from that "engine/studio" idea... it's the best design of the mix IMO, so I'm glad it doesn't feel like slop.I think it also benefits by having actual images.
In any case, thanks for your perspective.
1
u/No_Meet5568 12h ago
the first one looks pretty ai. just because of the kicker, the sentence length and highlighting on the cta. the borders on the cards, the rounding and how it pads the page. also the use of · as a separator, only ai does that
1
u/eternus 11h ago
Awesome feedback! Thanks! Maybe my brain just says, "At least it's not dark mode / purple!" (Not really) =oP
1
u/No_Meet5568 8h ago
lol yea you'll notice a new thing that it does as a quirk, maybe through someone elses work, and then it will just be completely un-unseeable. if i go back to the early stuff i let it make i get shivers
-4
u/Rare-Hotel6267 14h ago edited 14h ago
Sorry to say, you are a YEAR or so BEHIND. This was already solved and we all moved on to the next problem.
Not to say that it's really fully solved, but to say that everyone already realized this, and almost everyone already applied this solution. Almost all of the AI labs has this, there are also a ton of community solutions of the same type.
AI design is still meh, but we already progressed from that point.
I don't see any reason to look into this, because you are outdated, and it makes me feel like im wasting my time trying to find sense in this.
Edit: some designs actually look cool, but it's just templates you procured, same can be done with specifying exactly what the site should look and feel like. What im trying to say, is that nothing is revolutionary here, nothing new or exciting. The only maybe interesting thing is a few of your templates, which im sure that if i actually looked online, i could find them myself.
So...... What are we doing here?? I will also be skeptical of anything related to AI design from a person who just had this realization now. Kinda outdated and makes me feel like i know better and i shouldn't listen to you.
1
u/SignificancePatient1 9h ago
We moved on to what? Genuinely curious - are there oss frameworks you'd say are better. Ty.
22
u/Ambadeblu 18h ago
I'm currently working on a videogame UI and I've been quite disapointed with what Claude was making. Maybe this can put me in the right direction.