메뉴
Mobile-specific design guidelines - iOS Human Interface Guidelines, Material Design 3, gesture navigation, haptic feedback, adaptive layouts, thumb zones. Use when designing mobile apps or evaluating mobile-specific patterns.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
WCAG 2.1/2.2 guidelines, ARIA patterns, and inclusive design principles. Use when auditing accessibility, implementing ARIA, reviewing color contrast, or designing for screen readers, keyboard users, and cognitive accessibility.
Opinionated design critique framework grounded in business outcomes, named principles, and specific actionable feedback. Use when reviewing designs, running critique sessions, or giving feedback that actually improves the work.
Deceptive patterns (dark patterns), ethical design frameworks, persuasive vs. manipulative design, GDPR/consent UX. Use when reviewing designs for manipulation, designing consent flows, or evaluating ethical implications of design decisions.
Usability heuristics for catching real problems in interfaces, not generating busywork. Nielsen's 10 and Shneiderman's Golden Rules, reframed around business outcomes with practical severity scoring.
Design process philosophy and frameworks. When to use JTBD, Design Sprints, Double Diamond, IDEO. How to run outcome-driven design, effective critique, and recognize when process is theater. Use when planning design work, structuring discovery, or choosing the right level of rigor for the problem.
Design systems architecture - tokens, components, documentation, governance. Use when building or scaling a design system, defining component APIs, establishing token architecture, or creating contribution guidelines.
| name | mobile-design |
| description | Mobile-specific design guidelines - iOS Human Interface Guidelines, Material Design 3, gesture navigation, haptic feedback, adaptive layouts, thumb zones. Use when designing mobile apps or evaluating mobile-specific patterns. |
Every design decision is a mobile decision first. More than half your users are on phones. If you design for desktop and then "adapt" for mobile, you're designing for the minority and degrading the experience for the majority. Start with the phone. The desktop version is the adaptation.
Use when you need:
| Element | Spec |
|---|---|
| Touch targets | Minimum 44x44 points |
| Navigation | Bottom tab bars, labeled back buttons |
| Safe areas | Respect notch, Dynamic Island, home indicator |
| Typography | SF Pro, Dynamic Type support required |
| Tab bar items | 3-5 items maximum |
Most significant visual redesign since 2013. Translucent, rounded elements with optical glass properties. Elements adapt dynamically to light and content.
Backed by 46 research studies, 18,000+ participants. Users preferred Expressive designs AND found them more usable. More emotional range and brand expression.
| Gesture | iOS | Android | Use For |
|---|---|---|---|
| Swipe from edge | Back navigation | Back navigation | Primary navigation |
| Pull down | Refresh, dismiss | Refresh | Content update |
| Long press | Context menu | Context menu | Secondary actions |
| Pinch | Zoom | Zoom | Media, maps |
| Swipe on item | Quick actions | Quick actions | Delete, archive, etc. |
| Type | When to Use |
|---|---|
| Light impact | Toggle, selection change |
| Medium impact | Confirming an action |
| Heavy impact | Significant state change |
| Success | Task completion |
| Warning | Approaching limit |
| Error | Failed action |
Every interaction should have intentional, subtle tactile response.
The bottom third of the screen is most accessible one-handed. Place primary actions there.
| Zone | Reachability | Place Here |
|---|---|---|
| Bottom center | Easy | Primary CTA, bottom nav, FAB |
| Middle | Comfortable | Content, secondary actions |
| Top corners | Hard | Non-critical info, settings |
Design for multiple device classes with a single codebase:
interaction-patterns - Navigation and overlay patternsaccessibility-wcag - Touch targets, gestures, screen reader supportdesign-systems - Responsive token architecture