apple-hig-designer

Design iOS/macOS interfaces with HIG-compliant components and SF Symbols.

Updated Dec 30, 2025
One-click install
npx skills add https://github.com/lyy0709/claude-skills --skill apple-hig-designer-lyy0709
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: apple-hig-designer
Source: https://github.com/lyy0709/claude-skills/tree/main/Apple-Hig-Designer
Command: npx skills add https://github.com/lyy0709/claude-skills --skill apple-hig-designer-lyy0709

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams design Apple-style iOS/macOS interfaces that align with Apple's Human Interface Guidelines, ensuring consistent visuals and accessible interactions across products.

Core Features & Use Cases

  • HIG-compliant components: Buttons, cards, inputs, and patterns that match Apple guidelines.
  • SF Symbols & SF Pro typography: Native typography and iconography to maintain parity with Apple platforms.
  • Cross-device accessibility: Light/dark mode, contrast, and 8pt spacing for responsive layouts.
  • Use Case: As a designer or frontend engineer, request an Apple-styled component library ready to implement in a project.

Quick Start

Activate the apple-hig-designer skill and prompt it to generate a ready-to-use Apple-styled UI component, for example: "Design an iOS-style login form with SF Pro typography and HIG-compliant controls."

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 iOS interfaces that comply with Apple's Human Interface Guidelines?

To design iOS interfaces that comply with Apple HIG, apply standard components, SF Pro typography, SF Symbols, and 8pt spacing to ensure visual consistency and accessible interactions across Apple platforms.

What is the best way to build a macOS UI with native typography and SF Symbols?

Building a macOS UI with native typography involves leveraging the San Francisco font stack and SF Symbols to maintain visual parity with native Apple applications while adhering to HIG patterns.

How do I ensure my Apple-style UI supports both light and dark mode accessibility?

Ensuring Apple-style UI accessibility for light and dark modes requires applying CSS variables for theme adaptation, maintaining proper contrast, and using responsive 8pt spacing layouts across devices.

Can I generate HIG-compliant UI components without installing external macOS software?

You can generate HIG-compliant UI components without external macOS software by using standard web technologies, CSS variables, and the San Francisco font stack directly in your project environment.

How do I create an iOS-style login form with HIG-compliant controls?

Creating an iOS-style login form with HIG-compliant controls involves applying standard Apple UI patterns for buttons and inputs, utilizing SF Pro typography for text fields, and ensuring accessible interaction design.

Related Skills