# Ios Glass Ui Designer

> Redesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use when: iOS design, glass UI, translucent UI, Apple-style, iOS material system, glassmorphism, blur effects, iOS-native interface, mobile app redesign, SF Pro typography.

- **Type:** Skill
- **Install:** `agentstack add skill-juanmarchetto-agent-skills-ios-glass-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [JuanMarchetto](https://agentstack.voostack.com/s/juanmarchetto)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [JuanMarchetto](https://github.com/JuanMarchetto)
- **Source:** https://github.com/JuanMarchetto/agent-skills/tree/main/skills/ios-glass-ui
- **Website:** https://github.com/JuanMarchetto/agent-skills

## Install

```sh
agentstack add skill-juanmarchetto-agent-skills-ios-glass-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# iOS Glass UI Designer

Redesign or audit mobile app UI screens to feel iOS-native with restrained glass materials.

## Workflow

### Step 1: Analyze Current Screen
Read the screen's code/design. Identify:
- Current material usage (solid, transparent, blur)
- Typography (is it SF Pro-like? semantic sizes?)
- Color palette (neutral base? single accent?)
- Layout (safe-area aware? touch targets 44pt+?)
- Navigation pattern (standard iOS or custom?)
- Component style (system-like or over-designed?)

### Step 2: Generate Redesign Spec
For each screen, produce:
1. **Design Intent** — what should feel more iOS-native and why
2. **Material Map** — where glass is used (ultra-thin/regular/thick) and why
3. **Typography Map** — text styles with hierarchy rationale
4. **Layout Changes** — spacing, grouping, safe areas
5. **Code Changes** — specific SwiftUI/React Native code to implement

### Step 3: Apply Changes
Implement the redesign with actual code modifications.

### Glass Material Decision Tree
- Is it a floating overlay/toolbar? -> ultra-thin material
- Is it a card needing separation? -> regular material
- Is it a bottom sheet/modal? -> thick material
- Is it primary content? -> solid surface (NO glass)
- When in doubt? -> no glass. Restraint over spectacle.

## Design Principles
- Native over custom
- Restraint over spectacle
- Material is functional, not decorative
- "Feels obvious" rather than "looks fancy"
- Glass is a tool for hierarchy, focus, and context — not a theme
- Fewer, larger glass surfaces over many small glass chips

## Typography Rules
- System-first typography (SF Pro style)
- Clear hierarchy using size and weight, not color
- Semantic text styles: Title / Headline / Body / Caption
- Consistent vertical rhythm

## Color Rules
- Neutral palette by default (white/off-white backgrounds, system gray scales)
- Accent colors used sparingly (1 primary accent max)
- Avoid neon, high saturation blocks, heavy gradients

## Component Guidelines

### Buttons
- System button semantics preferred
- Glass buttons only in floating contexts (toolbar, overlay)
- Press state: slight opacity down + subtle scale, never flashy

### Lists
- iOS list rhythm (consistent row height, predictable spacing)
- Use either separators OR spacing (not both)
- Glass behind lists only if within a sheet/overlay

### Navigation
- Standard navigation bars with large titles when appropriate
- Translucent nav bar when content scrolls under it
- Clear title hierarchy and scroll behavior

### Modals & Sheets
- Bottom sheets preferred over full-screen modals
- Respect drag-to-dismiss gestures
- Regular/Thick material based on background complexity

## Example Output

**Screen:** Settings

**Before:** Flat white background, custom toggle components, 6 different font sizes, no visual grouping, non-standard back button.

**After:**
```
Design Intent: Make settings feel like a first-party Apple app — grouped
inset list style, system toggles, standard navigation.

Material Map:
- Navigation bar: ultra-thin material (content scrolls beneath)
- Grouped sections: solid surface with system gray background
- No glass on content cards (clarity over decoration)

Typography Map:
- Screen title: Large Title (34pt, bold)
- Section headers: Footnote (13pt, uppercase, secondary color)
- Row labels: Body (17pt, regular)
- Row detail: Body (17pt, secondary color)

Layout Changes:
- Added 20pt section spacing
- Grouped related settings into inset sections
- Safe-area insets respected on all edges
- Touch targets: all rows 44pt minimum height

Code Changes:
- Replaced custom toggles with SwiftUI Toggle()
- Used List with .insetGrouped style
- NavigationStack with .navigationTitle("Settings")
- Removed 3 custom font sizes, replaced with .body and .footnote
```

## Error Handling
- If not an iOS app: adapt principles to platform (Material You for Android, Fluent for Windows)
- If using React Native: use @react-native-community/blur for glass effects
- If no screens specified: audit all screens in the navigation stack, prioritize the most-visited
- If design conflicts with brand guidelines: note the conflict and suggest compromise

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [JuanMarchetto](https://github.com/JuanMarchetto)
- **Source:** [JuanMarchetto/agent-skills](https://github.com/JuanMarchetto/agent-skills)
- **License:** MIT
- **Homepage:** https://github.com/JuanMarchetto/agent-skills

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-juanmarchetto-agent-skills-ios-glass-ui
- Seller: https://agentstack.voostack.com/s/juanmarchetto
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.