Communitygithub.com

프리미엄 리퀴드 글라스

Android(Compose), iOS(SwiftUI), Flutter, 웹(CSS/Tailwind) 등 다양한 플랫폼에서 Apple 스타일의 프리미엄 리퀴드 글라스 인터페이스를 설계하고 구축합니다. 떠있는 반투명 네비게이션, 시트, 컨트롤을 조용한 불투명 콘텐츠 위에 배치하며, 다크/라이트 토큰, 가독성 검사, 접근성 대체, 블러 성능 제한 및 참고 화면을 위한 AI 이미지 생성 프롬프트를 제공합니다.

프리미엄 리퀴드 글라스란 무엇인가요?

이 스킬은 개발자가 여러 플랫폼(Android Jetpack Compose, iOS SwiftUI, Flutter, 웹 CSS/Tailwind)에서 Apple 스타일의 프리미엄 리퀴드 글라스(유리 질감) 인터페이스를 구축할 수 있도록 돕습니다. 핵심 원칙은 '유리(glass)'는 콘텐츠 위에 떠 있는 컨트롤을 위한 소재이며, 모든 곳에 남용해서는 안 된다는 것입니다. 스킬은 다섯 가지 엄격한 규칙을 준수합니다: 콘텐츠는 절대 유리가 아니어야 하며, 유리는 떠 있는 레이어에만 사용하고, 유리 위에 유리를 절대 배치하지 않으며, 가독성(4.5:1 명암비)이 디자인보다 우선하고, 모든 유리 표면은 솔리드 대체재를 가져야 합니다. 또한 성능 예산(최대 동시 2-3개의 블러 레이어), 접근성 모드(투명도 감소, 큰 글꼴, 동작 감소), 플랫폼별 구현 세부 사항(Android의 RenderEffect 한계, iOS의 네이티브 materials, Flutter의 RepaintBoundary 필요성, 웹의 `-webkit-` 접두사 필수 등)을 다룹니다. 이 스킬의 참조 화면 생성을 위한 AI 이미지 프롬프트 모드와 기존 UI 디자인이나 코드베이스의 유리 사용을 감사하는 리뷰 모드도 포함되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add Ajit-ApTech/Premium-liquid-glass
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

프리미엄 리퀴드 글라스은(는) 무엇을 하나요?

목표: 차분하고 공간감 있으며 고급스러운 인터페이스를 만드는 것입니다. 유리는 콘텐츠 위에 떠 있는 컨트롤을 위한 소재입니다. 어디에나 뿌릴 수 있는 스타일이 아닙니다. 성공 테스트: 사용자는 "깔끔하고 계층적이다"라고 느껴야 하며, "누군가 모든 것에 블러를 추가했다"라고 말해서는 안 됩니다.

이 스킬은 Android (Compose), iOS (SwiftUI), Flutter, 웹 (CSS / Tailwind) 전반에서 소재, 계층, 깊이, 모션 및 접근성을 제어합니다. 프로젝트 자체의 브랜드는 정체성, 팔레트 및 카피를 제어합니다. 기본 브랜드 토큰은 assets/tokens.json에 있습니다.

0. 안전 및 범위

  • 사용자가 선택한 프로젝트 내에서만 작업하십시오. 시크릿, 키 또는 환경 변수를 읽지 마십시오. 네트워크 요청을 하거나 패키지를 설치하지 마십시오. 라이브러리가 필요하면 이름을 지정하고 사용자가 결정하도록 하십시오.
  • 기존 애플리케이션 코드를 수정하기 전에 변경 사항을 제안하십시오.
  • 가상의 예시 콘텐츠만 사용하십시오.
  • Apple이 아닌 플랫폼에서 Apple 글꼴(San Francisco) 또는 SF Symbols를 사용하지 마십시오. Inter, Roboto 또는 플랫폼에 적합한 글꼴과 Material Symbols/Lucide 스타일의 아이콘을 사용하십시오. iOS(SwiftUI)에서는 네이티브 SF Symbols 및 시스템 글꼴이 표준입니다.
  • (VERIFY)로 표시된 사실은 API 버전에 따라 오래될 수 있으므로 항상 프로젝트 종속성을 확인하십시오.

