iOS 26 Liquid Glass UI KitSwiftUI + UIKit + Web · 5 Skills · 67 Styles · 161 Rules
What's Included
- 5 Claude Code skills
- /liquid-glass-design — SwiftUI + UIKit + WidgetKit + CSS
- /ui-ux-pro-max — 161 rules + 67 styles + Design System Gen
- /ui-styling — shadcn/ui, Tailwind, React Native
- /design-system — tokens, CSS vars, theme switching
- /design — color psychology, hierarchy, typography
- Accessibility compliance patterns (Reduce Transparency)
- Performance optimization rules + benchmarks
- Free lifetime updates
Requirements
- Claude Code or any Claude API skill runner
- Xcode 26+ for iOS native development
- Any web stack for CSS adaptation
- Works on macOS, Windows, Linux
File size: 2.76 MB
People also ask — SEO, GEO, and answer engines
Questions this product page answers (for Google and AI search)
- iOS 26 Liquid Glass UI patterns SwiftUI
- Glassmorphism accessibility Dynamic Type iOS
- UIKit and SwiftUI glass design guidelines
Short answer (AEO snippet)
Five skills package Apple glass aesthetics, accessibility, and performance rules so UI reads native. Ios Liquid Glass Ui Kit — Gumroad on page ($29 one-time).
Apple Just Redesigned Everything. Your App Still Looks Like iOS 17.
iOS 26 Liquid Glass is the biggest visual shift since iOS 7. Blur, reflection, morphing, interactive materials — the entire UI paradigm changed overnight. Your users already updated. They're seeing Apple's apps with the new glass treatment. Then they open your app and it looks flat. Static. Last year.
You know you need to implement Liquid Glass. You read Apple's docs. And then you hit the wall: How do I make glass look right on older devices? Which glass variant do I use where? How do I handle Reduce Transparency? Why does my glass effect tank the frame rate? How do I replicate this on the web?
Apple's documentation covers the basics. It doesn't cover the 50 things that go wrong when you actually implement it. This kit does.
The iOS 26 Liquid Glass UI Kit is 5 Claude Code skills that give you everything Apple's docs don't: edge cases, accessibility compliance, performance optimization, web CSS adaptation, and a 67-style design system with 161 reasoning rules. You describe the component, you get production-ready code with the correct variant, proper fallbacks, and performance-safe implementation.
Example invocation:
/liquid-glass-design Navigation bar with blur effect for a fitness app. Needs to work on iPhone 12 and handle Reduce Transparency.
→ Correct glass variant recommendation (.regular)
→ SwiftUI production code with .glassEffect modifier
→ UIKit equivalent for legacy codebases
→ Reduce Transparency fallback (copy-ready)
→ Performance notes for iPhone 12 baseline
The Complete Toolkit
All 5 UI Skills
From glass implementation to complete design system generation.
/liquid-glass-designCore Liquid Glass Patterns
Every glass variant for SwiftUI, UIKit, WidgetKit, and web CSS. Accessibility fallbacks, performance rules, dark mode edge cases, and VoiceOver patterns — everything Apple's docs skip.
/ui-ux-pro-max161 Rules + 67 Styles
Design System Generator. Describe your app → recommended style from 67 options → full color palette, typography pairings, spacing scale, component specs, accessibility checklist.
/ui-stylingComponent Implementation
Translates design decisions into code. shadcn/ui components, Tailwind CSS utilities, React Native equivalents — correct implementation pattern for your specific stack.
/design-systemDesign Tokens & Themes
Design tokens as CSS custom properties and Swift constants, theme switching (light/dark/auto), token architecture that scales across teams and platforms.
/designBrand & Visual Hierarchy
Color psychology, typography pairing rules, visual hierarchy principles, spacing rhythm. The fundamentals that make glass effects feel intentional rather than decorative.
Variant Guide
When to Use Each Glass Variant
Apple gives you 5 variants. This kit tells you exactly which one to use and why.
.regularStandard surfaces — cards, navigation bars, general chromeLow.tinted()When glass should absorb underlying content colorLow.prominentModals and sheets that need visual priorityMedium.thinToolbars and secondary surfaces that shouldn't compete with contentVery low.interactive()Buttons and tappable elements with touch feedbackMediumPerformance
Frame Rate Rules
Glass is expensive. These are the rules that keep your app at 60fps.
1–3 glass elements per screen
More layers = compounding blur cost = frame drops on older devices
Never glass every list cell
100 cells × glass = guaranteed jank, use glass for containers only
Avoid deeply nested glass views
Nested blur stacks multiply GPU cost exponentially
Test on iPhone 12 minimum
Glass performance baseline — if it runs here, it runs everywhere
60fps target, ~15–30MB overhead
Per glass layer memory budget. Profile with Instruments.
Accessibility
Compliance Built In
Glass fails accessibility by default if you don't handle it. This kit ships every compliance pattern ready to copy.
Web Adaptation
CSS Liquid Glass
Replicate iOS 26's glass aesthetic on the web — including tinted variants, browser fallbacks, and compatibility matrix.
backdrop-filterblur(20px) saturate(180%)Core glass blur — primary implementationbackgroundrgba(255,255,255,0.12)Translucent fill layercolor-mix()in oklch, var(--bg) 80%, white 20%Tinted variant — absorbs content colorborder1px solid rgba(255,255,255,0.18)Specular highlight edge@supportsnot (backdrop-filter: blur())Fallback for non-supporting browsersDesign System Generator
67 Validated UI Styles
Not every app needs Liquid Glass. Describe yours — the skill recommends the right style and generates the full design system.
Frost Glass, Aurora Glass, Deep Space Glass
Neumorphic Light, Soft Pastel, Cotton Cloud
Pure Minimal, Mono, Swiss Grid
Raw Brutalist, Neo-Brutalist, Punk Interface
Obsidian, Carbon, Midnight Blue
Forest Calm, Ocean Depths, Desert Warm
Liquid Glass (iOS 26), Vibrancy (iOS 17), Material (iOS 15)
Each style generates:
Who This Kit Is For
iOS Developers
Implementing Liquid Glass in existing apps — need production patterns beyond Apple's docs.
SwiftUI Developers
Correct variant usage with accessibility and performance rules built into every snippet.
UIKit Developers
Legacy codebase compatibility via UIGlassEffect with the same quality standards.
Web Developers
Replicate iOS 26 glass aesthetic in CSS with browser compatibility and fallback patterns.
UI/UX Designers
Complete design system with tokens, typography pairings, and color palettes — any style.
Freelance Developers
Update client apps for iOS 26 fast — no guessing, no reading through documentation pages.
Frequently Asked Questions
什么是 iOS 26 液态玻璃 UI 套件？
iOS 26 液态玻璃 UI 套件是 5 个 Claude Code 技能的集合，用于实现苹果 iOS 26 液态玻璃设计语言。涵盖 SwiftUI、UIKit、WidgetKit 和 CSS Web 适配，提供生产就绪代码、无障碍合规模式、性能优化规则，以及包含 161 条 UI 推理规则的 67 种风格设计系统生成器。
五种液态玻璃变体是什么，各自应何时使用？
五种变体为：.regular——标准表面（如卡片和导航栏）的默认选项；.tinted()——玻璃应吸收并反映底层内容颜色时使用；.prominent——需要更强视觉优先级的模态框和底部表单；.thin——不应与内容竞争的工具栏和次要界面元素中最微妙的变体；.interactive()——对触摸有视觉反馈的按钮和可点击元素。套件中记录了每种变体的性能特征和无障碍影响。
套件如何处理降低透明度的无障碍问题？
liquid-glass-design 技能包含完整的降低透明度回退代码。当用户启用降低透明度时，玻璃效果会被保持相同布局和视觉层次的不透明替代方案所取代。套件提供了 SwiftUI 环境检查和旧代码库的 UIKit 等效方案，以及玻璃表面的 WCAG AA 对比度指导。
液态玻璃的性能规则是什么？
套件强制执行四条关键性能规则：将每屏玻璃元素限制在 1–3 个（更多会导致旧设备掉帧），不对列表中的每个单元格应用玻璃，避免深层嵌套玻璃视图，以及在 iPhone 12 上作为最低设备目标进行测试。基准目标为最低 60fps，每层玻璃大约 15–30MB 内存开销。技能会标记违规模式并建议替代方案。
我可以将此套件用于 Web 项目吗？
可以。liquid-glass-design 技能包含使用 backdrop-filter: blur(20px) saturate(180%) 的 CSS 适配、着色变体的 color-mix()，以及不支持 backdrop-filter 的浏览器的回退模式。套件包含浏览器兼容性矩阵，让您清楚知道哪些浏览器需要回退方案。
ui-ux-pro-max 中的 67 种 UI 风格是什么？
67 种风格涵盖 7 个类别：玻璃拟态（Frost Glass、Aurora Glass、Deep Space Glass 等）、柔和 UI（Neumorphic Light、Soft Pastel、Cotton Cloud）、极简主义（Pure Minimal、Mono、Swiss Grid）、粗野主义（Raw Brutalist、Neo-Brutalist、Punk Interface）、暗色高端（Obsidian、Carbon、Midnight Blue）、自然灵感（Forest Calm、Ocean Depths、Desert Warm）和 iOS 原生（Liquid Glass iOS 26、Vibrancy iOS 17、Material iOS 15）。每种风格包含色彩调色板、字体配对、间距比例和无障碍说明。
设计系统生成器如何工作？
您描述您的应用——它的功能、目标用户、期望的氛围。ui-ux-pro-max 技能根据 161 条设计推理规则分析您的需求，并从 67 个经验证的选项中推荐最合适的风格。然后生成完整的设计系统：十六进制色彩调色板、Google Fonts 配对、间距比例、组件规格和无障碍合规清单——全部在一次输出中完成。
这是否适用于 UIKit 旧代码库？
是的。liquid-glass-design 技能涵盖 SwiftUI glassEffect 修饰符和 UIKit 的 UIGlassEffect API。旧代码库获得等效的实现模式，以及与 SwiftUI 项目相同的性能和无障碍指导。
design-system 技能能生成什么？
design-system 技能将设计令牌生成为 CSS 自定义属性和 Swift 常量、完整的主题切换架构（浅色/深色/自动）、可跨团队扩展的令牌命名约定，以及将语义令牌映射到原始值的组件令牌层。它生成您可以直接提交到项目中的令牌文件结构。
如果我的应用不针对 iOS 26，这个套件有用吗？
有用。带有 67 种风格和 161 条推理规则的 ui-ux-pro-max 技能适用于任何 iOS 版本、任何平台和任何技术栈。ui-styling 技能生成 shadcn/ui 组件、Tailwind 实用程序和 React Native 等效实现。design 和 design-system 技能涵盖无论平台或 iOS 版本如何都适用的基础知识。
One-Time Purchase
Everything Apple's Docs Don't Cover — $29
5 Claude Code skills. Glass variants, accessibility fallbacks, performance rules, CSS web adaptation, 67-style design system generator. Lifetime access, free updates.
Get Instant Access — $29Secure checkout via Gumroad · Instant digital delivery