Liquid Glass Design

affaan-m/ECC/skills/liquid-glass-design

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775无许可证275K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库4天前更新

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building iOS 26 Liquid Glass UI in SwiftUI, UIKit, or WidgetKit.

仅含说明Design & CreativeSoftware Development
AI 生成的概览

指导在 SwiftUI、UIKit 和 WidgetKit 中实现 Apple iOS 26 Liquid Glass 设计系统。

功能
提供应用 iOS 26 Liquid Glass 材质的参考模式与代码示例，涵盖玻璃效果、着色、交互修饰符、容器、形变过渡以及小组件渲染模式。内容覆盖 SwiftUI、UIKit 和 WidgetKit API，并包含设计决策、最佳实践与反模式。产出为指导说明和代码片段，而非文件或脚本。
适用场景
适用于构建或更新采用 Liquid Glass 设计语言的 iOS 26 应用，例如玻璃按钮、卡片、工具栏或小组件。也适合将现有模糊或材质效果迁移到新的 Liquid Glass API 时使用。
运行要求
无脚本或资源，仅为说明文档。需要 iOS 26 开发环境，并按需使用 SwiftUI、UIKit 或 WidgetKit。

Liquid Glass Design System (iOS 26)

Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.

When to Activate

  • Building or updating apps for iOS 26+ with the new design language
  • Implementing glass-style buttons, cards, toolbars, or containers
  • Creating morphing transitions between glass elements
  • Applying Liquid Glass effects to widgets
  • Migrating existing blur/material effects to the new Liquid Glass API

Core Pattern — SwiftUI

Basic Glass Effect

The simplest way to add Liquid Glass to any view:

swift
Text("Hello, World!")    .font(.title)    .padding()    .glassEffect()  // Default: regular variant, capsule shape

Customizing Shape and Tint

swift
Text("Hello, World!")    .font(.title)    .padding()    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

Key customization options:

  • .regular — standard glass effect
  • .tint(Color) — add color tint for prominence
  • .interactive() — react to touch and pointer interactions
  • Shape: .capsule (default), .rect(cornerRadius:), .circle

Glass Button Styles

swift
Button("Click Me") { /* action */ }    .buttonStyle(.glass)
Button("Important") { /* action */ }    .buttonStyle(.glassProminent)

GlassEffectContainer for Multiple Elements

Always wrap multiple glass views in a container for performance and morphing:

swift
GlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()
        Image(systemName: "eraser.fill")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()    }}

The spacing parameter controls merge distance — closer elements blend their glass shapes together.

Uniting Glass Effects

Combine multiple views into a single glass shape with glassEffectUnion:

swift
@Namespace private var namespace
GlassEffectContainer(spacing: 20.0) {    HStack(spacing: 20.0) {        ForEach(symbolSet.indices, id: \.self) { item in            Image(systemName: symbolSet[item])                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)        }    }}

Morphing Transitions

Create smooth morphing when glass elements appear/disappear:

swift
@State private var isExpanded = false@Namespace private var namespace
GlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .glassEffect()            .glassEffectID("pencil", in: namespace)
        if isExpanded {            Image(systemName: "eraser.fill")                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectID("eraser", in: namespace)        }    }}
Button("Toggle") {    withAnimation { isExpanded.toggle() }}.buttonStyle(.glass)

Extending Horizontal Scrolling Under Sidebar

To allow horizontal scroll content to extend under a sidebar or inspector, ensure the ScrollView content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed.

Core Pattern — UIKit

Basic UIGlassEffect

swift
let glassEffect = UIGlassEffect()glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)glassEffect.isInteractive = true
let visualEffectView = UIVisualEffectView(effect: glassEffect)visualEffectView.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.layer.cornerRadius = 20visualEffectView.clipsToBounds = true
view.addSubview(visualEffectView)NSLayoutConstraint.activate([    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),    visualEffectView.widthAnchor.constraint(equalToConstant: 200),    visualEffectView.heightAnchor.constraint(equalToConstant: 120)])
// Add content to contentViewlet label = UILabel()label.text = "Liquid Glass"label.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.contentView.addSubview(label)NSLayoutConstraint.activate([    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)])

UIGlassContainerEffect for Multiple Elements

