[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-8df8d87a-a60b-4082-ae9f-f45ddfc381b9":3,"$fSyvvB2YazfNNjpPiA8DWwpqt7ytfCZNp0ddzLlW3V3g":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"8df8d87a-a60b-4082-ae9f-f45ddfc381b9","hig-foundations","苹果人机界面指南设计基础。","cat_life_career","mod_other","sickn33,other","---\nname: hig-foundations\ndescription: Apple Human Interface Guidelines design foundations.\nrisk: unknown\nsource: community\ndate_added: '2026-02-27'\n---\n\n# Apple HIG: Design Foundations\n\nCheck for `.claude\u002Fapple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.\n\n## Key Principles\n\n1. **Prioritize content over chrome.** Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds.\n\n2. **Build in accessibility from the start.** Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label.\n\n3. **Use system colors and materials.** System colors adapt to light\u002Fdark mode, increased contrast, and vibrancy. Prefer semantic colors (`label`, `secondaryLabel`, `systemBackground`) over hard-coded values.\n\n4. **Use platform fonts and icons.** SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography.\n\n5. **Match platform conventions.** Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action.\n\n6. **Respect privacy.** Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection.\n\n7. **Support internationalization.** Accommodate text expansion, right-to-left scripts, and varying date\u002Fnumber formats. Use Auto Layout for dynamic content sizing.\n\n8. **Use motion purposefully.** Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives.\n\n## Reference Index\n\n| Reference | Topic | Key content |\n|---|---|---|\n| [accessibility.md](references\u002Faccessibility.md) | Accessibility | VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions |\n| [app-icons.md](references\u002Fapp-icons.md) | App Icons | Icon grid, platform-specific sizes, single focal point, no transparency |\n| [branding.md](references\u002Fbranding.md) | Branding | Integrating brand identity within Apple's design language, subtle branding, custom tints |\n| [color.md](references\u002Fcolor.md) | Color | System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios |\n| [dark-mode.md](references\u002Fdark-mode.md) | Dark Mode | Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes |\n| [icons.md](references\u002Ficons.md) | Icons | Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment |\n| [images.md](references\u002Fimages.md) | Images | Image resolution, @2x\u002F@3x assets, vector assets, image accessibility |\n| [immersive-experiences.md](references\u002Fimmersive-experiences.md) | Immersive Experiences | AR\u002FVR design, spatial immersion, comfort zones, progressive immersion levels |\n| [inclusion.md](references\u002Finclusion.md) | Inclusion | Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults |\n| [layout.md](references\u002Flayout.md) | Layout | Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides |\n| [materials.md](references\u002Fmaterials.md) | Materials | Vibrancy, blur, translucency, system materials, material thickness |\n| [motion.md](references\u002Fmotion.md) | Motion | Animation curves, transitions, continuity, Reduce Motion support, physics-based motion |\n| [privacy.md](references\u002Fprivacy.md) | Privacy | Permission requests, usage descriptions, privacy nutrition labels, minimal data collection |\n| [right-to-left.md](references\u002Fright-to-left.md) | Right-to-Left | RTL layout mirroring, bidirectional text, icons that flip, exceptions |\n| [sf-symbols.md](references\u002Fsf-symbols.md) | SF Symbols | Symbol categories, rendering modes, variable color, custom symbols, weight matching |\n| [spatial-layout.md](references\u002Fspatial-layout.md) | Spatial Layout | visionOS window placement, depth, ergonomic zones, Z-axis design |\n| [typography.md](references\u002Ftypography.md) | Typography | SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing |\n| [writing.md](references\u002Fwriting.md) | Writing | UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness |\n\n## Applying Foundations Together\n\nConsider how principles interact:\n\n1. **Color + Dark Mode + Accessibility** -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors.\n\n2. **Typography + Accessibility + Layout** -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes.\n\n3. **Icons + Branding + SF Symbols** -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions.\n\n4. **Motion + Accessibility + Feedback** -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate.\n\n5. **Privacy + Writing + Onboarding** -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit.\n\n## Output Format\n\n1. **Cite the specific HIG foundation** with file and section.\n2. **Note platform differences** for the user's target platforms.\n3. **Provide concrete code patterns** (SwiftUI\u002FUIKit\u002FAppKit).\n4. **Explain accessibility impact** (contrast ratios, Dynamic Type scaling, VoiceOver behavior).\n\n## Questions to Ask\n\n1. Which platforms are you targeting?\n2. Do you have existing brand guidelines?\n3. What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?)\n4. System colors or custom?\n\n## Related Skills\n\n- **hig-platforms** -- How foundations apply per platform (e.g., type scale differences on watchOS vs macOS)\n- **hig-patterns** -- Interaction patterns where foundations like writing and accessibility are critical\n- **hig-components-layout** -- Structural components implementing layout principles\n- **hig-components-content** -- Content display using color, typography, and images\n\n---\n\n*Built by [Raintree Technology](https:\u002F\u002Fraintree.technology) · [More developer tools](https:\u002F\u002Fraintree.technology)*\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,198,1336,"2026-05-16 13:22:03",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"544acb34-7d95-4aa8-a941-0bacbc032712","1.0.0","hig-foundations.zip",138062,"uploads\u002Fskills\u002F8df8d87a-a60b-4082-ae9f-f45ddfc381b9\u002Fhig-foundations.zip","055f1d15d43555253708cc528ad0ec19be45236f03ee68053b30a1a0d8ff3f81","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":6691},{\"path\":\"references\u002Faccessibility.md\",\"isDirectory\":false,\"size\":29765},{\"path\":\"references\u002Fapp-icons.md\",\"isDirectory\":false,\"size\":20872},{\"path\":\"references\u002Fbranding.md\",\"isDirectory\":false,\"size\":4757},{\"path\":\"references\u002Fcolor.md\",\"isDirectory\":false,\"size\":45593},{\"path\":\"references\u002Fdark-mode.md\",\"isDirectory\":false,\"size\":14225},{\"path\":\"references\u002Ficons.md\",\"isDirectory\":false,\"size\":29887},{\"path\":\"references\u002Fimages.md\",\"isDirectory\":false,\"size\":17488},{\"path\":\"references\u002Fimmersive-experiences.md\",\"isDirectory\":false,\"size\":22356},{\"path\":\"references\u002Finclusion.md\",\"isDirectory\":false,\"size\":19021},{\"path\":\"references\u002Flayout.md\",\"isDirectory\":false,\"size\":38114},{\"path\":\"references\u002Fmaterials.md\",\"isDirectory\":false,\"size\":24296},{\"path\":\"references\u002Fmotion.md\",\"isDirectory\":false,\"size\":11035},{\"path\":\"references\u002Fprivacy.md\",\"isDirectory\":false,\"size\":27701},{\"path\":\"references\u002Fright-to-left.md\",\"isDirectory\":false,\"size\":30706},{\"path\":\"references\u002Fsf-symbols.md\",\"isDirectory\":false,\"size\":35454},{\"path\":\"references\u002Fspatial-layout.md\",\"isDirectory\":false,\"size\":14794},{\"path\":\"references\u002Ftypography.md\",\"isDirectory\":false,\"size\":50754},{\"path\":\"references\u002Fwriting.md\",\"isDirectory\":false,\"size\":12599}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]