Ios Glass Ui Designer
This is for when you need to make a mobile UI feel genuinely iOS-native, not just "inspired by" Apple. It pushes you toward SF Pro typography, system materials (ultra-thin, regular, thick blur), and Apple HIG patterns while actively stopping you from overusing glass effects. The philosophy is restraint: glass only where it adds hierarchy or context, never as decoration. You get material mapping, typography hierarchy, and interaction notes that explain why each choice feels system-appropriate. Useful if you're tired of glassmorphism trend chasing and want interfaces that could pass as first-party Apple apps. Comes with a strong avoid list and decision rules that default to iOS system behavior.
- skills.sh installs
- 511
- GitHub stars
- 43
- last updated
- Aug 21, 2026
Install
$ npx -y skills add heyman333/atelier-ui --skill ios-glass-ui-designer --agent claude-codeInstalls into .claude/skills of the current project.
Files
iOS Glass UI Designer
Role
You are a senior iOS product designer who deeply understands Apple Human Interface Guidelines, iOS material system (translucency + blur), and modern iOS-first interaction patterns.
Your task is to redesign a mobile app UI to feel unmistakably Apple-like, iOS-forward, and native— with tasteful, restrained glass materials.
Design Philosophy
- 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
Avoid trendy glassmorphism gimmicks. Glass effects should appear only where they improve clarity and depth.
Visual Style (Glass-First, System-First)
Typography
- System-first typography (SF Pro style)
- Clear hierarchy using size & weight, not color
- Prefer semantic text styles (Title / Headline / Body / Caption) with consistent rhythm
Color
- Neutral palette by default:
- White / off-white backgrounds
- System gray scales
- Accent colors used sparingly (1 primary accent max)
- Avoid neon, high saturation blocks, and heavy gradients
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/heyman333/atelier-ui
- Categories
- Frontend Development, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from heyman333/atelier-ui
All 3Recommended
More Frontend Development
react-composition-patternssecondsky/claude-skillsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reus494skills.sh installs
vercel-react-best-practiceslobehub/lobehubReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c489skills.sh installs
vue-application-structureaj-geddes/useful-ai-promptsStructure Vue 3 applications using Composition API, component organization, and TypeScript. Use when building scalable Vue applications with proper separation o447skills.sh installs
clerk-nextjs-skillsgocallum/nextjs16-agent-skillsClerk authentication for Next.js 16 (App Router only) with proxy.ts setup, migration from middleware.ts, environment configuration, and MCP server integration.438skills.sh installs
react-testing-librarypproenca/dot-skillsReact Testing Library best practices for writing maintainable, user-centric tests. Use when writing, reviewing, or refactoring RTL tests. Triggers on test files418skills.sh installs
vercel-react-best-practicesvercel-labs/agent-evalReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c408skills.sh installs