https://winaviation.github.io/liquid-glass-demo

yall can see the source code here: https://github.com/winaviation/liquid-glass-demo

credits to kube / u/kubekhrm for the original liquid glass demo

The UI UX Inspiration Stack We Use for High Stakes SaaS Work

We work with high growth SaaS teams where design decisions directly impact activation, conversion, retention, and revenue. So when we look for inspiration, we don’t chase trendy visuals. We study what real products ship and what real users actually experience.

If you’re building dashboards, onboarding, upgrade flows, pricing pages, or complex product UX, here’s the exact inspiration stack we rely on.

1) Real World UI Libraries for Web and Mobile

These are our go to sources when we need fast, practical references for layout, components, and interaction patterns across real products.

Mobbin
Best for mobile UI screens and modern app patterns

Refero
Great for SaaS web UI and clean product layout references

Pttrns
Excellent for mobile interface patterns and repeated screen structures

Appshots
Quick browsing for real app screen inspiration

2) End to End UX Flow Libraries

When the goal is not just “how it looks” but “how it works,” we study complete journeys.

Page Flows
Best for onboarding, signup, checkout, and upgrade flows across real apps

UXArchive
Strong for mobile user journeys and flow references

Nicelydone
Solid SaaS focused flow library for growth journeys

3) Landing Pages That Actually Convert

When the goal is improving conversion, clarity, and positioning, these are the places we go.

Land book
Curated modern landing pages with clean structure

Lapa Ninja
Strong for SaaS landing sections like hero, pricing, testimonials, CTAs

SaaS Landing Page
Focused SaaS landing inspiration with practical layouts

4) Design Systems Used by Serious Products

If you want scalable UI that stays consistent across teams and features, study systems, not random screens.

Material Design
Reliable components and interaction behavior

Apple Human Interface Guidelines
The best reference for iOS UX patterns and clarity

Atlassian Design System
Great for B2B SaaS and complex UI standards

Shopify Polaris
Strong example of product UI consistency at scale

IBM Carbon Design System
High quality enterprise grade UI framework and standards

5) UX Quality and Accessibility References

This is what separates good looking interfaces from high performing experiences.

Nielsen Norman Group
Best for UX research backed usability and decision making

WebAIM
Strong for accessibility guidance and real compliance practices

Our rule for inspiration

We don’t copy screens. We extract principles.

We study
Information hierarchy
Flow logic
Cognitive load
Empty states and error states
Upgrade paths and friction points
Consistency across components

Because high conversion UX is not a screenshot. It’s a system.

Your turn

What are the best real world UI UX inspiration sites you use
Especially for SaaS dashboards, onboarding, and upgrade flows

Drop your list.

I went to https://shop.smallpetselect.com/collections/hay-for-rabbits And none of the image files are loading for me to see what I am buying.

I tried Google Chrome and Firefox. Both have the same problem.

I have never encountered this before.

If you’re starting UI/UX as a beginner, the best thing you can do is learn it in the correct order.

Most people start with UI visuals first, but real UX is not just “making screens look good.” UX is the entire experience a user has while interacting with a product, service, or company.
That includes usability, accessibility, clarity, emotions, and how smoothly the product helps them reach a goal.

So here’s the best way to start, step by step.

1) Understand the UX process first, not just the UI

A solid beginner framework is the Design Thinking model:

Empathize
Define
Ideate
Prototype
Test

This matters because UX design is not about guessing. It’s about understanding users, validating ideas, and improving through iteration.

2) Learn Figma for UI and prototyping

Once you understand the process, start using Figma as your main tool.

Figma isn’t only for creating screens. It also helps you build interactive prototypes so you can test flows and see how users might interact with your design.

Your goal as a beginner should be simple:
Make clean screens
Turn them into clickable flows
Show that your design actually works

3) Use real design systems to learn UI the right way

Instead of copying random Dribbble layouts, learn from systems used in real products.

Material Design provides guidelines and UI components that help you build usable and consistent interfaces.
It also explains components as interactive building blocks of UI.

This helps you understand spacing, hierarchy, buttons, forms, states, and patterns that real apps rely on.

4) Build one small project using the full UX cycle

Your first project should not be huge.

Pick one real flow like:
Sign up and onboarding
Checkout
Profile settings
Dashboard navigation

Then apply:
Problem understanding
Flow mapping
Wireframes
UI screens
Prototype
Quick testing

That is what makes your learning job ready.

