The joy of HTML demos

I am not a UX engineer but I am a highly opinionated user and it seems Claude is excellent at bridging the gap. I was working on updating my mobile lower toolbar because it felt cluttered (I do not have much stronger opinions than "it is cluttered" for now), so I had claude give me some quick demos and current approaches.

I really like having a lot of information available at first glance (or, at least within 2 clicks), but the bottom bar is getting too small for my fingers and it doesn't really make sense semantically either. I asked claude to whip me up some alternative approaches and I was blown away how quickly I can get a interactive experience in my hands!

Out of interest, I asked claude for Apple guidance on liquid glass. It searched the web and gave me a pretty interesting answer. Claude then made a demo following this guidance, which seems more precise than some people I know!

Quote from the token generator:

Apple now has three explicit layers at the bottom, and Apple is basically saying: "You now have multiple glass layers at the bottom, and each has a very specific job." The layers are:

• The tab bar itself — strictly for top-level navigation between app sections. A simple test: if a destination doesn't have its own little world of screens, and it doesn't make sense to "come back to it tomorrow in the same state," it's probably not a tab — it's an action. Medium So your "Add" and "Select" fail this test — they're verbs, not destinations.
• The accessory view — a new official "shelf" above the tab bar for persistent global UI that isn't navigation. You place a view above the bar with the tabViewBottomAccessory modifier, which takes advantage of the extra space provided by the tab bar's collapsing behavior. Apple Developer Apple uses this for the Music app's mini player. When the tab bar minimizes on scroll, the accessory collapses inline with it.
• The content layer — floating buttons, local controls, and contextual actions that live on the > screen itself, not in the bar. What this means for LifeLab: Apply their test to your 6 items:

• Today → ✅ tab (destination, has its own world)
• Search → ✅ tab (or use the special .search role which gets its own separated button)
• Analysis → ✅ tab (destination)
• Chat → ✅ tab (destination)
• Add → ❌ not a tab, it's an action → floating button in content layer
• Select → ❌ not a tab, it's a mode → contextual action on entries
• Settings → debatable, could be tab or accessible from nav bar

For the demo, it seems to leak in content from my claude chats, which is intriguing and slightly concerning