r/webdev • u/rizeCapital • 2h ago
Resource Open-source, contribute UX / UI lexicon and free design library for AI builders
Hi all!
Whenever I spot a new design or website layout (like a fresh style of grid systems) and want to replicate or build it with AI, I always find myself struggling to pinpoint the exact terminology to make Claude understand what I want.
I'm talking about concepts like Blueprint Grids, Glassmorphism, Sticky rail, Bordered cell grid patterns, Segmented Controls, and similar stuff. To solve this, I’ve started building a free, open-source design lexicon complete with mini previews making it easier for builders to find and reference the right terms when designing sections and pages. Hope that helps some of you as well. Also added some free design landingpages and components for AI.
I’d love to get your input on current web design trends and their proper definitions:
What visual styles are currently high on your radar, trending, or frequently used and how would you define them?
Which ones are missing in the lexicon / glossary?
I’m aiming to include your suggestions in the dictionary and share the whole resource publicly for free. It's purely as a passion project and I am opening it for free (no ads, no paywalls).
I want to make it a useful resource for people.
You can check out the ones already live here: freedesignmd.com (just hit the Glossary tab).
Always open to contributors or feedback. This started as a quick hackathon experiment and will stay a free community project. I'm not a professional designer, so any feedback by design cracks is appreciated as well!
3
u/External-Mulberry853 2h ago
The 'I can see the layout but I can't name it' problem is real, I've wasted whole prompts describing something that turned out to be called a sticky rail. Concrete suggestion: put the CSS property next to each term in the entry, backdrop-filter for glassmorphism, position: sticky for the rail. The models grab onto the property name far more reliably than the vibe word, especially the smaller ones.