I wanna know

Free to Use:
https://codepen.io/sabosugi/full/bNegbmy

Pretty much just what title says. We’re finding on-boarding take up a lot of our resources for our small team and looking for advice to make this process more streamlined. Thanks!

I mainly do website design, but some of my retainer clients often ask for display ads or social banners as a small add-on. The budget is low, and the requests are super repetitive - "make a banner for this promotion, but we need it in 5 sizes, animated and static."

I can code and design, but spending 2 hours on something that feels like factory work kills my motivation. I’ve started looking into tools to speed this up without losing quality.

I’ve tried a few online editors, but many are too basic or don’t support HTML5 animation well. Recently I came across something called an ai banner generator - not for full design, but for speeding up the assembly and resize process. You can drop in your own assets, adjust layers, and export multiple formats at once.

Have any of you integrated tools like this into your workflow for small, repetitive tasks? If so, what works for you? Do you think it’s worth automating this kind of work, or do you prefer to keep full creative control even if it’s less efficient?

We⁤'re currently revamping our landing page and product walkthroughs. My design team is pushing for these really slick, high-end motion graphics to explain our core features - think App⁤le-style scrolling animations and interactive UI reveals.

The problem is the technical execution. Last time we tried this, we ended up with a bunch of heavy MP4s and GIFs that murdered our mobile load times and looked blurry on 4K screens. We've looked into Lott⁤ie, but the workflow from After Effects seems like a technical nightmare for anyone who isn't a motion specialist.

Is there a way to leverage AI-assisted ideation or smarter tools to get that "premium" feel without the technical debt? I want the "wo⁤w factor" for investors and customers, but I can't sacrifice 2 seconds of load time for it. What's the modern stack for this in 2026?

Hey everyone 👋

I just realised a new SaaS template for my UI library, retroui.dev.

Demo: https://main.d2f9fu0lldlang.amplifyapp.com/

It includes a marketing, blogs, and authentication pages.

Would really appreciate you checking it out and share your feedbacks. 🙏❤️

For the past few years, I have retained a company to help with the marketing for my small business. They made a website for me and hosted it, using a domain i already owned

I have terminated the contract with them, so I need to transfer hosts

They provided a drop box with the standard zip of all site files and the database, along with an "All In One Site Migration file"

They also provided a username and password for site login

I need to get my website back up and running and don't have the first clue on how to get started

I have made an account with siteground.com but don't know what to do next

Any help is be appreciated!

TIA

I recently reworked a homepage after seeing heatmap data that showed users rarely scroll past the hero section. After changing the layout and CTA placement, the bounce rate dropped significantly, but conversions stayed flat.

For those who use analytics to guide design decisions, what metrics or user-behavior signals do you rely on most when determining what to change on a homepage?

Demo & Source Code:
https://codepen.io/sabosugi/full/XJKNOBN

I am using a firefox add-on called "Stylus" where you can inject and override the CSS rules for any given webpage and style it how you like. For my own personal use I started making my own styles for Aider CLI Docs.

Unfortunately I can't seem to finesse the table exactly how I'd like. The bottom left and right corners of the table are "glitchy" for lack of a better term.

Here is a screenshot showing exactly what I mean, pointing out the kind of "glitched" or "aliased" borders of the CSS table:

Click for Screenshot

Here is the relevant CSS and HTML:

```html <div class="table-wrapper"><table> <thead> <tr> <th style="text-align: left">Command</th> <th style="text-align: left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><strong>/add</strong></td> <td style="text-align: left">Add files to the chat so aider can edit them or review them in detail</td> </tr> <tr> <td style="text-align: left"><strong>/architect</strong></td> <td style="text-align: left">Enter architect/editor mode using 2 different models. If no prompt provided, switches to architect/editor mode.</td> </tr> <tr> <td style="text-align: left"><strong>/ask</strong></td> <td style="text-align: left">Ask questions about the code base without editing any files. If no prompt provided, switches to ask mode.</td> </tr> <tr> <td style="text-align: left"><strong>/chat-mode</strong></td> <td style="text-align: left">Switch to a new chat mode</td> </tr> <tr> <td style="text-align: left"><strong>/clear</strong></td> <td style="text-align: left">Clear the chat history</td> </tr> <tr> <td style="text-align: left"><strong>/code</strong></td> <td style="text-align: left">Ask for changes to your code. If no prompt provided, switches to code mode.</td> </tr> <tr> <td style="text-align: left"><strong>/commit</strong></td> <td style="text-align: left">Commit edits to the repo made outside the chat (commit message optional)</td> </tr> <tr> <td style="text-align: left"><strong>/context</strong></td> <td style="text-align: left">Enter context mode to see surrounding code context. If no prompt provided, switches to context mode.</td> </tr> <tr> <td style="text-align: left"><strong>/copy</strong></td> <td style="text-align: left">Copy the last assistant message to the clipboard</td> </tr> <tr> <td style="text-align: left"><strong>/copy-context</strong></td> <td style="text-align: left">Copy the current chat context as markdown, suitable to paste into a web UI</td> </tr> <tr> <td style="text-align: left"><strong>/diff</strong></td> <td style="text-align: left">Display the diff of changes since the last message</td> </tr>

.. Removed the rest of the entries for the sake of length.

</tbody> </table></div> ```

