iOS 26 Liquid Glass UI Kit — 5 Claude Code skills, 67 styles, 161 design rules
Click to zoom
1 / 4
UI SkillsClaude CodeiOS 26Instant Download

iOS 26 Liquid Glass UI KitSwiftUI + UIKit + Web · 5 Skills · 67 Styles · 161 Rules

4.9 / 5 (29 reviews)
$29
One-time purchaseNo subscription

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
Buy Now — $29 One-Time
Instant Download
Lifetime Access
Free 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-design

Core 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-max

161 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-styling

Component Implementation

Translates design decisions into code. shadcn/ui components, Tailwind CSS utilities, React Native equivalents — correct implementation pattern for your specific stack.

/design-system

Design Tokens & Themes

Design tokens as CSS custom properties and Swift constants, theme switching (light/dark/auto), token architecture that scales across teams and platforms.

/design

Brand & 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.

VariantWhen to UseGPU Cost
.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 feedbackMedium

Performance

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.

Reduce Transparency fallback — complete SwiftUI + UIKit code
WCAG AA contrast ratios against glass backgrounds
VoiceOver labels for glass interactive elements
Motion reduction for glass morphing animations
.accessibilityLabel() patterns for tinted glass surfaces
Dynamic Type scaling inside glass containers

Web Adaptation

CSS Liquid Glass

Replicate iOS 26's glass aesthetic on the web — including tinted variants, browser fallbacks, and compatibility matrix.

CSS Properties
backdrop-filterblur(20px) saturate(180%)Core glass blur — primary implementation
backgroundrgba(255,255,255,0.12)Translucent fill layer
color-mix()in oklch, var(--bg) 80%, white 20%Tinted variant — absorbs content color
border1px solid rgba(255,255,255,0.18)Specular highlight edge
@supportsnot (backdrop-filter: blur())Fallback for non-supporting browsers

Design 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.

Glassmorphism8 styles

Frost Glass, Aurora Glass, Deep Space Glass

Soft UI7 styles

Neumorphic Light, Soft Pastel, Cotton Cloud

Minimalist10 styles

Pure Minimal, Mono, Swiss Grid

Brutalist8 styles

Raw Brutalist, Neo-Brutalist, Punk Interface

Dark Premium9 styles

Obsidian, Carbon, Midnight Blue

Nature-Inspired9 styles

Forest Calm, Ocean Depths, Desert Warm

iOS Native3 styles

Liquid Glass (iOS 26), Vibrancy (iOS 17), Material (iOS 15)

Each style generates:

Hex color palette (primary, secondary, accent, neutral)
Google Fonts pairing recommendation
8-step spacing scale
Component variant specifications
Accessibility compliance checklist
Dark mode token mapping

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 Skills สำหรับการใช้งานภาษาดีไซน์ Liquid Glass ของ Apple iOS 26 ครอบคลุม SwiftUI, UIKit, WidgetKit และการปรับ CSS Web พร้อมโค้ดพร้อมใช้งานจริง, รูปแบบการเข้าถึง, กฎการเพิ่มประสิทธิภาพ และตัวสร้างระบบดีไซน์ 67 สไตล์พร้อม 161 กฎการอนุมาน UI

รูปแบบ Liquid Glass ห้าอย่างคืออะไรและควรใช้แต่ละอันเมื่อไหร่?

ห้ารูปแบบได้แก่: .regular — ค่าเริ่มต้นสำหรับพื้นผิวมาตรฐานเช่นการ์ดและแถบนำทาง .tinted() — เมื่อกระจกควรดูดซับและสะท้อนสีของเนื้อหาด้านล่าง .prominent — สำหรับโมดัลและชีตที่ต้องการลำดับความสำคัญทางภาพที่แข็งแกร่งขึ้น .thin — รูปแบบที่ละเอียดอ่อนที่สุดสำหรับแถบเครื่องมือและ Chrome รองที่ไม่ควรแข่งขันกับเนื้อหา .interactive() — สำหรับปุ่มและองค์ประกอบที่แตะได้ที่ตอบสนองต่อการสัมผัสทางภาพ

Kit จัดการกับกรณีการเข้าถึง Reduce Transparency อย่างไร?

Skill liquid-glass-design มีโค้ด Fallback ลดความโปร่งใสที่สมบูรณ์ เมื่อผู้ใช้เปิดใช้งานลดความโปร่งใส เอฟเฟกต์กระจกจะถูกแทนที่ด้วยทางเลือกที่ทึบแสงซึ่งรักษาเค้าโครงและลำดับชั้นภาพเดิม Kit มี SwiftUI Environment Check และเทียบเท่า UIKit สำหรับ Codebase เก่า พร้อมคำแนะนำอัตราส่วนคอนทราสต์ WCAG AA สำหรับพื้นผิวกระจก

