🎯

ios-glass-ui-designer

🎯Skill

from heyman333/atelier-ui

VibeIndex|
What it does

ios-glass-ui-designer skill from heyman333/atelier-ui

πŸ“¦

Part of

heyman333/atelier-ui(5 items)

ios-glass-ui-designer

Installation

πŸ“‹ No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer
27Installs
15
-
Last UpdatedJan 15, 2026

Skill Details

SKILL.md

Overview

# Atelier UI

A collection of UI design skills for premium digital products.

Available Skills

| Skill | Description |

|-------|-------------|

| editorial-designer | Editorial/fashion magazine aesthetic for lifestyle apps |

| apple-ui-designer | iOS Human Interface Guidelines, native Apple feel |

| ios-glass-ui-designer | iOS-native glass materials (translucency, blur, depth) with restraint |

Installation

Via Marketplace:

```bash

claude plugin marketplace add heyman333/atelier-ui

claude plugin install heyman333@atelier-ui

```

To update:

```bash

claude plugin marketplace update atelier-ui

```

Codex (project-scoped):

1) Add skills// to your repo

2) Register it in README.md or AGENTS.md:

- editorial-designer: ... (file: skills/editorial-designer/SKILL.md)

- apple-ui-designer: ... (file: skills/apple-ui-designer/SKILL.md)

3) Use: $editorial-designer or $apple-ui-designer

Codex (global):

1) Copy the folder to $CODEX_HOME/skills/ (usually ~/.codex/skills/)

2) Use: $editorial-designer or $apple-ui-designer

Overview

Atelier UI provides multiple design skills for different aesthetics:

editorial-designer

Brings the refined aesthetic of fashion editorials and magazine layouts to digital product design. Interfaces feel curated, confident, and intentional.

apple-ui-designer

Applies iOS Human Interface Guidelines and modern Apple design language. Interfaces feel native, calm, and inevitable β€” like first-party Apple apps.

ios-glass-ui-designer

Applies iOS material system with tasteful glass effects (translucency, blur, depth). Glass is used as a tool for hierarchy and focus β€” not as decoration. Perfect for modern iOS interfaces that need layered depth without overdoing glassmorphism.

Design Examples

Editorial Designer

![Editorial Design Example](images/image.jpg)

This example showcases a fashion e-commerce app designed with editorial principles:

  • Bold Typography β€” "GET READY TO SLAY IN STYLE" demonstrates confident, editorial-style headlines
  • Dark & Light Contrast β€” Strategic use of dark cards against light backgrounds creates visual depth
  • Accent Color Strategy β€” Yellow serves as a cohesive accent throughout, from clothing imagery to UI elements
  • Minimal UI Chrome β€” Clean buttons, subtle icons, and text-based navigation reduce visual noise
  • Card-Based Layout β€” Rounded corners and generous padding create a premium, tactile feel
  • Whitespace as Design β€” Intentional breathing room guides the eye and elevates content

Apple UI Designer

![Apple Music UX Case Study - Dock](images/apple.png)

This Apple Music "Now Playing" UX case study demonstrates Apple-native design principles:

  • Translucency & Depth β€” Frosted glass dock and sheets create layered visual hierarchy
  • Progressive Disclosure β€” Information reveals contextually through swipe-up dock interaction
  • System-like Components β€” Native bottom sheets, standard iOS control layouts
  • Touch Target Clarity β€” Large, comfortable hit areas for playback controls
  • Color Restraint β€” Accent color (pink) used sparingly, letting content breathe
  • Gesture-first Design β€” Swipe-up dock, drag-to-dismiss sheets feel native to iOS

iOS Glass UI Designer

![iOS Glass UI - Widgets](images/glass-ui.webp)

This iOS home screen demonstrates the glass material system in action:

  • Material Hierarchy β€” Different blur/opacity levels based on content needs (weather vs reminders vs controls)
  • Background Adaptation β€” Glass intensity scales with background complexity
  • Legibility First β€” Text remains clear despite translucency
  • Restraint β€” Glass only where it aids hierarchy, not everywhere
  • Depth Without Borders β€” Separation achieved through material, not outlines
  • System Consistency β€” All glass surfaces feel unified and native

Design Principles

  • Typography-first β€” Large, exp