skills.rest
kavith-k
kavith-kCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

apple-hig-designer

Generate Apple-style CSS interfaces following Human Interface Guidelines with SF Symbols and San Francisco typography.

Updated Feb 5, 2026
Search Tags:#accessibility#design system#ios#macos#ui design#apple#hig
One-click install
npx skills add https://github.com/kavith-k/workout-tracker --skill apple-hig-designer-kavith-k
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-hig-designer
Source: https://github.com/kavith-k/workout-tracker/tree/main/.claude/skills/apple-hig-designer
Command: npx skills add https://github.com/kavith-k/workout-tracker --skill apple-hig-designer-kavith-k

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of user interfaces that strictly adhere to Apple's Human Interface Guidelines (HIG), ensuring a native, polished, and accessible user experience on Apple platforms.

Core Features & Use Cases

  • HIG Compliance: Generates UI elements and layouts following Apple's design principles (Clarity, Deference, Depth, Consistency).
  • Platform-Specific Design: Utilizes SF Symbols, San Francisco typography, and platform-standard spacing and color systems.
  • Component Generation: Provides ready-to-use CSS and code examples for common UI patterns like buttons, cards, toolbars, sheets, and lists.
  • Use Case: Design a settings screen for an iOS app that includes toggles, input fields, and navigation rows, all styled according to HIG.

Quick Start

Design an Apple-style modal sheet with a title, a text input field, and a 'Done' button.

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 user interface that follows Apple's Human Interface Guidelines?▼

To design an iOS user interface following Apple's Human Interface Guidelines, generate UI elements that prioritize clarity, deference, and depth using CSS examples. This ensures native platform consistency by utilizing standard spacing, color systems, and San Francisco typography.

What is the best way to create macOS UI components that support light and dark mode?▼

The best way to create macOS UI components with light and dark mode support is to use a defined spacing and color system based on Apple HIG. This approach generates platform-specific components like sheets and toolbars that adapt to accessibility requirements.

Can I generate CSS for Apple-style buttons and cards using SF Symbols?▼

Yes, you can generate CSS for Apple-style buttons and cards using SF Symbols. This process provides ready-to-use code examples for common UI patterns, ensuring they adhere to platform conventions and standard Apple design principles.

Does this approach support building an accessible settings screen for an iOS app?▼

Yes, this approach supports building an accessible settings screen for an iOS app. It generates layouts with toggles, input fields, and navigation rows styled according to HIG, ensuring accessibility requirements are met alongside visual consistency.

Why should I use a specific spacing and color system for Apple UI design?▼

You should use a specific spacing and color system for Apple UI design to maintain strict consistency with platform conventions. It ensures the generated interface achieves the native, polished look required by the Human Interface Guidelines across light and dark modes.

Related Skills

Explore More Design & Creative Skills→
prateekprateek

hig-project-context

Create and maintain a shared Apple design context document at .claude/apple-design-context.md.

Community
Intermediate
emilyLi2020emilyLi2020
2

expo-tailwind-setup

Configure Tailwind CSS v4 for Expo projects with NativeWind v5 and react-native-css.

Community
Intermediate
ardenlabardenlab

apple-hig-designer

Generate HIG-compliant iOS and macOS UI components with SF Symbols and San Francisco typography.

Community
Advanced
GyananoGyanano

ios-style-designer

Architect web interfaces following Apple's Human Interface Guidelines.

Community
Intermediate