# Design IOS Interfaces

> Design native-feeling iOS and iPadOS interfaces using Apple Human Interface Guidelines. Use when Codex needs to create, redesign, critique, wireframe, or specify iPhone or iPad screens, flows, navigation, settings, onboarding, dashboards, forms, tab layouts, sheets, controls, Dynamic Type behavior, accessibility behavior, or Apple-style visual direction before implementation.

- Skill: `0xkoru/design-ios-interfaces` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add 0xkoru/design-ios-interfaces`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xkoru/design-ios-interfaces/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 0xKoru (https://skillmd.com/u/0xkoru)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/0xkoru/design-ios-interfaces

---


# Design iOS Interfaces

Use this skill to turn a product request into an iOS interface plan that feels at home on iPhone and iPad.

## Workflow

1. Clarify the user goal, target device class, primary tasks, and whether the output is a concept, a detailed spec, or implementation-ready guidance.
2. Choose the native information architecture first: `TabView` for peer top-level areas, `NavigationStack` for drill-in flows, sheets for focused modal tasks, full-screen covers only for immersive or blocking experiences.
3. Design around content and safe areas before decoration. Keep controls in expected platform regions such as navigation bars, toolbars, tab bars, forms, lists, and bottom accessory areas.
4. Use system semantics for typography, colors, spacing, materials, and controls. Avoid custom chrome unless it serves the product and remains accessible.
5. Define states before finishing: empty, loading, error, offline, permission denied, selected, editing, destructive confirmation, and large Dynamic Type.
6. End with a concise spec: screen structure, navigation, components, visual hierarchy, accessibility checks, and implementation notes.

## iOS Design Rules

- Prefer familiar iOS structures: list rows, grouped forms, inset grouped settings, segmented controls, toolbars, confirmation dialogs, contextual menus, and swipe actions.
- Keep body text near the system body size unless the design is a true editorial or media experience. Do not shrink secondary labels below legible sizes.
- Respect the 44 point minimum touch target. A tiny visual icon can exist inside a larger tappable region.
- Use full-width content when it is content, but avoid edge-to-edge full-width buttons unless the context truly calls for it.
- Treat color as semantic feedback, not surface styling. Use system colors and adapt for light/dark mode.
- Use material and glass effects sparingly. The current HIG favors content with controls layered above it; blur must preserve contrast and meaning.
- Make settings sheets dismiss with a right-side `Done` action unless the product has a strong reason otherwise.
- Use SF Symbols or platform-native icons. Prefer recognized symbols over text-only tool buttons.
- Plan for Dynamic Type, VoiceOver labels, Reduce Motion, Increase Contrast, right-to-left layout, and localization expansion.

## References

Read `references/ios-hig-reference.md` when you need concrete values, source links, or a checklist.