# apple-ui-designer

This skill directs AI agents to redesign mobile app screens according to Apple Human Interface Guidelines. It brings native iOS typography, translucency, and system components to your interface specs.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 865 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/apple-ui-designer/SKILL.md
- Updated: 2026-01-15
- HTML: https://affpapa.org/en/nevibecode/skills/apple-ui-designer

## What it does

The skill assigns the agent the role of a senior Apple-style designer. When reviewing an interface, it replaces custom widgets with native iOS equivalents. It enforces SF Pro typography, builds visual weight through font size instead of color, and relies on whitespace rather than hard border outlines. Layouts respect safe areas and one-handed thumb reach.

Every redesigned screen follows a five-part response structure. The model specifies the design intent, outlines the layout hierarchy, details typography choices, and defines transitions. It also justifies changes using Apple design principles. Gimmicky visual trends are discarded immediately.

Because the skill treats iOS as primary and Android as secondary, projects needing Material Design patterns will clash with these rules. It rejects heavily decorated components in favor of stock system behavior.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add heyman333/atelier-ui --skill apple-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/apple-ui-designer/SKILL.md

## When to use it
- Redesign mobile screens to match Apple Human Interface Guidelines
- Clean up cluttered cards and replace rigid borders with system spacing
- Organize navigation around native bottom sheets and standard bars
- Build visual hierarchy using font weights instead of multiple accent colors

## Example prompts
- Redesign this checkout screen to look like a native first-party iOS app
- Review my profile settings layout against Apple Human Interface Guidelines
- Restructure this list view using SF Pro typography, standard separators, and large navigation titles

## Similar
- [hig](https://affpapa.org/en/nevibecode/skills/hig.md) — skill · 786 installs
- [hig-patterns](https://affpapa.org/en/nevibecode/skills/hig-patterns.md) — skill · 685 installs
- [apple-hig-expert](https://affpapa.org/en/nevibecode/skills/apple-hig-expert.md) — skill · 662 installs
- [apple-hig-designer](https://affpapa.org/en/nevibecode/skills/apple-hig-designer.md) — skill · 1000 installs
- [axiom-design](https://affpapa.org/en/nevibecode/skills/axiom-design.md) — skill · 1400 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