skills.rest
yerzong
yerzongCOMMUNITY
Explore all skills by this author →
GitHub

apple-hig-designer

Generates HIG-compliant Apple-style UI code with system colors, typography, and accessibility.

Updated Aug 28, 2026
Search Tags:#accessibility#design system#liquid glass#ios design#sf symbols#ui generation#apple hig
One-click install
npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill apple-hig-designer-yerzong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-hig-designer
Source: https://github.com/yerzong/TEMP-LEAGUE/tree/main/.claude/skills/apple-hig-designer
Command: npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill apple-hig-designer-yerzong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing interfaces that genuinely follow Apple's Human Interface Guidelines requires memorizing hundreds of specifications—type scales, color tokens, touch targets, safe areas, and platform conventions. This Skill encodes those rules so generated UI code is HIG-compliant by default across iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. ## Core Features & Use Cases - Design system tokens: Provides San Francisco typography scales, light/dark system colors, 8pt spacing grid, and concentric border-radius rules as ready-to-use CSS custom properties. - Component and pattern guidance: Covers buttons, navigation bars, tab bars, sheets, alerts, segmented controls, toggles, plus UX patterns like onboarding, settings, and error handling via detailed reference files. - Platform-specific design: Includes guidance for visionOS spatial UI, watchOS complications, tvOS focus navigation, macOS menu bars, and Liquid Glass (iOS 26+) materials. - Use Case: Ask for an iPhone settings screen and receive complete HTML/CSS with dark mode support, 44pt touch targets, Dynamic Type-friendly layouts, and ARIA labels. ## Quick Start Ask the assistant to design an Apple-style settings screen for iOS with dark mode support and SF Symbols icons.

Frequently Asked Questions about apple-hig-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an iOS interface that follows Apple HIG?▼

Request an Apple-style or HIG-compliant design and the skill generates code using San Francisco typography, system colors, 8pt grid spacing, and 44pt touch targets. Output includes light/dark mode support and accessibility attributes by default.

What Apple platforms does this design skill support?▼

It covers iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. Each platform has dedicated guidance, such as focus navigation for tvOS, complications for watchOS, and spatial window design for visionOS.

Does it support Liquid Glass and iOS 26 design?▼

Yes, Liquid Glass materials with backdrop blur, dynamic tinting, and floating tab bars are included. Glass styling is applied only when explicitly requested or when targeting iOS 26+, otherwise solid backgrounds are used.

Can it generate SwiftUI code or only HTML/CSS?▼

The skill produces HTML/CSS, React, or SwiftUI as appropriate for the request. SwiftUI guidance includes material backgrounds, glass button styles, and native component conventions.

What accessibility requirements does the generated UI meet?▼

Generated interfaces target WCAG AA with 4.5:1 text contrast, VoiceOver labels, Dynamic Type support, reduced-motion handling, and semantic HTML with ARIA roles. A pre-delivery checklist verifies each requirement.

When should I not use Liquid Glass effects?▼

Avoid glass materials in content-heavy reading views, photo or video editing interfaces, accessibility-sensitive contexts, and apps targeting iOS 25 or earlier. Solid backgrounds provide better readability and compatibility in those cases.

Related Skills

Explore More Design & Creative Skills→
Imad-OuteImad-Oute
2

mh-cto-sdlc-wireframes

Convert user flows and UX briefs into text-based wireframe specifications.

Community
Intermediate
mosif16mosif16
18

software-mobile

Guide iOS, Android, and cross-platform mobile app development patterns.

Community
Advanced
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
Cure-Consulting-GroupCure-Consulting-Group
1

product-design

Generate platform-specific UI design specifications with design tokens and accessibility standards.

Official
Advanced