apple-ui-designer — Claude Code skill: what it does, how to install
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.
npx skills add heyman333/atelier-ui --skill apple-ui-designer -a claude-codeWhat apple-ui-designer 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.
What it helps with
- 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 for the agent
- 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
How to install apple-ui-designer
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill apple-ui-designer -a claude-code2Manually: put the files in place
~/.claude/skills/apple-ui-designer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/apple-ui-designer/
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill apple-ui-designer -a codex2Manually: put the files in place
.agents/skills/apple-ui-designer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill apple-ui-designer -a cursor2Manually: put the files in place
.cursor/skills/apple-ui-designer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install heyman333/atelier-ui apple-ui-designer2Manually: put the files in place
.github/skills/apple-ui-designer/SKILL.md1Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill apple-ui-designer -a gemini-cli2Platform CLI
gemini skills install https://github.com/heyman333/atelier-ui --path skills/apple-ui-designerManually: put the files in place
.devin/skills/apple-ui-designer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill apple-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 apple-ui-designer
How to install apple-ui-designer in Claude Code?
Run npx skills add heyman333/atelier-ui --skill apple-ui-designer -a claude-code in your terminal.
What does the apple-ui-designer skill do?
It guides the AI to restructure mobile UI layouts according to iOS design standards, focusing on native system components and calm visual hierarchy.
What design elements does this skill avoid?
It restricts neon colors, heavy gradients, dense informational layouts, harsh outlines, and non-standard navigation patterns.
