ios-glass-ui-designer

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

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

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.

Editorial Designer


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


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


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

• Typography-first — Large, exp