กฎประสิทธิภาพสำหรับ Liquid Glass คืออะไร?

Kit บังคับใช้กฎประสิทธิภาพหลักสี่ข้อ: จำกัดองค์ประกอบกระจกไว้ที่ 1–3 ชิ้นต่อหน้าจอ, อย่าใส่กระจกทุก Cell ในรายการ, หลีกเลี่ยง Glass View ที่ซ้อนกันลึก และทดสอบบน iPhone 12 เป็นเป้าหมายอุปกรณ์ขั้นต่ำ เป้าหมาย Benchmark คือขั้นต่ำ 60fps และประมาณ 15–30MB Memory Overhead ต่อเลเยอร์กระจก

ฉันสามารถใช้ Kit นี้สำหรับโปรเจกต์ Web ได้หรือไม่?

ได้ Skill liquid-glass-design มีการปรับ CSS ด้วย backdrop-filter: blur(20px) saturate(180%), color-mix() สำหรับรูปแบบ Tinted และรูปแบบ Fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ backdrop-filter Kit มี Matrix ความเข้ากันได้ของเบราว์เซอร์เพื่อให้คุณทราบว่าเบราว์เซอร์ใดต้องการ Fallback

67 สไตล์ UI ใน ui-ux-pro-max คืออะไร?

67 สไตล์ครอบคลุม 7 หมวดหมู่: Glassmorphism (Frost Glass, Aurora Glass, Deep Space Glass ฯลฯ), Soft UI (Neumorphic Light, Soft Pastel, Cotton Cloud), มินิมอล (Pure Minimal, Mono, Swiss Grid), บรูทัลลิสต์ (Raw Brutalist, Neo-Brutalist, Punk Interface), Dark Premium (Obsidian, Carbon, Midnight Blue), แรงบันดาลใจจากธรรมชาติ (Forest Calm, Ocean Depths, Desert Warm) และ iOS Native (Liquid Glass iOS 26, Vibrancy iOS 17, Material iOS 15) แต่ละสไตล์มีจานสี, คู่ฟอนต์, สเกลระยะห่างและหมายเหตุการเข้าถึง

ตัวสร้างระบบดีไซน์ทำงานอย่างไร?

คุณอธิบายแอปของคุณ — มันทำอะไร ผู้ใช้คือใคร อารมณ์ที่ต้องการคืออะไร Skill ui-ux-pro-max วิเคราะห์ความต้องการของคุณตามกฎการอนุมานดีไซน์ 161 ข้อและแนะนำสไตล์ที่เหมาะสมที่สุดจาก 67 ตัวเลือกที่ผ่านการตรวจสอบแล้ว จากนั้นสร้างระบบดีไซน์ที่สมบูรณ์: จานสี Hex, คู่ Google Fonts, สเกลระยะห่าง, สเปคคอมโพเนนต์ และรายการตรวจสอบการเข้าถึง — ทั้งหมดในเอาท์พุตเดียว

ใช้งานได้กับ Codebase เก่าของ UIKit หรือไม่?

ได้ Skill liquid-glass-design ครอบคลุมทั้ง Modifier glassEffect ของ SwiftUI และ API UIGlassEffect สำหรับ UIKit Codebase เก่าได้รับรูปแบบการใช้งานที่เทียบเท่าและคำแนะนำด้านประสิทธิภาพและการเข้าถึงเช่นเดียวกับโปรเจกต์ SwiftUI

Skill design-system สร้างอะไร?

Skill design-system สร้าง Design Token เป็น CSS Custom Properties และค่าคงที่ Swift, สถาปัตยกรรมการสลับธีมที่สมบูรณ์ (สว่าง/มืด/อัตโนมัติ), แบบแผนการตั้งชื่อ Token ที่ขยายได้ข้ามทีม และเลเยอร์ Token คอมโพเนนต์ที่แมป Semantic Token ไปยังค่าดิบ มันสร้างโครงสร้างไฟล์ Token ที่คุณสามารถ Commit เข้าโปรเจกต์ได้โดยตรง

Kit นี้มีประโยชน์หากแอปของฉันไม่ได้กำหนดเป้าหมาย iOS 26 หรือไม่?

ใช่ Skill ui-ux-pro-max ที่มี 67 สไตล์และกฎการอนุมาน 161 ข้อทำงานได้กับ iOS ทุกเวอร์ชัน ทุกแพลตฟอร์ม และทุก Stack Skill ui-styling สร้างคอมโพเนนต์ shadcn/ui, ยูทิลิตี้ Tailwind และเทียบเท่า React Native Skill 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 — $29

Secure checkout via Gumroad · Instant digital delivery