aphlo avatar

apple-design

Create Apple-inspired modern, minimalist UI designs with glassmorphism, smooth animations, generous

提供方 aphlo|开源

Apple Design System

A comprehensive design system for creating Apple-inspired modern, minimalist UI designs.

📁 Structure

apple-design/
├── SKILL.md                    # Main skill file (422 lines)
├── README.md                   # This file
├── references/                 # Detailed reference documentation
│   ├── design-principles.md    # Design philosophy and guidelines
│   ├── color-system.md         # Color palettes, gradients, dark mode
│   ├── typography-system.md    # Typography scale and hierarchy
│   ├── animation-guide.md      # Animation timing and patterns
│   └── components-reference.md # Full component library
├── templates/                  # Ready-to-use HTML templates
│   ├── hero-section.html       # Full-screen hero with gradient
│   ├── project-card.html       # Project showcase cards
│   ├── contact-form.html       # Contact form with validation
│   └── footer.html             # Footer with newsletter
├── examples/                   # Pre-built CSS examples
│   ├── color-palette.css       # Complete color system
│   └── animations.css          # Animation library
└── scripts/                    # Utility scripts
    ├── README.md               # Scripts documentation
    ├── generate-color-vars.js  # Generate CSS variables
    └── check-contrast.js       # Check WCAG contrast

🎨 Features

Design System

  • Minimalist Design: Clean, uncluttered interfaces
  • 8px Grid System: Consistent spacing throughout
  • Fluid Typography: Responsive text using clamp()
  • Dark Mode: Full support with CSS custom properties
  • Glassmorphism: Frosted glass effects
  • Smooth Animations: 300-600ms transitions

Components

  • Hero sections
  • Navigation bars
  • Project cards
  • Glass cards
  • Buttons (Primary, Secondary, Ghost)
  • Contact forms
  • Footers
  • Modals
  • And more...

Color System

  • Light & Dark mode palettes
  • Semantic colors (success, error, warning, info)
  • Pre-defined gradients
  • Accessibility-compliant (WCAG AA minimum)

Typography

  • System font stack
  • Responsive type scale
  • Clear hierarchy
  • Optimal readability

Animations

  • Hover effects (lift, scale, glow)
  • Entrance animations (fade, slide, scale)
  • Loading states (skeleton, spinner)
  • Scroll-based animations
  • Performance-optimized (GPU-accelerated)

🚀 Quick Start

1. Basic Setup

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your content -->
</body>
</html>

2. Include Color System

/* Import from examples/color-palette.css */
@import url('examples/color-palette.css');

/* Or define your own */
:root {
  --bg-primary: #ffffff;
  --text-primary: #1d1d1f;
  --accent-blue: #0071e3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #000000;
    --text-primary: #f5f5f7;
    --accent-blue: #0a84ff;
  }
}

3. Apply Typography

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

4. Use Templates

Copy templates from templates/ folder and customize:

  • hero-section.html - For landing page hero
  • project-card.html - For portfolio project showcase
  • contact-form.html - For contact page
  • footer.html - For site footer

📖 Documentation

Core Principles

See design-principles.md for detailed guidelines on:

  • Minimalism & clarity
  • Typography excellence
  • Color philosophy
  • Spacing & layout
  • Visual effects
  • Motion & interactivity

Color System

See color-system.md for:

  • Complete color palettes
  • Gradient presets
  • Dark mode implementation
  • Accessibility guidelines
  • Theme switching

Typography

See typography-system.md for:

  • Font stacks
  • Type scales
  • Fluid typography
  • Text utilities
  • Accessibility

Animations

See animation-guide.md for:

  • Animation principles
  • Timing & easing
  • Common patterns
  • Performance optimization
  • Accessibility

Components

See components-reference.md for:

  • Navigation
  • Hero sections
  • Cards
  • Buttons
  • Forms
  • And more...

🛠️ Utility Scripts

Generate Color Variables

node scripts/generate-color-vars.js

Creates CSS custom properties from color palette.

Check Contrast Ratios

node scripts/check-contrast.js

Validates WCAG contrast compliance for your colors.

See scripts/README.md for detailed usage.

✅ Best Practices

Performance

  • ✅ Animate only transform and opacity
  • ✅ Use will-change sparingly
  • ✅ Optimize images (WebP, lazy loading)
  • ❌ Avoid animating width, height, top, left

Accessibility

  • ✅ Maintain 4.5:1 contrast ratio (WCAG AA)
  • ✅ Provide focus indicators
  • ✅ Use semantic HTML
  • ✅ Add ARIA labels
  • ✅ Respect prefers-reduced-motion
  • ✅ Minimum touch target: 44x44px

Responsive Design

  • ✅ Mobile-first approach
  • ✅ Use clamp() for fluid typography
  • ✅ Flexible grid layouts
  • ✅ Test on real devices

Code Organization

  • ✅ Use CSS variables
  • ✅ Keep specificity low
  • ✅ Document complex calculations
  • ✅ Group related properties

🎯 Use Cases

This design system is perfect for:

  • Portfolio websites
  • Landing pages
  • Product showcases
  • Personal blogs
  • SaaS marketing sites
  • Mobile app landing pages

📚 Resources

Official Apple Resources

Useful Tools

💡 Examples

Hero Section

<section class="hero">
  <div class="hero-content">
    <h1>Hi, I'm <span class="gradient-text">Your Name</span></h1>
    <p>Developer creating amazing experiences</p>
    <button class="btn btn-primary">View Work</button>
  </div>
</section>

Glass Card

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
}

Hover Animation

.card {
  transition: transform 300ms ease;
}

.card:hover {
  transform: translateY(-8px);
}

📄 License

This design system is open source and available for use in your projects.

🤝 Contributing

Feel free to customize and extend this design system for your needs. If you create useful components or utilities, consider sharing them back.

Remember: Apple's design philosophy is about removing the unnecessary to let the essential shine. Keep it simple, elegant, and focused on the user's needs.

下载 Skill