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 Liquid Glass UI Kit;
Το iOS 26 Liquid Glass UI Kit είναι μια συλλογή 5 δεξιοτήτων Claude Code για την υλοποίηση της γλώσσας σχεδιασμού Liquid Glass της Apple στο iOS 26. Καλύπτει SwiftUI, UIKit, WidgetKit και προσαρμογή CSS ιστού με έτοιμο για παραγωγή κώδικα, μοτίβα προσβασιμότητας, κανόνες απόδοσης και γεννήτρια συστήματος σχεδιασμού με 67 στυλ και 161 κανόνες συλλογιστικής UI.
Ποιες είναι οι πέντε παραλλαγές Liquid Glass και πότε να χρησιμοποιείτε την καθεμία;
Οι πέντε παραλλαγές είναι: .regular — προεπιλογή για τυπικές επιφάνειες όπως κάρτες και γραμμές πλοήγησης. .tinted() — όταν το γυαλί πρέπει να απορροφά και να αντανακλά το χρώμα του περιεχομένου από κάτω. .prominent — για modal και φύλλα που χρειάζονται ισχυρότερη οπτική προτεραιότητα. .thin — η πιο λεπτή για γραμμές εργαλείων και δευτερεύον chrome. .interactive() — για κουμπιά και αλληλεπιδραστικά στοιχεία με οπτική απόκριση στην αφή. Κάθε παραλλαγή έχει διαφορετικά χαρακτηριστικά απόδοσης και προσβασιμότητας τεκμηριωμένα στο kit.
Πώς χειρίζεται το kit την προσβασιμότητα Μείωση διαφάνειας;
Η δεξιότητα liquid-glass-design περιλαμβάνει πλήρη εφεδρικό κώδικα για Μείωση διαφάνειας. Όταν ο χρήστης ενεργοποιήσει την επιλογή, τα εφέ γυαλιού αντικαθίστανται από αδιαφανείς εναλλακτικές που διατηρούν την ίδια διάταξη και οπτική ιεραρχία. Το kit παρέχει έλεγχο περιβάλλοντος SwiftUI και ισοδύναμο UIKit για legacy codebases, καθώς και καθοδήγηση αντίθεσης WCAG AA για επιφάνειες γυαλιού.
Ποιοι είναι οι κανόνες απόδοσης για το Liquid Glass;
Το kit επιβάλλει τέσσερις βασικούς κανόνες: περιορίστε τα στοιχεία γυαλιού σε 1–3 ανά οθόνη (περισσότερα προκαλούν πτώσεις σε παλιές συσκευές), μην εφαρμόζετε ποτέ γυαλί σε κάθε κελί λίστας, αποφύγετε βαθιά ενσωματωμένες προβολές γυαλιού και δοκιμάστε σε iPhone 12 ως ελάχιστη συσκευή. Στόχοι: τουλάχιστον 60 fps και περίπου 15–30 MB μνήμης ανά επίπεδο γυαλιού. Η δεξιότητα σηματοδοτεί παραβάσεις και προτείνει εναλλακτικές.
Μπορώ να χρησιμοποιήσω αυτό το kit για έργα ιστού;
Ναι. Η δεξιότητα liquid-glass-design περιλαμβάνει προσαρμογές CSS με backdrop-filter: blur(20px) saturate(180%), color-mix() για βαμμένες παραλλαγές και εφεδρικά μοτίβα για προγράμματα περιήγησης χωρίς backdrop-filter. Το kit περιλαμβάνει πίνακα συμβατότητας προγραμμάτων περιήγησης.
Τι είναι τα 67 στυλ UI στο ui-ux-pro-max;
Τα 67 στυλ καλύπτουν 7 κατηγορίες: Glassmorphism (Frost Glass, Aurora Glass, Deep Space Glass και άλλα), Soft UI (Neumorphic Light, Soft Pastel, Cotton Cloud), Minimalist (Pure Minimal, Mono, Swiss Grid), Brutalist (Raw Brutalist, Neo-Brutalist, Punk Interface), Dark Premium (Obsidian, Carbon, Midnight Blue), Nature-Inspired (Forest Calm, Ocean Depths, Desert Warm) και iOS Native (Liquid Glass iOS 26, Vibrancy iOS 17, Material iOS 15). Κάθε στυλ περιλαμβάνει παλέτες, ζεύγη τυπογραφίας, κλίμακες αποστάσεων και σημειώσεις προσβασιμότητας.
Πώς λειτουργεί η γεννήτρια συστήματος σχεδιασμού;
Περιγράφετε την εφαρμογή σας — τι κάνει, ποιος τη χρησιμοποιεί, ποια ατμόσφαιρα θέλετε. Η δεξιότητα ui-ux-pro-max αναλύει τις απαιτήσεις σας έναντι 161 κανόνων σχεδιασμού και προτείνει το καταλληλότερο στυλ από 67 επικυρωμένες επιλογές. Στη συνέχεια παράγει πλήρες σύστημα σχεδιασμού: hex παλέτα, ζεύγη Google Fonts, κλίμακα αποστάσεων, προδιαγραφές στοιχείων και λίστα ελέγχου προσβασιμότητας — όλα σε μία έξοδο.
Λειτουργεί για παλιές βάσεις κώδικα UIKit;
Ναι. Η δεξιότητα liquid-glass-design καλύπτει τόσο τους τροποποιητές glassEffect του SwiftUI όσο και το API UIGlassEffect για UIKit. Οι legacy βάσεις λαμβάνουν ισοδύναμα μοτίβα υλοποίησης και την ίδια καθοδήγηση απόδοσης και προσβασιμότητας με τα έργα SwiftUI.
Τι παράγει η δεξιότητα design-system;
Η δεξιότητα design-system παράγει tokens σχεδιασμού ως προσαρμοσμένες ιδιότητες CSS και σταθερές Swift, πλήρη αρχιτεκτονική θεμάτων (φωτεινό/σκοτεινό/αυτόματο), συμβάσεις ονοματοδοσίας που κλιμακώνονται σε ομάδες και το επίπεδο tokens στοιχείων που αντιστοιχίζει σημασιολογικά tokens σε ακατέργαστες τιμές. Δημιουργεί τη δομή αρχείων tokens που μπορείτε να κάνετε commit απευθείας.
Είναι χρήσιμο αυτό το kit αν η εφαρμογή μου δεν στοχεύει iOS 26;
Ναι. Η δεξιότητα ui-ux-pro-max με 67 στυλ και 161 κανόνες λειτουργεί για οποιαδήποτε έκδοση iOS, πλατφόρμα και stack. Η δεξιότητα 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