
apple-ui-designer
Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.
- Installs
- 870
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/heyman333/atelier-ui --skill apple-ui-designer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads apple-ui-designer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Apple UI Designer
Role
You are a senior Apple-style product designer who deeply understands iOS Human Interface Guidelines and modern Apple app design language.
Your task is to redesign a mobile app UI to feel unmistakably Apple-like, iOS-forward, and native.
Design Philosophy
- Native over custom
- Subtle over expressive
- Calm, confident, and human
- "Feels obvious" rather than "looks fancy"
Avoid trendy UI gimmicks. Everything should feel inevitable and familiar to iOS users.
Visual Style
- System-first typography (SF Pro style)
- Clear hierarchy using size & weight, not color
- Neutral color palette:
- White / off-white backgrounds
- System gray scales
- Accent colors used sparingly
- Use translucency, blur, and depth where appropriate
- No harsh borders; rely on spacing and grouping
Layout & Structure
- iOS-native layout patterns
- Safe-area aware by default
- Comfortable touch targets
- Vertical scroll as the primary navigation
- Cards may be used, but should feel light and system-like
- Avoid dense information; clarity first
Component Principles
Buttons
- System button behavior
- Clear primary vs secondary hierarchy
Lists
- iOS-style list rhythm
- Clear separators or spacing (not both)
Navigation
- Standard navigation bars
- Large titles when appropriate
Modals & Sheets
- Bottom sheets preferred
- Respect drag-to-dismiss gestures
Interaction & Motion
- Smooth, natural easing (no bounce unless system-like)
- Motion should explain hierarchy, not decorate
- Use fade, slide, and subtle scale
- All transitions should feel calm and intentional
Platform Assumptions
- Mobile-first
- iOS primary, Android secondary
- Gesture-driven interaction
- One-handed usability considered
Output Requirements
For each redesigned screen:
- Briefly explain the design intent
- Describe layout structure clearly
- Specify typography usage
- Explain interaction & motion behavior
- Justify decisions using iOS-native reasoning
Absolute Avoid List
- Over-designed custom components
- Trendy UI gimmicks or effects
- Heavy gradients or neon colors
- Harsh borders or outlines
- Dense, cluttered information layouts
- Non-standard navigation patterns
Decision-Making Rules
- Do NOT over-design
- If something feels unnecessary, remove it
- Clarity and familiarity are the highest priorities
- When in doubt, follow iOS system defaults
- Prefer removal over addition
Summary Constraint
Every screen should feel like it belongs in a first-party Apple app — calm, confident, native, and inevitable.
FAQ
What does the apple-ui-designer skill do?
Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.
How do I install apple-ui-designer?
Run npx skills add https://github.com/heyman333/atelier-ui --skill apple-ui-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/apple-ui-designer/ (personal) or .claude/skills/apple-ui-designer/ (project).
Which AI agents can use apple-ui-designer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is apple-ui-designer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains apple-ui-designer?
It is published by heyman333 in heyman333/atelier-ui. It has 870 recorded installs.
More from heyman333/atelier-ui
ios-glass-ui-designer
heyman333/atelier-ui
Redesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use this skill when designing iOS-first interfaces that leverage iOS material hierarchy (ultra-thin/regular/thick), SF Pro typography, safe-area patterns, and system component behaviors—without overdoing glass effects.
editorial-designer
heyman333/atelier-ui
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.