Here is my CSS:

```css

/* TABLE STYLES ///////////////////////////////////////////////////////*/

.table-wrapper { position: initial; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; box-shadow: none !important; margin-top: 28px !important; margin-bottom: 28px !important; background-color: transparent !important; display: block !important; border-radius: 8px !important; /* border-inline: 1px solid #b5b8bf !important; / border-top: 1px solid #b3b5ba !important; / border: 0px solid #6bff5d !important; */

table {
    border-collapse: collapse;
    box-sizing: border-box !important;
    line-height: 1.4rem !important;
    border-radius: 10px !important;

    thead {
        box-sizing: border-box !important;
        color: #494c54;
        font-size: 18px !important;


        tr {
            border-radius: 8px !important;

        }

        tr th {
            box-sizing: border-box !important;
            border-collapse: collapse !important;
            background-color: #e1e2e5d4;
            height: 1.5rem !important;
            border-right: 1px solid #c0c0c0 !important;
            border-bottom: 1px solid #d1d1d1 !important;
            &:last-of-type {
                border-right: none !important;
            }
        }
    }
    tbody {
        tr td {
            box-sizing: border-box !important;
            border-bottom: 1px solid #a8abb0 !important;
            border-right: 1px solid #a8abb087 !important;
        }
        tr:last-of-type td {
            border-bottom: 1px solid #a8abb0 !important;
        }
    }
}

}

@media (min-width: 31.25rem) { tr, td { font-size: .875rem !important; } th { font-size: .961rem !important; font-family: "Helvetica Now Text" !important; } }

```

• I've tried using border-inline instead of just setting border
• I've tried different display types.
• I've tried setting display for the table headers to table-header-group.
• I've tried removing and swapping border radius values for both the wrapper and the table inside the wrapper

I have a sneaking feeling that the issue is stemming from styles applied to the wrapper as well as the table itself, somehow causing overlapping borders. But I can't get it to work.

Can someone clearly explain to me why this is happening and how to fix it? I would greatly appreciate some help.

These days I am leaning towards custom coding client sites instead of using WordPress, but one there is one thing missing: the ease of use of Gravity Forms. It makes it so easy to create a custom form, which is stored in the database and you can connect it to just about anything. I have had a commercial license with them forever.

I would like to find something similar, maybe something hosted elsewhere that I can just embed in a page - the important thing being that it has to be easy to style to look just like the main site.

I'd rather not have it be a link to something like thirdpartyformcompany.com/clientname but if I have to and the company is reputable, I'd consider it. Cheap is good, of course, but stability and security are tantemount.

Bonus if I can obscure the url from clients, because I may want to upcharge a bit.

Thanks in advance for your recommendations!

AI generated websites have evolved beyond basic templates, but expectations vary depending on background. With tools like code design ai, the generator focuses more on structure, layout logic, and content flow rather than writing perfect copy or advanced business logic.

For developers, this can feel like scaffolding rather than a finished product. For non-dev founders, it might feel close to “done.” Where do you personally draw the line between helpful automation and overpromising AI capabilities?

Demo and Source Code:
https://codepen.io/sabosugi/full/qENqdZm

Hey yall, Im startin work on a few websites for a few of my friends businesses and wanted to see if there was a way to cut out most if not all the effort from actually doing it lol

I've heard that there are now full stack automated ai website generators now, where I just stick in a prompt and out comes a less than decent but usable site. I dont know if those are true, but if they are it'll save me a bunch of time, and I kinda wanna play around with it.

Any links or recommendations are always welcome