1. 다섯 가지 엄격한 규칙

  1. 콘텐츠는 절대 유리가 아닙니다. 카드, 목록 행, 양식, 페이지 배경 및 미디어는 불투명 또는 부드러운 표면으로 유지됩니다.
  2. 유리는 떠 있는 레이어에만 사용: 하단 네비게이션 필, 스크롤 콘텐츠 위의 상단 바, 플로팅 액션 버튼, 하단 시트 및 메뉴, 검색 필드, 토스트/스낵바, 작은 떠 있는 칩.
  3. 절대 유리 위에 유리를 배치하지 마십시오. 유리 표면 내부에서는 항목을 단색 채움, 미묘한 구분선 또는 불투명도 차이로 분리하십시오.
  4. 가독성이 디자인보다 우선입니다. 본문 텍스트는 최악의 배경에서 4.5:1 명암비(큰 텍스트 및 아이콘은 3:1)가 필요합니다. scripts/contrast_check.py를 실행하십시오.
  5. 모든 유리 표면에는 솔리드 대체재가 있습니다 (이전 OS 버전, 투명도 감소 접근성 설정, 절전 모드, 낮은 GPU 용량 또는 backdrop-filter가 없는 브라우저).

요소에 유리를 적용하기 전에 질문: "이 소재는 어떤 기능적 역할을 전달합니까?" 유효한 답변: 스크롤 콘텐츠 위에 떠 있습니다. 일시적이거나 상황에 따라 다릅니다. 콘텐츠가 아래에서 움직이는 동안에도 접근 가능해야 합니다. 답변이 없으면 유리를 사용하지 마십시오.

2. 범용 워크플로우

  1. 검사: 대상 플랫폼(Android Compose, iOS SwiftUI, Flutter, 웹), OS 버전 제한, 기존 테마 토큰, 네비게이션 구조, 접근성 요구 사항 및 성능 목표.
  2. 레이어 맵 (코드 전): 요소 -> 레이어 (콘텐츠 / 구조 / 떠 있음) -> 유리 여부 -> 계층 -> 이유로 구성된 표를 계획과 함께 제시하십시오.
  3. 토큰: assets/tokens.json에서 시작하고 브랜드 색상을 조정한 후 두 모드의 모든 계층에 대해 python scripts/contrast_check.py --tokens assets/tokens.json을 다시 실행하십시오.
  4. 플랫폼 템플릿으로 빌드:
    • Android: assets/GlassTheme.kt 및 references/compose-implementation.md
    • iOS (SwiftUI): assets/GlassView.swift 및 references/swiftui-implementation.md
    • Flutter: assets/glass_theme.dart 및 references/flutter-implementation.md
    • 웹 (CSS/Tailwind): assets/glass.css, assets/tailwind-glass.config.js 및 references/web-implementation.md
  5. 확인: references/review-checklist.md 및 scripts/audit_compose.py (Android)로 확인하십시오. 증거(명암비, 화면당 유리 레이어 수, 대체 렌더링)를 보고하십시오.

3. 소재 계층 (시작 값)

계층용도블러채움 (다크)채움 (라이트)
없음콘텐츠, 카드, 목록, 배경-불투명 표면불투명 표면
얇음아이콘 전용 또는 큰 레이블 컨트롤, 칩16 dp/pxink @ 0.55white @ 0.55
보통네비게이션 필, 상단 바, 검색 필드, FAB, 토스트24 dp/pxink @ 0.66white @ 0.70
두꺼움시트, 메뉴, 대화상자, 텍스트가 많은 오버레이32 dp/pxink @ 0.78white @ 0.82
스크림모달 시트 뒤의 딤0-8 dp/pxblack @ 0.20-0.45black @ 0.20-0.45

