ios-glass-ui-designer — Claude Code skill: native iOS glass UI
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.
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-codeWhat ios-glass-ui-designer 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.
What it helps with
- 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 for the agent
- 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
How to install ios-glass-ui-designer
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-code2Manually: put the files in place
~/.claude/skills/ios-glass-ui-designer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ios-glass-ui-designer/
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a codex2Manually: put the files in place
.agents/skills/ios-glass-ui-designer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a cursor2Manually: put the files in place
.cursor/skills/ios-glass-ui-designer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install heyman333/atelier-ui ios-glass-ui-designer2Manually: put the files in place
.github/skills/ios-glass-ui-designer/SKILL.md1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a gemini-cli2Platform CLI
gemini skills install https://github.com/heyman333/atelier-ui --path skills/ios-glass-ui-designerManually: put the files in place
.devin/skills/ios-glass-ui-designer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about ios-glass-ui-designer
How do I install ios-glass-ui-designer in Claude?
Run npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-code. The skill file then sits at ~/.claude/skills/ios-glass-ui-designer/SKILL.md.
What does ios-glass-ui-designer do?
It redesigns mobile app screens to feel iOS-native: glass materials, SF Pro typography, safe-area patterns, system component behavior. Every screen comes back with a structure, a material map and motion notes.
How is it different from a typical glassmorphism approach?
It applies glass only where it improves hierarchy and readability, and explicitly rules out blanket translucency, neon and fake reflections. The reference point is iOS system defaults, not a trend theme.
