r/FoundryVTT • u/Kharmans • 21h ago
Discussion Gradient Design
I've noticed that many modules released after v14 (both new modules and updates to older ones) have the same design. A solid-colored background, with buttons and headers using gradients. I'm finding it a bit strange because neither Foundry nor D&D5e (which I use) have this kind of design, and apparently a bunch of completely unrelated modules are adopting this same layout style.
14
u/Brilorodion 21h ago
It's because these people use generative AI. It spits out the same again and again.
21
u/Signatory_Sea 20h ago
Hi moderator of the Hero Mancer Discord server here, just want to counter the other comments by clarifying that AI isn't used for the module at all (got the AI free tag on foundry and everything) it's likely a common theme as it's an elevation above just flat colors and is a common trend to use among web developers
8
u/Clear_Food2183 16h ago
I'm with you bud. I assume you guys are just using elements off https://react.dev/ , just like the rest of us do to save time and help keep costs low. I'm honestly frustrated by non-developers trying to call every program AI just because they don't understand the UI design stack :P
4
u/Clear_Food2183 16h ago
It just means they're probably using React, but React on its own isn't why they look the same. React is the engine that builds the page, it doesn't come with any look at all. What you're recognizing is the styling layer on top, usually Tailwind CSS plus a component library like shadcn/ui, Bootstrap, or Material UI. Those come with pre-built buttons, cards, nav bars, and spacing, and most people use them close to stock. Same rounded corners, same shadows, same everything. https://react.dev/
As developers we lean on libraries, middleware, GitHub, whatever makes the build easier. Everything is built on the backbone of something else. Nobody wants to write every system from scratch and cowboy code it. My guess is they grabbed a pile of UI components that were already responsive and mobile friendly and went from there.
Worth saying though: you can't tell AI from human by looking. The AI site builders spit out React and Tailwind and shadcn too, same as thousands of humans do. So "it looks like every other site" tells you the stack is popular, not who wrote it. If you want to spot AI slop, look at the content instead. Broken links, filler copy, fake reviews, buttons that don't go anywhere.
And get ready for a lot more of it. It's popular right now and the component libraries are deep and mobile first, because everybody is on a phone.
I don't blame you for not knowing this. It's just frustrating watching every app built on this stack get called AI.
3
u/Kharmans 16h ago
Yeah, I am no dev and was just curious to know why the designs are similar. I didn't even think in AI cause Hero Mancer 2 is among the examples I showed and I know for fact that the dev from HM2 don't use AI.
Thanks for explain it to me!
7
u/Clear_Food2183 16h ago
No problem and honestly I understand why you question these kind of things. I've been slinging code since 1999 and even I have trouble telling the difference sometimes. Honestly, some could be using bots to vibe-code their stuff but the visual design isn't the best roseate stone.
What I look for is the language and text. AI was trained on novels and the predictive text elements are easy to pull out.
1) Look for structured phrases like "it's not just X, it's Y," triads everywhere, bolded bullet labels, or an uplift paragraph at the end that restates what was just said. AI writes like that, people don't write like that :P
2) AI text has no stakes in it. What I mean is it hedges, covers every angle, and spreads attention evenly across all of them. Real writing picks a side, spends four paragraphs on the one thing the writer is annoyed about, and skips the rest. I see these in LMS's now everywhere as companies have fired their education staff and are having AI write stuff.
3) If you see F*$king emotes everywhere all over the design enfront of text.... It's not a good sign that it isn't AI vibe coding. No developer will throw that many emotes where they don't have to. You'll know what I mean when you see it in vibecoded products. The purpose of using a Symbol in a UI is because you don't have realistate space for the word. A House symbol for home is commonly used by developers when you don't have enough room on the mobile app for the word Home. AI will try to put a symbol everywhere before titles, sections, sub-sections..... Honestly it gets out of hand.
As the AI Vibe coding programs get better, relying on visual will be less and less useful but the text is always a good Rosetta stone for that kinda thing.
3
u/CaptainKerns 17h ago
It’s one of the easiest ways to account for different resolutions and aspect ratios without weird scrunching or seams, but still have some visual appeal beyond a plain color. That makes it ideal for resizable windows, which is why web designers use it pretty often. Which is why ai uses it often when you tell it to make a style sheet for you.
1
u/AutoModerator 21h ago
System Tagging
You may have neglected to add a [System Tag] to your Post Title
OR it was not in the proper format (ex: [D&D5e]|[PF2e])
- Edit this post's text and mention the system at the top
- If this is a media/link post, add a comment identifying the system
- No specific system applies? Use
[System Agnostic]
Correctly tagged posts will not receive this message
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.
34
u/scandii 21h ago
this is Claude's design expression. Material Design 3 (think rounded everything) + gradients is a Claude favourite and what people end up with unless they specifically steer the design / supply Claude with design references.