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 技能的集合，用於實作 Apple 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