A Codex skill for building calm, premium, mobile-first interfaces inspired by Claude and Apple iOS.
The combined direction is Warm Native: Claude supplies the warm ivory/charcoal canvas, terracotta accent, editorial serif voice, and hairline-border depth. Apple iOS supplies the bottom tab rail, 44 px touch targets, safe-area awareness, adaptive light/dark appearance, semantic hierarchy, and restrained motion.
On this device, the skill lives in ~/.codex/skills/claude-ios-ui and is automatically available to Codex.
To install on another machine:
git clone https://github.com/072529-aaa/claude-ios-ui.git "$HOME\.codex\skills\claude-ios-ui"Restart Codex after installing, then invoke it with $claude-ios-ui or simply ask for a Claude + iPhone style UI.
SKILL.md Skill instructions and design rules
agents/openai.yaml UI-facing metadata for the skill
references/style-sources.md Claude and Apple research summary
references/recent-projects.md Local project evidence behind the direction
assets/quick-start.html Self-contained warm-native starter UI
For a new web or PWA prototype, open assets/quick-start.html in a browser to see the light and dark system. When building a real product, copy the token variables and component examples, then replace the sample content with the actual app.
The style is not a literal clone of claude.ai or an Apple system app. Use it as a visual contract: warm human personality, disciplined native order, real content first.
Desktop light:
Mobile dark:
MIT