MCP HubMCP Hub
← Вернуться к навыкам

hig-foundations

raintree-technology
Обновлено 5 days ago
78
9
78
Посмотреть на GitHub
Метаdesign

О программе

Этот навык предоставляет рекомендации Apple по человеческому интерфейсу (Human Interface Guidelines) по основам дизайна, таким как цвета, типографика, доступность и тёмный режим. Используйте его, когда разработчики спрашивают о применении системного стиля, обеспечении доступности или решении проблем визуального дизайна в своих приложениях. Он охватывает основные принципы визуального и инклюзивного дизайна, перекрестно ссылаясь на другие навыки HIG для конкретных компонентов или паттернов.

Быстрая установка

Claude Code

Рекомендуется
Основной
npx skills add raintree-technology/claude-starter -a claude-code
Команда плагинаАльтернативный
/plugin add https://github.com/raintree-technology/claude-starter
Git клонированиеАльтернативный
git clone https://github.com/raintree-technology/claude-starter.git ~/.claude/skills/hig-foundations

Скопируйте и вставьте эту команду в Claude Code для установки этого навыка

Документация

Apple HIG: Design Foundations

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Prioritize content over chrome. Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds.

  2. 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.

  3. Use system colors and materials. System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (label, secondaryLabel, systemBackground) over hard-coded values.

  4. 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.

  5. Match platform conventions. Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action.

  6. Respect privacy. Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection.

  7. Support internationalization. Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing.

  8. Use motion purposefully. Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives.

Reference Index

ReferenceTopicKey content
accessibility.mdAccessibilityVoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions
app-icons.mdApp IconsIcon grid, platform-specific sizes, single focal point, no transparency
branding.mdBrandingIntegrating brand identity within Apple's design language, subtle branding, custom tints
color.mdColorSystem colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios
dark-mode.mdDark ModeElevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes
icons.mdIconsGlyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment
images.mdImagesImage resolution, @2x/@3x assets, vector assets, image accessibility
immersive-experiences.mdImmersive ExperiencesAR/VR design, spatial immersion, comfort zones, progressive immersion levels
inclusion.mdInclusionDiverse representation, non-gendered language, cultural sensitivity, inclusive defaults
layout.mdLayoutMargins, spacing, alignment, safe areas, adaptive layouts, readable content guides
materials.mdMaterialsVibrancy, blur, translucency, system materials, material thickness
motion.mdMotionAnimation curves, transitions, continuity, Reduce Motion support, physics-based motion
privacy.mdPrivacyPermission requests, usage descriptions, privacy nutrition labels, minimal data collection
right-to-left.mdRight-to-LeftRTL layout mirroring, bidirectional text, icons that flip, exceptions
sf-symbols.mdSF SymbolsSymbol categories, rendering modes, variable color, custom symbols, weight matching
spatial-layout.mdSpatial LayoutvisionOS window placement, depth, ergonomic zones, Z-axis design
typography.mdTypographySF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing
writing.mdWritingUI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness

Applying Foundations Together

Consider how principles interact:

  1. Color + Dark Mode + Accessibility -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors.

  2. Typography + Accessibility + Layout -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes.

  3. Icons + Branding + SF Symbols -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions.

  4. Motion + Accessibility + Feedback -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate.

  5. Privacy + Writing + Onboarding -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit.

Output Format

  1. Cite the specific HIG foundation with file and section.
  2. Note platform differences for the user's target platforms.
  3. Provide concrete code patterns (SwiftUI/UIKit/AppKit).
  4. Explain accessibility impact (contrast ratios, Dynamic Type scaling, VoiceOver behavior).

Questions to Ask

  1. Which platforms are you targeting?
  2. Do you have existing brand guidelines?
  3. What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?)
  4. System colors or custom?

Related Skills

  • hig-platforms -- How foundations apply per platform (e.g., type scale differences on watchOS vs macOS)
  • hig-patterns -- Interaction patterns where foundations like writing and accessibility are critical
  • hig-components-layout -- Structural components implementing layout principles
  • hig-components-content -- Content display using color, typography, and images

Built by Raintree Technology · More developer tools

GitHub репозиторий

raintree-technology/claude-starter
Путь: templates/.claude/skills/hig-foundations
0
ai-toolsanthropicclaudeclaude-aiclaude-codedeveloper-tools

Похожие навыки

content-collections

Мета

Этот навык предоставляет проверенную в продакшене настройку для Content Collections — TypeScript-ориентированного инструмента, который преобразует файлы Markdown/MDX в типобезопасные коллекции данных с валидацией Zod. Используйте его при создании блогов, сайтов документации или контентных приложений на Vite + React для обеспечения типобезопасности и автоматической проверки содержимого. Он охватывает всё: от настройки плагина Vite и компиляции MDX до оптимизации развертывания и валидации схем.

Просмотреть навык

polymarket

Мета

Этот навык позволяет разработчикам создавать приложения на платформе прогнозных рынков Polymarket, включая интеграцию с API для торговли и получения рыночных данных. Он также обеспечивает потоковую передачу данных в реальном времени через WebSocket для отслеживания текущих сделок и рыночной активности. Используйте его для реализации торговых стратегий или создания инструментов, обрабатывающих обновления рынка в реальном времени.

Просмотреть навык

creating-opencode-plugins

Мета

Этот навык помогает разработчикам создавать плагины OpenCode, которые подключаются к более чем 25 типам событий, таким как команды, файлы и операции LSP. Он предоставляет структуру плагина, спецификации API событий и шаблоны реализации для модулей на JavaScript/TypeScript. Используйте его, когда вам нужно перехватывать, отслеживать или расширять жизненный цикл ассистента OpenCode AI с помощью пользовательской событийно-ориентированной логики.

Просмотреть навык

sglang

Мета

SGLang — это высокопроизводительный фреймворк для обслуживания больших языковых моделей (LLM), специализирующийся на быстрой структурированной генерации JSON, regex и рабочих процессов агентов с использованием кэширования префиксов RadixAttention. Он обеспечивает значительно более высокую скорость вывода, особенно для задач с повторяющимися префиксами, что делает его идеальным для сложных структурированных результатов и многократных диалогов. Выбирайте SGLang вместо альтернатив, таких как vLLM, когда вам требуется ограниченное декодирование или вы создаете приложения с интенсивным совместным использованием префиксов.

Просмотреть навык