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 키트는 Apple의 iOS 26 리퀴드 글라스 디자인 언어를 구현하기 위한 5가지 Claude Code 스킬 모음입니다. SwiftUI, UIKit, WidgetKit, CSS 웹 적응을 다루며 프로덕션 준비 코드, 접근성 준수 패턴, 성능 최적화 규칙, 161가지 UI 추론 규칙을 갖춘 67가지 스타일 디자인 시스템 생성기를 제공합니다.
5가지 리퀴드 글라스 변형은 무엇이며 각각 언제 사용해야 하나요?
5가지 변형은: .regular — 카드와 내비게이션 바 같은 표준 표면의 기본값. .tinted() — 글라스가 기본 콘텐츠의 색상을 흡수하고 반영해야 할 때. .prominent — 더 강한 시각적 우선순위가 필요한 모달과 시트. .thin — 콘텐츠와 경쟁하지 않아야 할 툴바와 보조 크롬에 가장 미묘한 변형. .interactive() — 터치에 시각적으로 반응하는 버튼과 탭 가능한 요소. 각 변형의 성능 특성과 접근성 영향은 키트에 문서화되어 있습니다.
키트는 투명도 감소 접근성을 어떻게 처리하나요?
liquid-glass-design 스킬에는 완전한 투명도 감소 폴백 코드가 포함되어 있습니다. 사용자가 투명도 감소를 활성화하면 글라스 효과는 동일한 레이아웃과 시각적 계층을 유지하는 불투명 대안으로 교체됩니다. 키트는 SwiftUI 환경 확인과 레거시 코드베이스를 위한 UIKit 동급, 그리고 글라스 표면에 대한 WCAG AA 대비율 가이드를 제공합니다.
리퀴드 글라스의 성능 규칙은 무엇인가요?
키트는 4가지 핵심 성능 규칙을 적용합니다: 화면당 글라스 요소를 1–3개로 제한(더 많으면 구형 기기에서 프레임 드롭 발생), 목록의 모든 셀에 글라스 적용 금지, 깊게 중첩된 글라스 뷰 피하기, 최소 기기 대상으로 iPhone 12에서 테스트. 벤치마크 목표는 최소 60fps, 글라스 레이어당 약 15–30MB 메모리 오버헤드입니다. 스킬은 위반 패턴에 플래그를 세우고 대안을 제안합니다.
웹 프로젝트에 이 키트를 사용할 수 있나요?
네. 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가지 검증된 옵션 중 가장 적합한 스타일을 추천합니다. 그런 다음 완전한 디자인 시스템을 생성합니다: 16진수 색상 팔레트, 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