apple-ui-design
Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.
Best use case
apple-ui-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.
Teams using apple-ui-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/apple-ui-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How apple-ui-design Compares
| Feature / Agent | apple-ui-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Apple UI Design
Apple-inspired clean, minimal, premium UI design system.
## When to Use
- Building modern interfaces requiring exceptional UX
- Creating clean, minimal aesthetics
- Implementing Apple-like polish and animations
- Designing premium user experiences
- Reviewing UI/UX for design quality
## Workflow
### Step 1: Apply Typography System
Use SF Pro Display with proper hierarchy (hero, title, body, caption).
### Step 2: Apply Color Philosophy
Use light/dark mode variables with proper contrast.
### Step 3: Apply Spacing System
Follow 4/8/16/24/48/96px spacing rhythm.
### Step 4: Verify Checklist
Ensure touch targets, contrast, and animations meet standards.
---
## Core Principles
1. **Clarity** - Content is king, UI disappears
2. **Deference** - UI serves content, never competes
3. **Depth** - Layering creates hierarchy
## Typography
```css
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
/* Hierarchy */
--text-hero: 600 48px/1.1; /* Bold statements */
--text-title: 600 32px/1.2; /* Section headers */
--text-body: 400 17px/1.5; /* Readable content */
--text-caption: 400 13px/1.4; /* Secondary info */
```
## Color Philosophy
```css
/* Light mode */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;
/* Dark mode */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;
```
## Spacing System
```css
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px; /* Section gaps */
```
## Key Patterns
### Cards
```css
.card {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(20px);
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
```
### Buttons
```css
.btn-primary {
background: var(--accent);
color: white;
padding: 12px 24px;
border-radius: 980px; /* Pill shape */
font-weight: 500;
transition: all 0.2s ease;
}
.btn-primary:hover {
transform: scale(1.02);
filter: brightness(1.1);
}
```
### Subtle Animations
```css
/* Micro-interactions */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
/* Page elements */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
```
## UX Rules
| Do | Don't |
|----|-------|
| Generous whitespace | Cramped layouts |
| One primary action | Multiple competing CTAs |
| Progressive disclosure | Everything visible |
| Subtle feedback | Jarring animations |
| System fonts | Decorative fonts |
## Checklist
- [ ] Touch targets ≥ 44px
- [ ] Contrast ratio ≥ 4.5:1
- [ ] Max content width ~680px
- [ ] Consistent spacing rhythm
- [ ] Dark mode support
- [ ] Smooth 60fps animationsRelated Skills
cc-routine-and-class-design
Evaluate routine and class design quality using Code Complete checklists (43 items). Use when designing routines or classes, reviewing class interfaces, choosing between inheritance and containment, or evaluating routine cohesion. Also trigger when tempted to use inheritance as a quick fix under deadline pressure, or when rationalizing 'but it works' for code with deep inheritance or many parameters. Produce severity-tagged reviews (VIOLATION/WARNING/PASS) in CHECKER mode or design decisions in APPLIER mode. Symptoms: vague routine names, >7 parameters, deep inheritance, mixed abstraction levels.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create ...
bimverdi-design
Generate BIM Verdi UI components and pages following the established design system. Use when building templates, components, or any frontend for bimverdi.no. Enforces enterprise-calm aesthetics and avoids generic AI patterns.
assertion-design
SystemVerilog Assertions (SVA) as executable specifications. Use when defining timing requirements, protocol specifications, or formal properties for RTL verification.
ascii-ui-designer
Create high-quality ASCII art UI/UX previews for web development with a two-phase approach. Phase 1: Design & Preview - visualize interfaces, explore layouts, refine ideas in ASCII format without code. Phase 2: Implementation - when ready, get HTML/CSS/React code and design tokens. Use for exploring ideas, getting stakeholder feedback, and iterating on design before development.
ascii-design-reviewer
Review Phase 1 ASCII UI designs from a product owner perspective. Analyze user journeys, identify potential issues, ask clarifying questions about requirements and user flows, create Mermaid diagrams (flowcharts, sequence diagrams, state charts), provide detailed system behavior documentation, and document error handling strategies. Use when reviewing ASCII mockups to validate design against actual user needs, understand system workflows, and ensure completeness before moving to implementation.
---name: armored-cart-design-agent
description: AI-powered design of armored CAR-T cells with cytokine/chemokine expression for enhanced solid tumor efficacy, including IL-12, IL-15, IL-18, and IL-7 armoring strategies.
archetype-designer
Design and manage TraitorSim agent archetypes with OCEAN personality traits, stat biases, and gameplay profiles. Use when creating new archetypes, modifying personality traits, defining character types, or when asked about archetype design, OCEAN traits, Big Five personality, or character templates.
Arcanea Design System
Complete visual design language for Arcanea - cosmic theme tokens, component patterns, animation standards, and Academy-specific aesthetics
apple-hig-designer
Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.
apple-design
Create Apple-inspired modern, minimalist UI designs with glassmorphism, smooth animations, generous whitespace, and elegant typography. Use when designing portfolio websites, landing pages, hero sections, product showcases, or implementing Apple-style components, dark mode, or responsive layouts.
api-design-agent
Designs RESTful and GraphQL APIs with clear contracts and documentation