Back to Details

design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Skills

设计技能

Skills for implementing Apple's modern design systems across platforms.
用于跨平台实现Apple现代设计系统的技能。

When This Skill Activates

本技能的适用场景

Use this skill when the user:
  • Asks about Liquid Glass design
  • Wants to implement modern Apple UI effects
  • Needs guidance on visual design patterns
  • Asks about materials, transparency, or blur effects
  • Wants to create fluid animations
当用户有以下需求时使用本技能：
  • 询问Liquid Glass设计相关内容
  • 想要实现现代Apple UI效果
  • 需要视觉设计模式相关指导
  • 询问材质、透明度或模糊效果
  • 想要创建流畅的动画

Available Skills

可用技能

liquid-glass/

liquid-glass/

Comprehensive Liquid Glass implementation for iOS 26+, macOS 26+.
  • SwiftUI 
    .glassEffect()
    API
  • AppKit 
    NSGlassEffectView
  • GlassEffectContainer patterns
  • Morphing transitions
  • Interactive effects
  • Button styles
适用于iOS 26+、macOS 26+的完整Liquid Glass实现方案。
  • SwiftUI 
    .glassEffect()
    API
  • AppKit 
    NSGlassEffectView
  • GlassEffectContainer模式
  • 变形过渡效果
  • 交互效果
  • 按钮样式

Key Principles

核心原则

1. Platform Consistency

1. 平台一致性

  • Follow Apple Human Interface Guidelines
  • Use system-provided APIs
  • Respect user appearance preferences
  • 遵循Apple人机界面指南
  • 使用系统提供的API
  • 尊重用户的外观偏好

2. Performance

2. 性能优化

  • Use GlassEffectContainer for multiple effects
  • Limit number of glass effects per view
  • Consider GPU resources
  • 对多个效果使用GlassEffectContainer
  • 限制每个视图的玻璃效果数量
  • 考虑GPU资源情况

3. Visual Hierarchy

3. 视觉层级

  • Glass effects create depth and layering
  • Use tints to indicate prominence
  • Combine with appropriate shadows
  • 玻璃效果可营造深度感和层次感
  • 使用色调来突出重要元素
  • 搭配合适的阴影效果

Reference Documentation

参考文档

  • /Users/ravishankar/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.md
  • /Users/ravishankar/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.md
  • /Users/ravishankar/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.md
  • /Users/ravishankar/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.md