swift
let containerEffect = UIGlassContainerEffect()containerEffect.spacing = 40.0
let containerView = UIVisualEffectView(effect: containerEffect)
let firstGlass = UIVisualEffectView(effect: UIGlassEffect())let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
containerView.contentView.addSubview(firstGlass)containerView.contentView.addSubview(secondGlass)

Scroll Edge Effects

swift
scrollView.topEdgeEffect.style = .automaticscrollView.bottomEdgeEffect.style = .hardscrollView.leftEdgeEffect.isHidden = true

Toolbar Glass Integration

swift
let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))favoriteButton.hidesSharedBackground = true  // Opt out of shared glass background

Core Pattern — WidgetKit

Rendering Mode Detection

swift
struct MyWidgetView: View {    @Environment(\.widgetRenderingMode) var renderingMode
    var body: some View {        if renderingMode == .accented {            // Tinted mode: white-tinted, themed glass background        } else {            // Full color mode: standard appearance        }    }}

Accent Groups for Visual Hierarchy

swift
HStack {    VStack(alignment: .leading) {        Text("Title")            .widgetAccentable()  // Accent group        Text("Subtitle")            // Primary group (default)    }    Image(systemName: "star.fill")        .widgetAccentable()  // Accent group}

Image Rendering in Accented Mode

swift
Image("myImage")    .widgetAccentedRenderingMode(.monochrome)

Container Background

swift
VStack { /* content */ }    .containerBackground(for: .widget) {        Color.blue.opacity(0.2)    }

Key Design Decisions

DecisionRationale
GlassEffectContainer wrappingPerformance optimization, enables morphing between glass elements
spacing parameterControls merge distance — fine-tune how close elements must be to blend
@Namespace + glassEffectIDEnables smooth morphing transitions on view hierarchy changes
interactive() modifierExplicit opt-in for touch/pointer reactions — not all glass should respond
UIGlassContainerEffect in UIKitSame container pattern as SwiftUI for consistency
Accented rendering mode in widgetsSystem applies tinted glass when user selects tinted Home Screen

Best Practices

  • Always use GlassEffectContainer when applying glass to multiple sibling views — it enables morphing and improves rendering performance
  • Apply .glassEffect() after other appearance modifiers (frame, font, padding)
  • Use .interactive() only on elements that respond to user interaction (buttons, toggleable items)
  • Choose spacing carefully in containers to control when glass effects merge
  • Use withAnimation when changing view hierarchies to enable smooth morphing transitions
  • Test across appearances — light mode, dark mode, and accented/tinted modes
  • Ensure accessibility contrast — text on glass must remain readable

Anti-Patterns to Avoid

  • Using multiple standalone .glassEffect() views without a GlassEffectContainer
  • Nesting too many glass effects — degrades performance and visual clarity
  • Applying glass to every view — reserve for interactive elements, toolbars, and cards
  • Forgetting clipsToBounds = true in UIKit when using corner radii
  • Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance
  • Using opaque backgrounds behind glass — defeats the translucency effect

When to Use

  • Navigation bars, toolbars, and tab bars with the new iOS 26 design
  • Floating action buttons and card-style containers
  • Interactive controls that need visual depth and touch feedback
  • Widgets that should integrate with the system's Liquid Glass appearance
  • Morphing transitions between related UI states

来源与署名

来源：affaan-m/ECC位于skills/liquid-glass-design提交ef648e0

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 affaan-m/ECC 的技能

Unified Notifications Ops

affaan-m

设计统一的通知策略，对来自 GitHub、Linear、钩子和聊天工具的通知进行分类、路由、去重和升级。

Productivity & Workflow275K4天前更新

Verification Loop

affaan-m

执行六阶段代码验证流程，并生成 PASS/FAIL 就绪报告。

Software Development275K4天前更新

Ui To Vue

affaan-m

将批量 UI 设计截图转换为使用 Vant、Element Plus 或 Ant Design Vue 的 Vue 3 组件。

Software Development275K4天前更新

Unified Memory

affaan-m

指导智能体通过本地 ECC Memory Vault 在不同执行框架之间共享持久上下文与交接信息。

AI & Agents275K4天前更新

Visa Doc Translate

affaan-m

通过 OCR 将签证文件图片翻译成英文，并生成原图与译文对照的双语 PDF。

Documents & Office275K4天前更新

Team Builder

affaan-m

交互式选择器：发现可用的智能体角色，让用户最多选择五个，并行执行同一任务并汇总结果。

AI & Agents275K4天前更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative180K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative180K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative180K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新