skills.rest
Gyanano
GyananoCOMMUNITY
Explore all skills by this author →
GitHub

ios-style-designer

Architect web interfaces following Apple's Human Interface Guidelines.

Updated Feb 14, 2026
Search Tags:#ui/ux#web design#glassmorphism#ios design#apple hig#mobile first
One-click install
npx skills add https://github.com/Gyanano/agent-skills --skill ios-style-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ios-style-designer
Source: https://github.com/Gyanano/agent-skills/tree/main/ios-style-designer
Command: npx skills add https://github.com/Gyanano/agent-skills --skill ios-style-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of web interfaces that precisely mimic the look and feel of native iOS and iPadOS applications, ensuring a familiar and high-quality user experience on the web.

Core Features & Use Cases

  • Native Design Translation: Applies Apple's Human Interface Guidelines (HIG) to web development, including glassmorphism, SF Pro typography, and the 8pt grid system.
  • Component Implementation: Provides guidance on creating standard iOS components like navigation bars with collapsing titles and bottom sheets.
  • Adaptive Design: Ensures seamless transitions between Light and Dark modes using Apple's system color palette.
  • Use Case: When building a new mobile web app and the client requests a design that feels "just like a native app on their iPhone."

Quick Start

Instruct the AI to design a web UI that follows Apple's Human Interface Guidelines.

Frequently Asked Questions about ios-style-designer

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

FAQPage Schema
What is glassmorphism and how does it apply to iOS web design?▼

Glassmorphism in web design is achieved by applying Apple's Human Interface Guidelines to create translucent surfaces, standard iOS components like navigation bars, and adaptive Light/Dark modes using system color palettes.

Can I implement native iOS components like bottom sheets in a mobile-first web app?▼

Yes, you can implement native iOS components in a mobile-first web app by translating iPadOS design patterns into web code, specifically providing guidance on creating standard components like collapsing title navigation bars and bottom sheets.

Does this approach support adaptive Light and Dark modes for iOS-style interfaces?▼

Yes, this approach supports adaptive Light and Dark modes for iOS-style interfaces by ensuring seamless transitions between modes using Apple's system color palette directly within your web development implementation.

What is the best way to create an iPhone-native looking web UI?▼

The best way to create an iPhone-native looking web UI is to apply Apple's HIG to web development, utilizing SF Pro typography, the 8pt grid, and standard iOS components to mimic native applications precisely.

Related Skills

Explore More Design & Creative Skills→
andronicsandronics
1

responsive-helper

Designs multi-device web layouts with breakpoints, fluid typography, container queries, and grid/pattern strategies.

Community
Intermediate
sanky369sanky369
29

color-system

Create cohesive color systems with accessible theming and dark-mode support.

Community
Advanced
leonardoteodorooleonardoteodoroo

mobile-ios-design

Translates iOS Human Interface Guidelines and SwiftUI patterns into accessible interfaces for iPhone, iPad, visionOS.

Community
Intermediate
qodex-aiqodex-ai
39

mobile-app-interface

Designs native iOS interfaces and components with Expo and React Native using Apple's Human Interface Guidelines.

Official
Advanced