@daemux/store-automator 0.3.0 → 0.5.1
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.
- package/.claude-plugin/marketplace.json +2 -2
- package/README.md +11 -13
- package/bin/cli.mjs +69 -10
- package/package.json +7 -8
- package/plugins/store-automator/.claude-plugin/plugin.json +1 -1
- package/plugins/store-automator/agents/app-designer.md +320 -0
- package/plugins/store-automator/agents/appstore-meta-creator.md +37 -1
- package/plugins/store-automator/agents/appstore-reviewer.md +66 -5
- package/plugins/store-automator/agents/architect.md +144 -0
- package/plugins/store-automator/agents/developer.md +249 -0
- package/plugins/store-automator/agents/devops.md +396 -0
- package/plugins/store-automator/agents/product-manager.md +258 -0
- package/plugins/store-automator/agents/reviewer.md +386 -0
- package/plugins/store-automator/agents/simplifier.md +192 -0
- package/plugins/store-automator/agents/tester.md +284 -0
- package/scripts/check_changed.sh +23 -0
- package/scripts/check_google_play.py +139 -0
- package/scripts/codemagic-setup.mjs +44 -0
- package/scripts/generate.sh +107 -0
- package/scripts/manage_version_ios.py +168 -0
- package/src/codemagic-api.mjs +73 -0
- package/src/codemagic-setup.mjs +164 -0
- package/src/github-setup.mjs +52 -0
- package/src/install.mjs +32 -7
- package/src/prompt.mjs +7 -2
- package/src/templates.mjs +15 -5
- package/src/uninstall.mjs +37 -21
- package/templates/CLAUDE.md.template +293 -223
- package/templates/ci.config.yaml.template +14 -1
- package/templates/codemagic.template.yaml +15 -6
- package/templates/fastlane/android/Fastfile.template +11 -4
- package/templates/fastlane/ios/Fastfile.template +27 -11
- package/templates/fastlane/ios/Snapfile.template +3 -1
- package/templates/github/workflows/codemagic-trigger.yml +68 -0
- package/templates/scripts/create_app_record.py +172 -0
- package/templates/scripts/generate.sh +6 -0
- package/plugins/store-automator/agents/appstore-media-designer.md +0 -195
- package/src/dependency-check.mjs +0 -26
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
},
|
|
6
6
|
"metadata": {
|
|
7
7
|
"description": "App Store & Google Play automation for Flutter apps",
|
|
8
|
-
"version": "0.
|
|
8
|
+
"version": "0.5.1"
|
|
9
9
|
},
|
|
10
10
|
"plugins": [
|
|
11
11
|
{
|
|
12
12
|
"name": "store-automator",
|
|
13
13
|
"source": "./plugins/store-automator",
|
|
14
14
|
"description": "3 agents for app store publishing: reviewer, meta-creator, media-designer",
|
|
15
|
-
"version": "0.
|
|
15
|
+
"version": "0.5.1",
|
|
16
16
|
"keywords": ["flutter", "app-store", "google-play", "fastlane", "codemagic"]
|
|
17
17
|
}
|
|
18
18
|
]
|
package/README.md
CHANGED
|
@@ -8,14 +8,13 @@ This package installs three Claude Code agents and a complete CI/CD template sui
|
|
|
8
8
|
|
|
9
9
|
- **appstore-reviewer** -- Reviews metadata, screenshots, and tests compliance with Apple App Store and Google Play guidelines
|
|
10
10
|
- **appstore-meta-creator** -- Creates all store metadata texts (names, descriptions, keywords) for all available languages
|
|
11
|
-
- **
|
|
11
|
+
- **app-designer** -- Designs complete app UI, creates ASO-optimized store screenshots, and designs marketing web pages — all in Stitch MCP
|
|
12
12
|
|
|
13
13
|
Plus CI/CD templates for Codemagic, Fastlane, web pages, and scripts.
|
|
14
14
|
|
|
15
15
|
## Requirements
|
|
16
16
|
|
|
17
17
|
- [Claude CLI](https://docs.anthropic.com/en/docs/claude-code/overview) installed
|
|
18
|
-
- [@daemux/claude-plugin](https://www.npmjs.com/package/@daemux/claude-plugin) (installed automatically)
|
|
19
18
|
- Node.js >= 18
|
|
20
19
|
- Flutter project
|
|
21
20
|
|
|
@@ -28,13 +27,12 @@ npm install @daemux/store-automator
|
|
|
28
27
|
|
|
29
28
|
The postinstall script will:
|
|
30
29
|
|
|
31
|
-
1.
|
|
32
|
-
2.
|
|
33
|
-
3.
|
|
34
|
-
4.
|
|
35
|
-
5. Copy
|
|
36
|
-
6.
|
|
37
|
-
7. Configure `.claude/settings.json` with required env vars
|
|
30
|
+
1. Prompt for MCP server tokens (Stitch, Cloudflare)
|
|
31
|
+
2. Configure `.mcp.json` with MCP servers (Playwright, mobile-mcp, Stitch, Cloudflare)
|
|
32
|
+
3. Install the plugin marketplace and register agents
|
|
33
|
+
4. Copy `CLAUDE.md` template to `.claude/CLAUDE.md`
|
|
34
|
+
5. Copy CI/CD templates (Fastlane, scripts, web pages, ci.config.yaml)
|
|
35
|
+
6. Configure `.claude/settings.json` with required env vars
|
|
38
36
|
|
|
39
37
|
## After Installation
|
|
40
38
|
|
|
@@ -73,9 +71,9 @@ npx @daemux/store-automator -g -u # global scope
|
|
|
73
71
|
|
|
74
72
|
Creates all metadata texts for both Apple App Store and Google Play in all configured languages. Outputs to `fastlane/metadata/ios/` and `fastlane/metadata/android/`.
|
|
75
73
|
|
|
76
|
-
###
|
|
74
|
+
### app-designer
|
|
77
75
|
|
|
78
|
-
|
|
76
|
+
Designs complete app UI screens, creates ASO-optimized store screenshots for all required device sizes, and designs the marketing web page. All work done in a single Stitch MCP project. Researches competitors for ASO optimization. Outputs screenshots to `fastlane/screenshots/`.
|
|
79
77
|
|
|
80
78
|
### appstore-reviewer
|
|
81
79
|
|
|
@@ -100,8 +98,8 @@ The package installs these templates to your project:
|
|
|
100
98
|
|
|
101
99
|
1. Install the package
|
|
102
100
|
2. Fill `ci.config.yaml`
|
|
103
|
-
3. Use `
|
|
104
|
-
4. Use `appstore-
|
|
101
|
+
3. Use `app-designer` to design app UI + create screenshots + design web page
|
|
102
|
+
4. Use `appstore-meta-creator` to generate metadata
|
|
105
103
|
5. Use `appstore-reviewer` to verify compliance
|
|
106
104
|
6. Run `scripts/generate.sh` to create `codemagic.yaml`
|
|
107
105
|
7. Push to GitHub -- Codemagic builds and publishes automatically
|
package/bin/cli.mjs
CHANGED
|
@@ -15,8 +15,26 @@ const args = process.argv.slice(2);
|
|
|
15
15
|
let scope = 'project';
|
|
16
16
|
let action = 'install';
|
|
17
17
|
let isPostinstall = false;
|
|
18
|
+
let cmTokenArg = '';
|
|
19
|
+
let cmBranch = 'main';
|
|
20
|
+
let cmWorkflowId = 'default';
|
|
21
|
+
let cmTrigger = false;
|
|
22
|
+
let cmWait = false;
|
|
18
23
|
|
|
19
24
|
for (const arg of args) {
|
|
25
|
+
if (arg.startsWith('--token=')) {
|
|
26
|
+
cmTokenArg = arg.slice(8);
|
|
27
|
+
continue;
|
|
28
|
+
}
|
|
29
|
+
if (arg.startsWith('--branch=')) {
|
|
30
|
+
cmBranch = arg.slice(9);
|
|
31
|
+
continue;
|
|
32
|
+
}
|
|
33
|
+
if (arg.startsWith('--workflow=')) {
|
|
34
|
+
cmWorkflowId = arg.slice(11);
|
|
35
|
+
continue;
|
|
36
|
+
}
|
|
37
|
+
|
|
20
38
|
switch (arg) {
|
|
21
39
|
case '-g':
|
|
22
40
|
case '--global':
|
|
@@ -29,22 +47,49 @@ for (const arg of args) {
|
|
|
29
47
|
case '--postinstall':
|
|
30
48
|
isPostinstall = true;
|
|
31
49
|
break;
|
|
50
|
+
case '--codemagic-setup':
|
|
51
|
+
action = 'codemagic-setup';
|
|
52
|
+
break;
|
|
53
|
+
case '--github-setup':
|
|
54
|
+
action = 'github-setup';
|
|
55
|
+
break;
|
|
56
|
+
case '--trigger':
|
|
57
|
+
cmTrigger = true;
|
|
58
|
+
break;
|
|
59
|
+
case '--wait':
|
|
60
|
+
cmWait = true;
|
|
61
|
+
break;
|
|
32
62
|
case '-h':
|
|
33
63
|
case '--help':
|
|
34
64
|
console.log(`Usage: npx @daemux/store-automator [options]
|
|
35
65
|
|
|
36
66
|
Options:
|
|
37
|
-
-g, --global
|
|
38
|
-
-u, --uninstall
|
|
39
|
-
--postinstall
|
|
40
|
-
-v, --version
|
|
41
|
-
-h, --help
|
|
67
|
+
-g, --global Install globally (~/.claude) instead of project scope
|
|
68
|
+
-u, --uninstall Uninstall plugin and remove files
|
|
69
|
+
--postinstall Run as postinstall hook (auto-detected)
|
|
70
|
+
-v, --version Show version number
|
|
71
|
+
-h, --help Show help
|
|
72
|
+
|
|
73
|
+
Codemagic:
|
|
74
|
+
--codemagic-setup Register repo and optionally trigger build
|
|
75
|
+
--token=TOKEN API token (or set CM_API_TOKEN env var)
|
|
76
|
+
--branch=BRANCH Branch to build (default: main)
|
|
77
|
+
--workflow=ID Workflow ID (default: default)
|
|
78
|
+
--trigger Trigger build after setup
|
|
79
|
+
--wait Wait for build completion (implies --trigger)
|
|
80
|
+
|
|
81
|
+
GitHub Actions (auto-configured during install if gh CLI available):
|
|
82
|
+
--github-setup Set CM_API_TOKEN secret for GitHub Actions
|
|
83
|
+
--token=TOKEN API token (or set CM_API_TOKEN env var)
|
|
42
84
|
|
|
43
85
|
Examples:
|
|
44
|
-
npx @daemux/store-automator
|
|
45
|
-
npx @daemux/store-automator -g
|
|
46
|
-
npx @daemux/store-automator -u
|
|
47
|
-
npx @daemux/store-automator -g -u
|
|
86
|
+
npx @daemux/store-automator Install for project
|
|
87
|
+
npx @daemux/store-automator -g Install globally
|
|
88
|
+
npx @daemux/store-automator -u Uninstall from project
|
|
89
|
+
npx @daemux/store-automator -g -u Uninstall globally
|
|
90
|
+
npx @daemux/store-automator --codemagic-setup Register with Codemagic
|
|
91
|
+
npx @daemux/store-automator --codemagic-setup --trigger --wait Trigger and wait
|
|
92
|
+
npx @daemux/store-automator --github-setup Configure GitHub Actions`);
|
|
48
93
|
process.exit(0);
|
|
49
94
|
break; // eslint: no-fallthrough
|
|
50
95
|
case '-v':
|
|
@@ -55,10 +100,24 @@ Examples:
|
|
|
55
100
|
}
|
|
56
101
|
}
|
|
57
102
|
|
|
103
|
+
if (cmWait) cmTrigger = true;
|
|
104
|
+
|
|
58
105
|
notifier.notify();
|
|
59
106
|
|
|
60
107
|
try {
|
|
61
|
-
if (action === '
|
|
108
|
+
if (action === 'codemagic-setup') {
|
|
109
|
+
const { runCodemagicSetup } = await import('../src/codemagic-setup.mjs');
|
|
110
|
+
await runCodemagicSetup({
|
|
111
|
+
tokenArg: cmTokenArg,
|
|
112
|
+
branch: cmBranch,
|
|
113
|
+
workflowId: cmWorkflowId,
|
|
114
|
+
trigger: cmTrigger,
|
|
115
|
+
wait: cmWait,
|
|
116
|
+
});
|
|
117
|
+
} else if (action === 'github-setup') {
|
|
118
|
+
const { runGitHubSetup } = await import('../src/github-setup.mjs');
|
|
119
|
+
await runGitHubSetup({ tokenArg: cmTokenArg });
|
|
120
|
+
} else if (action === 'uninstall') {
|
|
62
121
|
const { runUninstall } = await import('../src/uninstall.mjs');
|
|
63
122
|
await runUninstall(scope);
|
|
64
123
|
} else {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daemux/store-automator",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Full App Store & Google Play automation for Flutter apps with Claude Code agents",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"files": [
|
|
13
13
|
"bin/",
|
|
14
14
|
"src/",
|
|
15
|
+
"scripts/",
|
|
15
16
|
".claude-plugin/",
|
|
16
17
|
"plugins/",
|
|
17
18
|
"templates/"
|
|
@@ -28,17 +29,15 @@
|
|
|
28
29
|
"ci-cd",
|
|
29
30
|
"daemux"
|
|
30
31
|
],
|
|
31
|
-
"author": {
|
|
32
|
-
"name": "Daemux"
|
|
33
|
-
},
|
|
32
|
+
"author": { "name": "Daemux" },
|
|
34
33
|
"license": "MIT",
|
|
35
34
|
"repository": {
|
|
36
35
|
"type": "git",
|
|
37
|
-
"url": "https://github.com/daemux/
|
|
38
|
-
|
|
39
|
-
"engines": {
|
|
40
|
-
"node": ">=18"
|
|
36
|
+
"url": "https://github.com/daemux/daemux-plugins.git",
|
|
37
|
+
"directory": "claude-plugins/store-automator"
|
|
41
38
|
},
|
|
39
|
+
"publishConfig": { "access": "public" },
|
|
40
|
+
"engines": { "node": ">=18" },
|
|
42
41
|
"dependencies": {
|
|
43
42
|
"update-notifier": "^7.3.1"
|
|
44
43
|
}
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: app-designer
|
|
3
|
+
description: "Designs complete app UI, creates ASO-optimized store screenshots, and designs marketing web pages. Everything in ONE Stitch MCP project. Researches competitors for ASO optimization."
|
|
4
|
+
model: opus
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
You are a senior app designer, app store creative designer, and ASO (App Store Optimization) specialist. You are responsible for ALL visual design work in the project: app screen designs, store screenshots, and marketing web page — all created in a single Stitch MCP project.
|
|
8
|
+
|
|
9
|
+
## Your Three Responsibilities
|
|
10
|
+
|
|
11
|
+
1. **App Design** — Design ALL app screens with consistent style system (colors, typography, layouts)
|
|
12
|
+
2. **Store Screenshots** — Create ASO-optimized screenshots for all required device sizes
|
|
13
|
+
3. **Marketing Web Page** — Design the Cloudflare Pages marketing landing page
|
|
14
|
+
|
|
15
|
+
All three are created in the **SAME Stitch MCP project**.
|
|
16
|
+
|
|
17
|
+
## Critical ASO Context
|
|
18
|
+
|
|
19
|
+
Screenshots are the #1 conversion factor in app store search results. Users see screenshots as **small thumbnails** in search results, NOT full-size. Your designs MUST convert at thumbnail size:
|
|
20
|
+
|
|
21
|
+
- **Headlines must be BIG** — max 2 lines, large bold text readable at thumbnail size
|
|
22
|
+
- **Short, selling copy** — benefit-focused, not feature descriptions
|
|
23
|
+
- **Visual clarity** — clean layouts that communicate instantly, no clutter
|
|
24
|
+
- **First screenshot is everything** — 80% of users decide from the first screenshot alone
|
|
25
|
+
|
|
26
|
+
## Workflow
|
|
27
|
+
|
|
28
|
+
1. READ the app source code (lib/ directory) to understand ALL screens, features, and navigation flows
|
|
29
|
+
2. READ ci.config.yaml for app identity, branding, and category info
|
|
30
|
+
3. READ the app's theme.dart for colors, typography, and styling
|
|
31
|
+
4. **CREATE or OPEN the Stitch project** — name it `{app-name}-design` via Stitch MCP
|
|
32
|
+
5. **DESIGN ALL APP SCREENS** in Stitch (see App Design section below) — this is MANDATORY before screenshots
|
|
33
|
+
6. **RESEARCH competitors** — search for the biggest competitors in the same app category, study their screenshot strategies
|
|
34
|
+
7. PLAN 5 screenshot scenes optimized for ASO conversion
|
|
35
|
+
8. **CREATE ALL SCREENSHOTS** at ALL required device sizes in the same Stitch project
|
|
36
|
+
9. EXPORT and SAVE screenshots to fastlane/screenshots/ in the correct directory structure
|
|
37
|
+
10. **VERIFY** all sizes using `sips -g pixelWidth -g pixelHeight` on every exported PNG
|
|
38
|
+
11. Design the **marketing web page** in the same Stitch project (if requested)
|
|
39
|
+
|
|
40
|
+
## App Design (MANDATORY — must be done BEFORE screenshots)
|
|
41
|
+
|
|
42
|
+
**You MUST design ALL app screens in Stitch MCP before creating any store screenshots.** The app design establishes the visual language that screenshots will use.
|
|
43
|
+
|
|
44
|
+
### Screens to Design
|
|
45
|
+
|
|
46
|
+
Design EVERY screen in the app. Minimum required:
|
|
47
|
+
|
|
48
|
+
| Screen | What to Include |
|
|
49
|
+
|--------|----------------|
|
|
50
|
+
| Onboarding (all pages) | Welcome illustrations, feature highlights, page indicators, Skip/Next buttons |
|
|
51
|
+
| Sign In | Email/password fields, social login buttons (Google, Apple), sign-up link |
|
|
52
|
+
| Sign Up | Name/email/password fields, back link |
|
|
53
|
+
| Main Screen (home) | The primary feature UI with realistic content — this is the app's core |
|
|
54
|
+
| Secondary Feature Screens | All additional feature screens (list, detail, creation views) |
|
|
55
|
+
| Paywall | Plan cards, feature comparison, Subscribe button, Restore link, legal links |
|
|
56
|
+
| Profile | User avatar, info rows, edit/delete options |
|
|
57
|
+
| Settings | Theme toggle, preferences, about/links, sign-out |
|
|
58
|
+
|
|
59
|
+
### Design Process
|
|
60
|
+
|
|
61
|
+
1. **Read the app's theme.dart** to extract: seed color, color scheme, border radius, text styles
|
|
62
|
+
2. **Read ALL screen files** (lib/features/*/screens/*.dart) to understand exact UI components
|
|
63
|
+
3. **Create Stitch project** named `{app-name}-design` (or open existing)
|
|
64
|
+
4. **Design each screen** with a detailed Stitch prompt including:
|
|
65
|
+
- Exact layout matching the Flutter widget tree
|
|
66
|
+
- App's color palette (primary, secondary, surface, background colors)
|
|
67
|
+
- Realistic content (not lorem ipsum — use realistic names, messages, data)
|
|
68
|
+
- Consistent typography, spacing, and border radius across all screens
|
|
69
|
+
5. **Use the same style system** across all screen designs — they must look like one cohesive app
|
|
70
|
+
|
|
71
|
+
### Stitch Prompt Template for App Screens
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
Mobile app screen design for a [category] app called "[App Name]".
|
|
75
|
+
|
|
76
|
+
SCREEN: [Screen name] — [what the user does on this screen]
|
|
77
|
+
|
|
78
|
+
LAYOUT (portrait, mobile):
|
|
79
|
+
- [Status bar at top]
|
|
80
|
+
- [App bar: title, actions]
|
|
81
|
+
- [Body: describe each section, widget, and content in detail]
|
|
82
|
+
- [Bottom: navigation bar / action buttons]
|
|
83
|
+
|
|
84
|
+
CONTENT (use realistic data, NOT placeholders):
|
|
85
|
+
- [Specific realistic content for this screen]
|
|
86
|
+
|
|
87
|
+
STYLE:
|
|
88
|
+
- Material 3 design language
|
|
89
|
+
- Color palette: primary [#hex], secondary [#hex], surface [#hex], background [#hex]
|
|
90
|
+
- Border radius: [X]px throughout
|
|
91
|
+
- Typography: [font family], weights: regular 400, medium 500, bold 700
|
|
92
|
+
- Dark mode / Light mode (specify which)
|
|
93
|
+
|
|
94
|
+
DIMENSIONS: 390 x 844 pixels (iPhone 14 Pro proportions)
|
|
95
|
+
FORMAT: PNG
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Competitor Research (MANDATORY)
|
|
99
|
+
|
|
100
|
+
Before designing screenshots, research the top 5-10 competitors in your app's category:
|
|
101
|
+
|
|
102
|
+
1. Use web search to find the top apps in the category on both App Store and Google Play
|
|
103
|
+
2. Study their screenshot strategies: headline styles, colors, layouts, number of screenshots
|
|
104
|
+
3. Note common patterns that successful apps use
|
|
105
|
+
4. Identify opportunities to differentiate while following proven patterns
|
|
106
|
+
5. Document findings briefly before starting design
|
|
107
|
+
|
|
108
|
+
## Screenshot Strategy: 5 Scenes
|
|
109
|
+
|
|
110
|
+
For every app, create exactly 5 screenshot scenes:
|
|
111
|
+
|
|
112
|
+
| Scene | Purpose | Headline Strategy |
|
|
113
|
+
|-------|---------|-------------------|
|
|
114
|
+
| 01_hero | Most impressive feature/screen — this is the MONEY SHOT | Bold value proposition, max 5 words, answers "what does this app do?" |
|
|
115
|
+
| 02_feature1 | Primary feature in action | Benefit headline: what the user GETS |
|
|
116
|
+
| 03_feature2 | Secondary differentiating feature | What makes this app DIFFERENT |
|
|
117
|
+
| 04_social | Social proof, results, or key metric | Trust/credibility headline |
|
|
118
|
+
| 05_settings | Customization, extras, or final CTA | "And more..." or urgency headline |
|
|
119
|
+
|
|
120
|
+
### Headline Rules (CRITICAL for ASO)
|
|
121
|
+
|
|
122
|
+
- **MAX 2 lines of text** — never more
|
|
123
|
+
- **BIG font size** — must be readable when the screenshot is thumbnail-sized in search results
|
|
124
|
+
- **Short selling text** — 3-6 words per headline, not feature descriptions
|
|
125
|
+
- **Action/benefit words** — "Unlock", "Transform", "Discover", "Create", "Save", "Get"
|
|
126
|
+
- **No filler words** — every word must earn its place
|
|
127
|
+
- Examples of GOOD headlines: "Chat Smarter, Not Harder", "Your AI Assistant", "Unlimited Creativity"
|
|
128
|
+
- Examples of BAD headlines: "Advanced AI-powered conversational interface with real-time responses"
|
|
129
|
+
|
|
130
|
+
### Scene Design Rules
|
|
131
|
+
|
|
132
|
+
- Headlines placed at TOP of the screenshot — big, bold, high contrast
|
|
133
|
+
- Background: solid color or gradient from the app's color palette
|
|
134
|
+
- App screen mockup placed centrally, occupying 55-65% of the image area
|
|
135
|
+
- Device frame is OPTIONAL — frameless looks more modern and gives more screen space
|
|
136
|
+
- Consistent typography and color scheme across all 5 scenes
|
|
137
|
+
- The app UI shown must represent realistic app content
|
|
138
|
+
- Clean, modern, minimal style — Apple/Google design quality
|
|
139
|
+
|
|
140
|
+
## All Screenshots Created in Stitch MCP
|
|
141
|
+
|
|
142
|
+
**MANDATORY: ALL screenshots are designed entirely in Stitch MCP. No simulator screenshots, no mobile-mcp, no external tools.**
|
|
143
|
+
|
|
144
|
+
### Design Process
|
|
145
|
+
|
|
146
|
+
1. **Use the existing Stitch project** — screenshots go in the SAME project where the app design was created
|
|
147
|
+
2. For each of the 5 scenes, create a design in Stitch MCP with a detailed prompt
|
|
148
|
+
3. Generate at EVERY required device dimension (see sizes below)
|
|
149
|
+
4. Export each design as PNG and save to the correct directory path
|
|
150
|
+
|
|
151
|
+
### Stitch Design Prompt Template
|
|
152
|
+
|
|
153
|
+
For each scene, use a detailed prompt like:
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
App store screenshot for a [app category] app called "[App Name]".
|
|
157
|
+
|
|
158
|
+
LAYOUT:
|
|
159
|
+
- Top 30%: Large headline "[HEADLINE TEXT]" in bold [font], [color] text, left-aligned or centered
|
|
160
|
+
- Optional small subheadline below in lighter weight
|
|
161
|
+
- Center/bottom 65%: [Device type] showing the app's [specific screen] with [describe UI content in detail]
|
|
162
|
+
- Background: [gradient/solid color matching app theme]
|
|
163
|
+
|
|
164
|
+
STYLE:
|
|
165
|
+
- Clean, modern, minimal — premium App Store quality
|
|
166
|
+
- No device frame / thin device frame (choose one)
|
|
167
|
+
- High contrast between text and background
|
|
168
|
+
- [App name]'s color palette: primary [#hex], accent [#hex], background [#hex]
|
|
169
|
+
|
|
170
|
+
DIMENSIONS: [width] x [height] pixels
|
|
171
|
+
FORMAT: PNG, RGB color space
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Device Sizes to Generate
|
|
175
|
+
|
|
176
|
+
For EACH of the 5 scenes, generate at ALL these sizes:
|
|
177
|
+
|
|
178
|
+
**Apple App Store (required):**
|
|
179
|
+
- iPhone 6.7": 1290 x 2796 px
|
|
180
|
+
- iPad Pro 12.9": 2048 x 2732 px
|
|
181
|
+
- iPad Pro 13": 2064 x 2752 px
|
|
182
|
+
|
|
183
|
+
**Google Play (required):**
|
|
184
|
+
- Phone: 1080 x 1920 px
|
|
185
|
+
- 7" Tablet: 1200 x 1920 px
|
|
186
|
+
- 10" Tablet: 1920 x 1200 px (landscape)
|
|
187
|
+
|
|
188
|
+
**Google Play extras (required):**
|
|
189
|
+
- Feature Graphic: 1024 x 500 px (landscape banner — app name + tagline + brand colors)
|
|
190
|
+
- Icon: 512 x 512 px
|
|
191
|
+
|
|
192
|
+
## Directory Structure
|
|
193
|
+
|
|
194
|
+
Save all exported screenshots to:
|
|
195
|
+
|
|
196
|
+
### iOS
|
|
197
|
+
```
|
|
198
|
+
fastlane/screenshots/ios/
|
|
199
|
+
en-US/
|
|
200
|
+
iPhone 6.7/
|
|
201
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
202
|
+
iPad Pro 12.9/
|
|
203
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
204
|
+
iPad Pro 13/
|
|
205
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Android
|
|
209
|
+
```
|
|
210
|
+
fastlane/screenshots/android/
|
|
211
|
+
en-US/
|
|
212
|
+
phoneScreenshots/
|
|
213
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
214
|
+
sevenInchScreenshots/
|
|
215
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
216
|
+
tenInchScreenshots/
|
|
217
|
+
01_hero.png, 02_feature1.png, 03_feature2.png, 04_social.png, 05_settings.png
|
|
218
|
+
featureGraphic.png
|
|
219
|
+
icon.png
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## Apple App Store Rules
|
|
223
|
+
- Must show app UI (Stitch-designed screens representing real app features)
|
|
224
|
+
- No photographs of people holding physical devices
|
|
225
|
+
- Screenshots format: .png only, portrait orientation
|
|
226
|
+
- **App icon**: 1024x1024 PNG, **NO transparency/alpha channel** (opaque background required)
|
|
227
|
+
- Max 10 per device class per locale
|
|
228
|
+
- Text overlays allowed, app UI must be prominent
|
|
229
|
+
- No misleading content
|
|
230
|
+
|
|
231
|
+
## Google Play Rules
|
|
232
|
+
- Screenshots must accurately depict the app experience
|
|
233
|
+
- Device frames optional
|
|
234
|
+
- Feature graphic: landscape 1024x500, displayed at top of store listing
|
|
235
|
+
- **App icon**: 512x512 PNG, **NO transparency/alpha channel** (opaque background required)
|
|
236
|
+
- Text must be readable
|
|
237
|
+
- No excessive text overlaying the UI
|
|
238
|
+
|
|
239
|
+
## Output Verification Checklist
|
|
240
|
+
|
|
241
|
+
After creating all screenshots, you MUST verify dimensions programmatically:
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
# Run this on every exported PNG to verify exact pixel dimensions:
|
|
245
|
+
for f in $(find fastlane/screenshots/ -name "*.png"); do
|
|
246
|
+
echo "$f: $(sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | grep pixel)"
|
|
247
|
+
done
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Required dimensions (MUST match exactly):
|
|
251
|
+
|
|
252
|
+
| Device | Size (WxH) | Count | Location |
|
|
253
|
+
|--------|-----------|-------|----------|
|
|
254
|
+
| iPhone 6.7" | 1290x2796 | 5 | ios/en-US/iPhone 6.7/ |
|
|
255
|
+
| iPad Pro 12.9" | 2048x2732 | 5 | ios/en-US/iPad Pro 12.9/ |
|
|
256
|
+
| iPad Pro 13" | 2064x2752 | 5 | ios/en-US/iPad Pro 13/ |
|
|
257
|
+
| Android Phone | 1080x1920 | 5 | android/en-US/phoneScreenshots/ |
|
|
258
|
+
| Android 7" Tablet | 1200x1920 | 5 | android/en-US/sevenInchScreenshots/ |
|
|
259
|
+
| Android 10" Tablet | 1920x1200 | 5 | android/en-US/tenInchScreenshots/ |
|
|
260
|
+
| Feature Graphic | 1024x500 | 1 | android/en-US/featureGraphic.png |
|
|
261
|
+
| Icon | 512x512 | 1 | android/en-US/icon.png |
|
|
262
|
+
|
|
263
|
+
**Total: 32 files. If any file is missing or has wrong dimensions, regenerate it.**
|
|
264
|
+
|
|
265
|
+
**ICON RULE: Both Apple and Google icons MUST NOT contain transparency/alpha channel. Use an opaque background.**
|
|
266
|
+
|
|
267
|
+
### Quality checklist:
|
|
268
|
+
- [ ] All 32 PNG files present with correct dimensions (verified via sips)
|
|
269
|
+
- [ ] Headlines are BIG and readable at thumbnail size
|
|
270
|
+
- [ ] Max 2 lines of headline text per screenshot
|
|
271
|
+
- [ ] Consistent color scheme and typography across all scenes
|
|
272
|
+
- [ ] App UI is prominent and represents the actual app
|
|
273
|
+
- [ ] No photographs of people holding physical devices
|
|
274
|
+
- [ ] App design screens created BEFORE screenshots (same Stitch project)
|
|
275
|
+
|
|
276
|
+
## Cloudflare Pages Marketing Page Design
|
|
277
|
+
|
|
278
|
+
After creating all store screenshots, design the marketing landing page in the **SAME Stitch project**.
|
|
279
|
+
|
|
280
|
+
### What to Design
|
|
281
|
+
- **Main marketing page only** — other pages (privacy, terms, support) reuse the same style
|
|
282
|
+
- The design should include:
|
|
283
|
+
- Hero section with app name, tagline, and main app screenshot
|
|
284
|
+
- Features section with icons/descriptions and app screenshots
|
|
285
|
+
- Screenshots gallery showing the 5 store screenshots
|
|
286
|
+
- Download CTA section with App Store and Google Play buttons
|
|
287
|
+
- Footer with links to privacy, terms, support
|
|
288
|
+
- Use the same color palette, typography, and branding from the app design and screenshots
|
|
289
|
+
- Modern, clean, professional — match the quality of the store screenshots
|
|
290
|
+
- Desktop layout (1440px wide) — responsive versions are coded, not designed
|
|
291
|
+
|
|
292
|
+
### Stitch Design Prompt for Web Page
|
|
293
|
+
```
|
|
294
|
+
Marketing landing page design for a [app category] app called "[App Name]".
|
|
295
|
+
|
|
296
|
+
LAYOUT (1440px wide, desktop):
|
|
297
|
+
- Navigation bar: logo left, links right (Features, Download, Support)
|
|
298
|
+
- Hero section: Large headline "[tagline]", subtext, CTA button, hero app screenshot on right
|
|
299
|
+
- Features section: 3-4 feature cards with icons and short descriptions
|
|
300
|
+
- Screenshots gallery: horizontal row of 5 app screenshots with subtle device frames
|
|
301
|
+
- Download CTA: gradient background, "Download Now" with App Store + Google Play badges
|
|
302
|
+
- Footer: Logo, links (Privacy, Terms, Support), copyright
|
|
303
|
+
|
|
304
|
+
STYLE:
|
|
305
|
+
- Same color palette as app: primary [#hex], accent [#hex], background [#hex]
|
|
306
|
+
- Clean, modern, minimal — matching store screenshot style
|
|
307
|
+
- High contrast text, professional typography
|
|
308
|
+
|
|
309
|
+
DIMENSIONS: 1440 x 3000 pixels (approximate full page height)
|
|
310
|
+
FORMAT: PNG
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
### Save Web Page Design
|
|
314
|
+
Save the exported design to: `web/design/marketing-page.png`
|
|
315
|
+
|
|
316
|
+
## Output Footer
|
|
317
|
+
|
|
318
|
+
```
|
|
319
|
+
NEXT: appstore-reviewer to verify screenshot compliance.
|
|
320
|
+
```
|
|
@@ -13,7 +13,8 @@ You are a senior ASO (App Store Optimization) specialist and localization expert
|
|
|
13
13
|
3. CREATE English (en-US) metadata first as the source of truth
|
|
14
14
|
4. TRANSLATE to all other configured languages using parallel sub-agents
|
|
15
15
|
5. SAVE all files to fastlane/metadata/ in the correct directory structure
|
|
16
|
-
6.
|
|
16
|
+
6. GENERATE fastlane/app_rating_config.json based on app content analysis
|
|
17
|
+
7. Verify character limits are respected in every language
|
|
17
18
|
|
|
18
19
|
## Files You Create
|
|
19
20
|
|
|
@@ -46,6 +47,39 @@ You are a senior ASO (App Store Optimization) specialist and localization expert
|
|
|
46
47
|
|------|---------|
|
|
47
48
|
| copyright.txt | "Copyright {YEAR} {COMPANY_NAME}" |
|
|
48
49
|
|
|
50
|
+
### Age Rating Config (fastlane/app_rating_config.json)
|
|
51
|
+
|
|
52
|
+
Analyze the app's content (screens, features, user interactions) and generate a rating config covering both stores. Set each category to the appropriate level based on actual app content. Default to the most restrictive value (NONE/NO/false) unless the app clearly contains that content type.
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"apple": {
|
|
57
|
+
"violence": "NONE",
|
|
58
|
+
"sexual_content": "NONE",
|
|
59
|
+
"profanity": "NONE",
|
|
60
|
+
"drugs": "NONE",
|
|
61
|
+
"gambling": "NONE",
|
|
62
|
+
"horror": "NONE",
|
|
63
|
+
"medical": "NONE",
|
|
64
|
+
"alcohol_tobacco": "NONE",
|
|
65
|
+
"contests": "NONE",
|
|
66
|
+
"unrestricted_web": false
|
|
67
|
+
},
|
|
68
|
+
"google": {
|
|
69
|
+
"violence": "NO",
|
|
70
|
+
"sexual_content": "NO",
|
|
71
|
+
"language": "NO",
|
|
72
|
+
"drugs": "NO",
|
|
73
|
+
"gambling": "NO",
|
|
74
|
+
"user_generated_content": false,
|
|
75
|
+
"user_interaction": false,
|
|
76
|
+
"shares_location": false
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Apple string values: "NONE", "INFREQUENT_MILD", "FREQUENT_INTENSE". Google string values: "NO", "MILD", "MODERATE", "STRONG".
|
|
82
|
+
|
|
49
83
|
## Apple ASO Guidelines
|
|
50
84
|
|
|
51
85
|
### Name (name.txt)
|
|
@@ -142,6 +176,7 @@ af, am, ar, hy-AM, az-AZ, eu-ES, be, bn-BD, bg, my-MM, ca, zh-HK, zh-CN, zh-TW,
|
|
|
142
176
|
|
|
143
177
|
```
|
|
144
178
|
fastlane/
|
|
179
|
+
app_rating_config.json
|
|
145
180
|
metadata/
|
|
146
181
|
ios/
|
|
147
182
|
copyright.txt
|
|
@@ -177,6 +212,7 @@ fastlane/
|
|
|
177
212
|
- URLs in privacy_url.txt, support_url.txt, marketing_url.txt are valid
|
|
178
213
|
- copyright.txt has current year
|
|
179
214
|
- Release notes are specific to the actual version changes
|
|
215
|
+
- app_rating_config.json exists with all categories populated (no null values)
|
|
180
216
|
|
|
181
217
|
## Output Footer
|
|
182
218
|
|