Agent skill
ios-app-icon-generator
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.
Install this agent skill to your Project
npx add-skill https://github.com/GhostScientist/skills/tree/main/skills/ios-app-icon-generator
SKILL.md
iOS App Icon Generator
Create beautiful, production-ready iOS app icons through a two-phase creative process.
Phase 1: Visual Philosophy
Before drawing anything, develop a 2-3 paragraph Icon Philosophy that articulates:
- Core concept: What single idea or feeling should the icon convey?
- Visual metaphor: What shape, object, or abstraction represents the app's purpose?
- Color psychology: What palette evokes the right emotional response?
- Silhouette test: Will it be recognizable as a tiny black shape?
Write this philosophy out. It guides every design decision.
Design Principles
Icons that work follow these rules:
- Simplicity: One focal element. No more than 2-3 colors. No text (illegible at small sizes).
- Distinctiveness: Must stand out in a grid of 30 other icons. Avoid generic symbols (gears, checkmarks, clouds).
- Scalability: The 16x16 notification icon must read as clearly as the 1024x1024 App Store version.
- No photography: Apple's guidelines discourage photos. Use illustration, geometry, or abstract forms.
- Optical balance: Center of visual weight, not geometric center. Curves feel heavier than straight lines.
Phase 2: Icon Generation
Generate the icon as a self-contained HTML file with embedded SVG that:
- Renders the icon design at 1024x1024 (the master size)
- Includes iOS-style rounded corners (superellipse, not CSS border-radius)
- Shows a preview grid of all sizes to verify readability
- Provides a download mechanism for each size
Required Sizes
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) |
HTML Artifact Structure
<!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>
SVG Guidelines
- Use
viewBox="0 0 1024 1024"for the master - Apply the iOS squircle mask (superellipse with n≈5)
- Use gradients sparingly but effectively
- Ensure googd stroke widths scale proportionally
- Test: zoom browser to 25% - is the icon still clear?
iOS Squircle Mask
The 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.
Process
- Ask about the app's purpose, name, and any existing brand colors
- Write the Icon Philosophy
- Describe 2-3 concept directions with rationale
- Get user approval on a direction
- Generate the HTML artifact with full icon set
- Iterate based on feedback
Quality Bar
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:
- Glossy/skeuomorphic styles (outdated since iOS 7)
- Thin hairline details (disappear at small sizes)
- Overly complex illustrations
- Generic clip-art aesthetics
- Centered-circle-on-gradient laziness
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
GhostScientist/skills
your-skill-name
A clear description of what this skill does and when Claude should use it. Include trigger phrases like "when asked to...", "use when...", or specific keywords that should activate this skill.
GhostScientist/skills
create-watchos-version
Analyzes existing iOS/macOS/Apple platform projects to create a comprehensive, phased plan for building a watchOS companion or standalone app. Use when users want to add watchOS support to an existing Apple platform app, create a Watch app version of their iOS app, or build watchOS features. The skill digests project architecture, identifies patterns, analyzes API compatibility, searches for current watchOS documentation, and produces a detailed implementation plan with API availability warnings before any code generation.
GhostScientist/skills
research-taste-developer
Develops intuition for what makes research "good" versus "incremental." Use when asked about research taste, how to identify good research, what makes a paper impactful, how to develop research intuition, or how to pick important problems. Analyzes patterns in highly-cited work and what top researchers do differently.
GhostScientist/skills
implement-paper-from-scratch
Guides you through implementing a research paper step-by-step from scratch. Use when asked to implement a paper, code up a paper, reproduce research results, or build a model from a paper. Focuses on building understanding through implementation with checkpoint questions.
GhostScientist/skills
research-question-refiner
Helps transform a vague research interest into a concrete, tractable research question. Use when asked to refine a research idea, develop a research question, scope a research project, or figure out what to work on. Walks through systematic refinement with feasibility analysis.
GhostScientist/skills
experiment-design-checklist
Generates a rigorous experiment design given a hypothesis. Use when asked to design experiments, plan experiments, create an experimental setup, or figure out how to test a research hypothesis. Covers controls, baselines, ablations, metrics, statistical tests, and compute estimates.
Didn't find tool you were looking for?