Skills
.Work. You
Rest

ios-style-designer

Community

Craft Apple-inspired web interfaces.

Design & Creative#ui/ux#web design#glassmorphism#ios design#apple hig#mobile first
AuthorGyanano
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ios-style-designer
Download link: https://github.com/Gyanano/agent-skills/archive/main.zip#ios-style-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.