aiblueprint-cli 1.4.83 → 1.4.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: app-icon
|
|
3
|
+
description: Generate a polished iOS + Android app icon for an Expo / React Native app with AI image generation, then post-process it to App Store / Play specs. Use for "create my app icon", "generate the iOS icon", "redo the app logo", "make the launcher icon". Requires an image-generation tool (Codex imagegen / gpt-image); without one it builds the prompt for you to run, then resumes at post-processing.
|
|
4
|
+
argument-hint: "[app concept or brand]"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# App Icon
|
|
8
|
+
|
|
9
|
+
Generate a store-quality launcher icon (iOS App Store icon + Android adaptive icon + web favicon) for an Expo / React Native app, then post-process it to meet store requirements.
|
|
10
|
+
|
|
11
|
+
<capability_gate>
|
|
12
|
+
**This workflow requires an image-generation tool** (Codex's `imagegen` skill backed by gpt-image, or any model/agent that can generate raster images).
|
|
13
|
+
|
|
14
|
+
- **Codex**: invoke the `imagegen` skill with the prompt below. Generated files land in `~/.codex/generated_images/<session-id>/ig_*.png` — copy them into the repo.
|
|
15
|
+
- **Agent WITHOUT image generation (e.g. Claude Code without an image tool)**: do NOT fake it (no SVG-to-PNG pipelines — that produces flat, amateur results). Instead: build the final prompt from the recipe below, give it to the user to run in their image tool of choice, then resume at the Post-Processing phase with the file they provide.
|
|
16
|
+
</capability_gate>
|
|
17
|
+
|
|
18
|
+
<locate_assets>
|
|
19
|
+
Find where this app's icon actually lives before writing anything. Read the Expo config (`app.json`, `app.config.js`, or `app.config.ts`) and use the real paths:
|
|
20
|
+
|
|
21
|
+
- iOS icon → `expo.icon` (commonly `./assets/icon.png` or `./assets/images/icon.png`)
|
|
22
|
+
- Android adaptive icon foreground → `expo.android.adaptiveIcon.foregroundImage` (commonly `./assets/adaptive-icon.png`)
|
|
23
|
+
- Android adaptive background color → `expo.android.adaptiveIcon.backgroundColor`
|
|
24
|
+
- Web favicon → `expo.web.favicon` (commonly `./assets/favicon.png`)
|
|
25
|
+
|
|
26
|
+
In a monorepo the app may live under `mobile-app/` or `apps/<name>/` — resolve paths relative to the Expo project root, not the repo root. Below, `<ASSETS>` means that app's resolved assets directory.
|
|
27
|
+
|
|
28
|
+
Pull the **brand colors** and **app concept/name** from the project (a brand/site config, the README, or just ask the user). Use color *names* in the prompt, never hex.
|
|
29
|
+
</locate_assets>
|
|
30
|
+
|
|
31
|
+
<objective>
|
|
32
|
+
| Asset | Target file (typical) | Spec |
|
|
33
|
+
| --- | --- | --- |
|
|
34
|
+
| iOS app icon | `<ASSETS>/icon.png` | 1024x1024, square, **NO transparency**, **no baked rounded mask** (iOS applies its own) |
|
|
35
|
+
| Android adaptive icon | `<ASSETS>/adaptive-icon.png` | foreground layer, subject inside the central ~66% safe circle, padded |
|
|
36
|
+
| Web favicon | `<ASSETS>/favicon.png` | 192x192 derived from the icon |
|
|
37
|
+
</objective>
|
|
38
|
+
|
|
39
|
+
<icon_recipe>
|
|
40
|
+
A layered prompt that avoids the common app-icon failure modes (baked rounded tiles, logo plates, accidental text, drop-shadow "floating card" look, unwanted mascots). Fill the two project blanks — **Subject** (the product's core concept/mascot/symbol) and the **Color palette** (named brand colors, never hex) — then send the entire block as one prompt to the image model.
|
|
41
|
+
|
|
42
|
+
Counter-intuitive but critical: tell the model it is **NOT** making an app-icon tile. Models bake in rounded-square plates, outer margins, and drop shadows the moment they hear "app icon". You want a full-bleed square subject filling 92-98% of the canvas; iOS applies its own mask afterward.
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
Create a 1024x1024 square symbol illustration.
|
|
46
|
+
|
|
47
|
+
Subject: <single centered mark for <AppName> — the product's core concept/mascot/symbol, highly readable at small sizes>
|
|
48
|
+
|
|
49
|
+
Context: standalone symbol/illustration for general use, not an app launcher icon or UI mockup.
|
|
50
|
+
Do not design or imply an app icon, logo plate, badge, or rounded-square container, even if the words "app icon" or "logo" appear.
|
|
51
|
+
Do not draw an icon inside a larger canvas. No outer margins, padding, or separate card background.
|
|
52
|
+
Do not draw any rounded-square tile, card, or container behind the subject.
|
|
53
|
+
The canvas itself is a perfect square with sharp 90° corners; do not simulate rounded-corner app icon masks or device-rounded corners.
|
|
54
|
+
No global drop shadows, long cast shadows, outer glows, or halos around the subject or canvas.
|
|
55
|
+
No UI mockups. No borders, frames, stickers, app plates, or device chrome.
|
|
56
|
+
No text/typography (letters, numbers, monograms). No watermark.
|
|
57
|
+
Not a full photo/portrait/real-world scene. No realistic human faces as the main subject.
|
|
58
|
+
Do not copy or imitate real brand logos, trademarked shapes, or recognizable brand marks.
|
|
59
|
+
|
|
60
|
+
Archetype (internal decision, do not mention in the output):
|
|
61
|
+
Choose exactly ONE archetype: object_icon, abstract_form_icon, hybrid_icon, or character_icon. Characters are optional and must only be used when clearly appropriate; never the default.
|
|
62
|
+
- object_icon: a single physical/symbolic object without a face (finance, productivity, utilities, dev tools, dashboards, system apps).
|
|
63
|
+
- abstract_form_icon: pure form/metaphor without literal objects or faces (AI tools, design tools, analytics, experimental products).
|
|
64
|
+
- hybrid_icon: an object with subtle life cues (no face), friendly but restrained (health, lifestyle).
|
|
65
|
+
- character_icon: a friendly expressive character with a face (kids, games, beginner education, wellness, fun social).
|
|
66
|
+
|
|
67
|
+
Concept:
|
|
68
|
+
Design a single, intentional visual element that represents the app. Avoid generic logos and the most literal/obvious metaphor; choose a clear but slightly unexpected metaphor.
|
|
69
|
+
Creativity means unusual material choices, unexpected-but-clear metaphors, expressive lighting, playful proportions, premium texture decisions. It does NOT mean always adding eyes/faces or always making it cute.
|
|
70
|
+
|
|
71
|
+
Material:
|
|
72
|
+
Default to an illustration-friendly matte finish (painted polymer, ceramic, paper, or flat vector). Avoid glass/chrome/neon unless explicitly requested. Material choice should communicate the product category.
|
|
73
|
+
|
|
74
|
+
Composition:
|
|
75
|
+
Main subject fills 92-98% of the canvas. Strong silhouette. No unnecessary elements.
|
|
76
|
+
|
|
77
|
+
Lighting:
|
|
78
|
+
Soft, controlled lighting. Minimal specular highlights. No bloom/glow/lens flares. No "3D glass icon" look.
|
|
79
|
+
|
|
80
|
+
Overall feel:
|
|
81
|
+
Modern, bold, subject-first illustration (not an app icon layout). Creative without being childish. Readable at small sizes. Clean illustration / 2D or 2.5D, matte finish, subtle shading only.
|
|
82
|
+
|
|
83
|
+
Color palette: <brand colors as names — e.g. "warm peach background, deep ink subject">. Clean contrast on both light and dark backgrounds.
|
|
84
|
+
|
|
85
|
+
Technical constraints:
|
|
86
|
+
Square 1:1 aspect ratio.
|
|
87
|
+
Main subject fills 92-98% of the canvas (zoom in; avoid excessive empty space).
|
|
88
|
+
Center/balance the silhouette. Keep critical details within ~5-8% safe area.
|
|
89
|
+
Android-safe: keep critical details within the central ~70% (silhouette may extend).
|
|
90
|
+
Background extends to all four edges of the square canvas with straight (non-rounded) corners; keep it clean (low-detail, low-noise).
|
|
91
|
+
Default-look guardrail: avoid inflated glass/chrome/neon/glow/sparkles/lens flare/exaggerated shine unless explicitly requested.
|
|
92
|
+
|
|
93
|
+
Quality filters (internal):
|
|
94
|
+
Reject if: it reads like a photo/portrait/full scene; it becomes a mascot by default; too many elements hurt clarity; a face appears without choosing character_icon; any rounded-square/card/tile background or app-icon container appears behind the subject.
|
|
95
|
+
Accept if: instant read at small size; strong silhouette; intentional material; clean contrast on both light and dark backgrounds.
|
|
96
|
+
|
|
97
|
+
Icon QA (internal): blur test (~64px), small-size readability, wallpaper contrast, one focal point.
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**Optional style preset.** Lock a look as a HARD constraint (it wins any conflict) by appending a dominant style block before the technical constraints. Useful named looks: `minimalism`, `glassy`, `geometric`, `gradient`, `flat`, `material`, `clay`, `kawaii`. Example for `minimalism`:
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
STYLE SYSTEM: MINIMALISM (dominant — if anything conflicts, the style wins)
|
|
104
|
+
Cultural DNA: Swiss design, Apple, Braun, Dieter Rams, Functionalism.
|
|
105
|
+
Visual traits: max 3 colors; simple primary silhouettes; large negative space; no textures; no effects.
|
|
106
|
+
Mandatory: readable at very small sizes; works in monochrome; single dominant symbol.
|
|
107
|
+
Forbidden: gradients, shadows, 3D effects, decorative details, textures.
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Non-negotiable for iOS (enforced in Post-Processing, not the prompt): the saved `icon.png` must have **no baked rounded corners** (iOS applies the mask), **no transparency** (App Store rejects alpha in the marketing icon), and stay **readable at 60px**.
|
|
111
|
+
</icon_recipe>
|
|
112
|
+
|
|
113
|
+
<generation_loop>
|
|
114
|
+
1. Generate the icon (1-3 candidates if the concept is open).
|
|
115
|
+
2. **Visually inspect every output** (open/read the images): strong silhouette? readable at small size? no baked rounded-square tile / no drop-shadow card? no accidental text or watermark? no transparency artifacts?
|
|
116
|
+
3. Reject and regenerate what fails — refine the prompt, don't accept "almost".
|
|
117
|
+
4. **Safety-filter gotcha**: a prompt can be rejected for ambiguous wording with harmless content. Reword to simple, neutral, single-paragraph phrasing and retry.
|
|
118
|
+
5. **Blur test:** shrink to ~64px — if the mark turns to mush, the concept is too detailed; simplify the silhouette.
|
|
119
|
+
</generation_loop>
|
|
120
|
+
|
|
121
|
+
<post_processing>
|
|
122
|
+
macOS uses `sips` (built in) + ImageMagick (`magick`, `brew install imagemagick`). Replace `<ASSETS>` and `<brand-bg-color>` with the values from `<locate_assets>`.
|
|
123
|
+
|
|
124
|
+
```bash
|
|
125
|
+
# 1. iOS icon: enforce 1024x1024 and strip alpha (App Store requirement)
|
|
126
|
+
sips -z 1024 1024 icon-raw.png --out /tmp/icon-1024.png
|
|
127
|
+
magick /tmp/icon-1024.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png
|
|
128
|
+
# (no ImageMagick? `sips -s format jpeg /tmp/icon-1024.png --out /tmp/icon.jpg` then back to png also strips alpha)
|
|
129
|
+
|
|
130
|
+
# 2. Android adaptive icon: pad the subject into the central ~66% safe circle on a brand background.
|
|
131
|
+
# Scaling the full-bleed icon to ~66% places the SUBJECT inside the safe zone; the brand-bg extent fills the rest.
|
|
132
|
+
magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png
|
|
133
|
+
# Then make sure app config matches: expo.android.adaptiveIcon.backgroundColor == <brand-bg-color>.
|
|
134
|
+
# (For a cleaner result you can instead re-run the recipe with "leave ~20% padding for Android adaptive safe zone".)
|
|
135
|
+
|
|
136
|
+
# 3. Favicon + verification
|
|
137
|
+
sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png
|
|
138
|
+
sips -g pixelWidth -g pixelHeight -g hasAlpha <ASSETS>/icon.png <ASSETS>/adaptive-icon.png <ASSETS>/favicon.png
|
|
139
|
+
# icon.png MUST report hasAlpha: no
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Remember: **icon and adaptive-icon changes require a native rebuild** (`npx expo run:ios` / `npx expo run:android`, or a new EAS build) — they will NOT appear on hot reload. The favicon is a web asset and reloads normally.
|
|
143
|
+
</post_processing>
|
|
144
|
+
|
|
145
|
+
<render_verification>
|
|
146
|
+
File inspection is not enough for the launcher icon — confirm it on a device/simulator after a native rebuild.
|
|
147
|
+
|
|
148
|
+
1. Rebuild the dev client so the new icon is bundled (`npx expo run:ios` or `npx expo run:android`).
|
|
149
|
+
2. On the home screen, confirm: the icon shows the new art (not the old/default), iOS applies a clean rounded mask with no double-rounding or visible alpha edge, and the mark is readable at home-screen size.
|
|
150
|
+
3. Fail the run if the icon still shows the previous art or a transparent/white corner halo. Fix before reporting completion.
|
|
151
|
+
</render_verification>
|
|
152
|
+
|
|
153
|
+
<failure_modes>
|
|
154
|
+
- Generated icon has transparency or baked rounded corners → App Store rejection; strip alpha (`-alpha remove`), regenerate without any tile/mask.
|
|
155
|
+
- iOS shows a white/transparent corner halo → alpha was not stripped; re-run the `magick ... -alpha remove -alpha off` step and rebuild.
|
|
156
|
+
- Android adaptive icon looks cropped at the edges → subject sat outside the central 66% safe circle; increase padding (lower the `-resize` percentage) or regenerate with explicit padding.
|
|
157
|
+
- Icon unchanged after editing the PNG → no native rebuild; hot reload never updates the launcher icon.
|
|
158
|
+
- Flat/amateur output → prompt missed the "subject-first illustration, not an app icon layout" + matte/material anchors, or fell back to a generic logo.
|
|
159
|
+
- Prompt rejected by safety filter → reword neutrally, simplify to one plain paragraph; content was almost certainly fine.
|
|
160
|
+
- Mark turns to mush at small size → too detailed; simplify to a single strong silhouette (blur/64px test).
|
|
161
|
+
</failure_modes>
|