mcpField
A
apple-design-materials

apple-design-materials

github.com/s1gmamale1Design & UI3160 installsUpdated 22w ago
Repository

About apple-design-materials

apple-design-materials is a design skill for creating Apple-inspired translucent surfaces, app icons, and SF Symbols. It gives implementation guidance and cautions about accessibility, shape, and visual consistency.

Key features

  1. 01Guidance for translucent glass surfaces
  2. 02Web approximation techniques and fidelity limits
  3. 03Reduced-transparency fallback guidance
  4. 04Squircle shape implementation options
  5. 05SF Symbols weight, scale, and rendering modes

Use cases

  1. 01Designing a frosted navigation panel or sheet
  2. 02Creating an app icon with continuous corners
  3. 03Choosing SF Symbols styling to match nearby text

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/s1gmamale1/apple-design-skills --skill apple-design-materials

After installing, type/apple-design-materialsin Claude Code to confirm it loaded.

Bundled filesreferences/iconography-sf-symbols.mdreferences/materials-liquid-glass.md

Details

From the project README

Apple Design — Materials & Iconography

Apple's surface character: translucent glass materials, and the icon/symbol system.

When to use

  • Building a frosted/glass panel, nav, sheet, or the Liquid Glass look.
  • Designing an app icon (the squircle is not a plain rounded rectangle).
  • Using or imitating SF Symbols.

Core rules

  • Glass is a layer, not a paint. It samples + blurs what's behind, then tints with vibrant labels. Web approximation: backdrop-filter: blur() saturate() + a translucent fill + a light top-edge highlight. CSS can't do Apple's real-time lensing/refraction — approximate, don't pretend.
  • Never stack glass on glass, and never put low-contrast text on a busy translucent area. Always provide a prefers-reduced-transparency opaque fallback.
  • The squircle is a G2 continuous-curvature shape (community-reverse-engineered Bézier), not border-radius. Use clip-path/SVG, or corner-shape: squircle (Chrome 139+, not yet Safari/Firefox).
  • SF Symbols match font weight + optical size; pick one rendering mode (monochrome / hierarchical / palette / multicolor) deliberately. Don't multicolor everything.

References

FileUse for
references/materials-liquid-glass.mdSystem material names, Liquid Glass behaviors, CSS glass recipes, SwiftUI .glassEffect(), fidelity limits
references/iconography-sf-symbols.mdSquircle math + CSS/SVG, icon grid, SF Symbols weights/scales/modes/effects

Common mistakes

  • Over-blurring everything; glass-on-glass; ignoring reduce-transparency.
  • Simple border-radius instead of continuous corners; off-grid icon art.
  • Mismatched symbol weight vs adjacent text; multicolor overuse.

Related: the material's color/contrast → apple-design-foundations · glass under reduce-transparency → apple-design-tactics.

Comments

Markdown supported