# ios-glass-ui-designer

Redesigns a mobile app UI to feel iOS-native: glass materials, SF Pro type, safe-area handling. Useful when a screen looks out of place on iPhone.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 504 installs · ★ 37
- Author: heyman333
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/heyman333/atelier-ui/tree/HEAD/skills/ios-glass-ui-designer/SKILL.md
- Updated: 2026-01-15
- HTML: https://affpapa.org/en/nevibecode/skills/ios-glass-ui-designer

## What it does

The skill puts the agent in the role of a senior iOS product designer and walks a screen through Apple Human Interface Guidelines. Materials come in three thicknesses: ultra-thin for overlays and floating controls, regular for cards, thick for bottom sheets and modals. Opacity and blur scale with how busy the background is underneath.

Each redesigned screen comes back with six parts: design intent, layout structure with spacing and safe-area calls, a material map, a typography map, motion notes, and the iOS-native justification. There is an avoid list too — no neon, glow, heavy gradients or fake reflections. Glass goes only where it sharpens hierarchy, not across the whole interface.

The skill is iOS-first, with Android as a secondary assumption. On a cross-platform codebase you will have to rework the navigation and sheet advice for Android yourself. It reasons about design; it does not write the code for you.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ios-glass-ui-designer/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ios-glass-ui-designer/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ios-glass-ui-designer/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ios-glass-ui-designer/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install heyman333/atelier-ui ios-glass-ui-designer
```

2. **Manually: put the files in place**
- File: `.github/skills/ios-glass-ui-designer/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/heyman333/atelier-ui --path skills/ios-glass-ui-designer
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ios-glass-ui-designer/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/heyman333/atelier-ui/tree/HEAD/skills/ios-glass-ui-designer/SKILL.md

## When to use it
- stop an app from feeling foreign on iPhone
- assign glass layers to the right material thickness
- build text hierarchy from size and weight instead of color
- move modals to bottom sheets with drag-to-dismiss
- strip neon and heavy gradients out of a layout

## Example prompts
- Redesign the profile screen as native iOS, glass only on the nav bar and bottom sheet
- Audit this layout: where is the glass overused, and what should go back to solid surfaces
- Build a material map for the feed screen: ultra-thin, regular, thick

## Similar
- [ios-liquid-glass](https://affpapa.org/en/nevibecode/skills/ios-liquid-glass.md) — skill · 803 installs
- [expo-liquid-glass](https://affpapa.org/en/nevibecode/skills/expo-liquid-glass.md) — skill · 476 installs
- [ios-hig-design](https://affpapa.org/en/nevibecode/skills/ios-hig-design.md) — skill · 8200 installs
- [apple-hig-designer](https://affpapa.org/en/nevibecode/skills/apple-hig-designer.md) — skill · 1000 installs
- [ios-ux-design](https://affpapa.org/en/nevibecode/skills/ios-ux-design.md) — skill · 543 installs
- [swiftui-liquid-glass](https://affpapa.org/en/nevibecode/skills/swiftui-liquid-glass.md) — skill · 121 installs

From the same set: [heyman333/atelier-ui](https://affpapa.org/en/nevibecode/by/heyman333/atelier-ui.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md