세부 사항 및 확인된 명암비: references/tokens.md. 채움은 순수한 흰색이 아닌 표면 ink 색상으로 착색되므로 다크 모드 텍스트가 밝은 배경에서도 살아남습니다.

4. 플랫폼 현실 점검

Android (Jetpack Compose)

  • Modifier.blur() / RenderEffect는 요소 자체 콘텐츠를 흐리게 하고 뒤에 있는 것은 흐리게 하지 않습니다. 실제 배경 블러에는 라이브러리(Haze는 Apache-2.0이며 Compose 지원) 또는 대화상자용 창 블러(API 31+)가 필요합니다.
  • 블러 효과는 Android 12 (API 31) 이상이 필요합니다 (VERIFY). API 31 미만에서는 항상 솔리드 대체 표면을 렌더링하십시오.
  • 예산: 화면당 최대 2-3개의 동시 블러 레이어. 목록 항목을 절대 흐리게 하지 마십시오.
  • 전체 세부 사항: references/compose-implementation.md.

iOS (SwiftUI)

  • 네이티브 SwiftUI materials 사용: .ultraThinMaterial (얇은 계층), .thinMaterial / .regularMaterial (보통 계층), .thickMaterial (두꺼운 계층).
  • RoundedRectangle(cornerRadius: ..., style: .continuous)로 iOS 연속 모서리를 지원하십시오.
  • 바텀 시트에는 .presentationBackground(.thinMaterial)을 사용하십시오 (iOS 16.4+).
  • 전체 세부 사항: references/swiftui-implementation.md.

Flutter

  • ClipRRect로 감싼 BackdropFilter와 ImageFilter.blur(sigmaX: tier.blur, sigmaY: tier.blur)를 사용하십시오.
  • 항상 RepaintBoundary로 감싸 매 프레임마다 배경 블러를 다시 칠하지 않도록 하십시오.
  • ListView.builder 또는 GridView.builder 항목 내에서 절대 BackdropFilter를 사용하지 마십시오.
  • 전체 세부 사항: references/flutter-implementation.md.

웹 (CSS / Tailwind CSS)

  • 크로스 브라우저 지원을 위해 항상 -webkit-backdrop-filter: blur(...)와 backdrop-filter: blur(...)를 모두 포함하십시오 (Safari는 -webkit- 필요).
  • 이전 브라우저를 위해 항상 @supports not (backdrop-filter: blur(1px)) 대체를 지정하십시오.
  • 항상 @media (prefers-reduced-transparency: reduce) 대체를 구현하여 솔리드 배경으로 전환하십시오.
  • 전체 세부 사항: references/web-implementation.md.

5. 접근성 모드 (모두 구현)

  • 투명도 감소: 시스템 접근성 플래그 확인 (웹의 prefers-reduced-transparency, SwiftUI의 accessibilityReduceTransparency, Flutter의 accessibleNavigation 또는 Android의 인앱 토글). 유리를 가시적인 1 dp/px 테두리가 있는 솔리드 표면 토큰으로 바꾸십시오.
  • 큰 글꼴 (200%) 및 화면 읽기 프로그램: 색상으로만 전달되는 정보 없음, 아이콘 전용 컨트롤에 레이블, 논리적 포커스 순서.
  • 동작 감소: 스프링 움직임을 빠른 페이드(150 ms)로 대체하고 상태 피드백을 유지하십시오.
  • 터치 대상: 최소 48x48 dp / 44x44 pt. 제스처(스와이프)는 항상 버튼 또는 접근 가능한 메뉴 대체를 제공하십시오.

6. 컴포넌트 및 지오메트리

네비게이션 필, 상단 바, FAB, 시트, 검색 필드, 칩, 카드 및 트리아지 스택의 사양: references/components.md. 일관된 모서리 반경 사용:

  • 작은 칩: 999 (전체 필)
  • 작은 컨트롤 / 버튼: 16 dp/pt
  • 콘텐츠 카드 (불투명): 24 dp/pt
  • 떠 있는 네비게이션 필: 28 dp/pt
  • 모달 시트: 32 dp/pt
  • 중첩된 요소 반경 = 외부 반경 - 패딩.

