skills.rest
FormalSnake
FormalSnakeCOMMUNITY
Explore all skills by this author →
Website𝕏@FormalSnakeGitHub

apple-hig-designer

Generate Apple HIG-compliant UI design instructions and front-end code for iOS/macOS interfaces.

17|1|Updated Feb 2, 2024
Search Tags:#accessibility#design system#ui design#component patterns#apple hig#light dark mode#sf pro typography
One-click install
npx skills add https://github.com/FormalSnake/dotfiles --skill apple-hig-designer-formalsnake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-hig-designer
Source: https://github.com/FormalSnake/dotfiles/tree/main/users/kyandesutter/claude/skills
Command: npx skills add https://github.com/FormalSnake/dotfiles --skill apple-hig-designer-formalsnake

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the guesswork of building Apple-style interfaces by providing practical Human Interface Guidelines (HIG) rules for layout, components, typography, spacing, accessibility, and motion.

Core Features & Use Cases

  • Apple HIG component design: Creates iOS/macOS UI components like buttons, cards, inputs, toolbars, tabs, sheets, and alerts with consistent platform conventions.
  • Design-system specs baked into output: Applies SF Pro typography rules, Apple system colors (light/dark), an 8pt spacing grid, and concentric border radius standards.
  • Accessibility-first UI generation: Enforces WCAG AA color contrast targets and reduced-motion behavior via prefers-reduced-motion.

Quick Start

Use the skill to design an Apple-style iOS/macOS settings screen with light/dark support and accessible interactions.

Frequently Asked Questions about apple-hig-designer

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

FAQPage Schema
How do I generate Apple HIG-compliant UI components for iOS?▼

To generate Apple HIG-compliant UI components, specify the iOS or macOS screen you need and the skill outputs runnable front-end code. It enforces Apple system conventions for buttons, cards, inputs, toolbars, and navigation patterns.

What is the best way to design an Apple-style interface with light and dark mode support?▼

Designing an Apple-style interface with light and dark mode requires applying Apple system colors and an 8pt spacing grid. The output provides design system specifications and front-end code that automatically adapt themes across iOS and macOS.

Can I build accessible iOS UI designs that meet WCAG AA contrast targets?▼

Yes, you can build accessible iOS UI designs meeting WCAG AA contrast targets by enforcing accessibility requirements in the generated code. The output includes reduced-motion behavior support via prefers-reduced-motion for compliant Apple-style interfaces.

How do I apply SF Pro typography and 8pt spacing to a macOS design system?▼

Apply SF Pro typography and 8pt spacing to a macOS design system by generating UI instructions with baked-in design specs. The output includes concentric border radius standards and minimum touch targets for accurate component patterns.

Does this approach support generating UI specifications for iOS sheets and alerts?▼

Yes, this approach supports generating UI specifications for iOS sheets, alerts, and dialogs. It applies practical Human Interface Guidelines rules for layout, components, and motion behavior directly into the runnable front-end code output.

Related Skills

Explore More Design & Creative Skills→
vZulinvZulin

ios-hig-design-guide

Translate Apple Human Interface Guidelines data into iOS design specifications.

Community
Advanced
AdhamHashimAdhamHashim

figma-widget-mapping

Map Figma design elements to corresponding Flutter widgets.

Community
Intermediate
salverius-techsalverius-tech

design-workflow

Enforce WCAG 2.1 AA accessibility and design tokens in UI/UX workflows.

Community
Intermediate
Cure-Consulting-GroupCure-Consulting-Group
1

product-design

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

Official
Advanced