Generates a complete iOS app icon set with all required sizes. Use when asked to create an app icon, design an iOS icon, generate app store artwork, or make an icon for an iPhone/iPad app. Follows a philosophy-first approach - first defining the visual identity and concept, then producing production-ready icons.
/plugin marketplace add GhostScientist/skills/plugin install writing-skills@GhostScientist-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Create beautiful, production-ready iOS app icons through a two-phase creative process.
Before drawing anything, develop a 2-3 paragraph Icon Philosophy that articulates:
Write this philosophy out. It guides every design decision.
Icons that work follow these rules:
Generate the icon as a self-contained HTML file with embedded SVG that:
Generate all iOS app icon sizes:
| Size | Purpose |
|---|---|
| 1024x1024 | App Store |
| 180x180 | iPhone (@3x) |
| 167x167 | iPad Pro (@2x) |
| 152x152 | iPad (@2x) |
| 120x120 | iPhone (@2x) |
| 87x87 | Spotlight (@3x) |
| 80x80 | Spotlight (@2x) |
| 76x76 | iPad (@1x) |
| 60x60 | iPhone (@1x) |
| 58x58 | Settings (@2x) |
| 40x40 | Spotlight (@1x) |
| 29x29 | Settings (@1x) |
| 20x20 | Notification (@1x) |
<!DOCTYPE html>
<html>
<head>
<title>App Icon: [Name]</title>
<style>
/* Dark interface, icon grid layout, download buttons */
</style>
</head>
<body>
<!-- Philosophy statement -->
<!-- Master SVG at 1024x1024 -->
<!-- Preview grid showing all sizes -->
<!-- Download buttons (use canvas to convert SVG → PNG) -->
<script>
// SVG → Canvas → PNG download logic
</script>
</body>
</html>
viewBox="0 0 1024 1024" for the masterThe iOS icon shape is NOT a rounded rectangle. Use this superellipse path or approximate with:
<clipPath id="ios-squircle">
<path d="M512,1024 C252,1024 0,772 0,512 C0,252 252,0 512,0 C772,0 1024,252 1024,512 C1024,772 772,1024 512,1024 Z" />
</clipPath>
Or generate programmatically with the superellipse formula: |x/a|^n + |y/b|^n = 1 where n ≈ 5.
The output should look like it belongs on a top-10 App Store chart. Every icon in that grid was crafted by a professional designer - yours should be indistinguishable from theirs.
Avoid:
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
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 original visual designs, never copying existing artists' work to avoid copyright violations.