7. 모션 및 햅틱

스프링 애니메이션 (250-350 ms 지속 시간), 짧은 페이드 (150 ms), 최소 또는 제로 바운스 오버슈트. 임계값 트리거(스와이프 커밋, 필 선택)에서 미묘한 햅틱 틱. 눌린 상태: 스케일 0.97에 부드러운 하이라이트 추가. 시스템 동작 감소 설정을 존중하십시오.

8. 이미지 프롬프트 모드 (참조 화면)

UI 목업 프롬프트를 생성할 때 references/image-prompts.md를 따르십시오: 화면당 하나의 프롬프트, 자체 포함된 스타일 블록, 정확한 화면 텍스트, 떠 있는 레이어에만 유리, "카드는 불투명", 플랫폼 정확한 상태 표시줄. 출력물을 레이아웃 및 분위기 참조로 사용한 다음 디자인 토큰으로 코드로 구현하십시오.

9. 리뷰 모드

디자인 또는 코드베이스 리뷰를 요청받은 경우:

  1. 각 UI 요소를 해당 레이어(콘텐츠 vs 떠 있음)로 분류하십시오.
  2. 화면당 유리 레이어 수를 계산하십시오 (최대 2-3개 예산 강제).
  3. 안티 패턴(카드 위 유리, 유리 안에 중첩된 유리, 대체재 누락)을 스캔하십시오.
  4. 명암비 확인을 실행하십시오 (python scripts/contrast_check.py --tokens assets/tokens.json).
  5. Android 프로젝트의 경우 python scripts/audit_compose.py <src>를 실행하십시오.
  6. references/review-checklist.md의 수정 지침과 함께 심각도별로 결과를 나열하십시오.

10. 참조 및 파일

  • references/principles.md - 핵심 공간 원칙 및 Apple 디자인 영감
  • references/tokens.md - 토큰 테이블, 색상 값 및 확인된 명암비
  • references/compose-implementation.md - Android Compose 아키텍처 및 코드 스니펫
  • references/swiftui-implementation.md - iOS SwiftUI 아키텍처 및 코드 스니펫
  • references/flutter-implementation.md - Flutter 아키텍처 및 코드 스니펫
  • references/web-implementation.md - 웹 CSS 및 Tailwind CSS 아키텍처 및 코드 스니펫
  • references/components.md - 컴포넌트 지오메트리, 레이아웃 및 상태
  • references/image-prompts.md - AI 목업 생성을 위한 프롬프트 템플릿
  • references/review-checklist.md - 품질 게이트 및 안티 패턴
  • scripts/contrast_check.py - WCAG 명암비 검증 스크립트
  • scripts/audit_compose.py - Compose 정적 스캐너 스크립트
  • assets/tokens.json - 완전한 디자인 토큰 스키마
  • assets/GlassTheme.kt - Jetpack Compose 템플릿
  • assets/GlassView.swift - SwiftUI 템플릿
  • assets/glass_theme.dart - Flutter 템플릿
  • assets/glass.css 및 assets/tailwind-glass.config.js - 웹 CSS 및 Tailwind 템플릿

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Ajit-ApTech/premium-glass-android

Design and build premium, Apple-inspired "liquid glass" interfaces for Android apps with Jetpack Compose - floating translucent navigation, sheets and controls over calm opaque content, with dark/light tokens, legibility checks, accessibility fallbacks, blur-performance limits, and AI image-generation prompts for reference screens. Use when asked for a premium, Apple-like, iOS 26, liquid-glass, glassmorphism or frosted-glass look on Android or Compose, to write screen mock-up prompts for such an app, or to review UI code or designs for glass misuse. Not for web-only or SwiftUI-only work, and never for copying Apple fonts, icons or logos.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community