appshot-cli 0.3.0 β 0.5.0
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/README.md +1343 -714
- package/dist/cli.js +7 -1
- package/dist/cli.js.map +1 -1
- package/dist/commands/build.d.ts.map +1 -1
- package/dist/commands/build.js +11 -4
- package/dist/commands/build.js.map +1 -1
- package/dist/commands/doctor.d.ts +3 -0
- package/dist/commands/doctor.d.ts.map +1 -0
- package/dist/commands/doctor.js +67 -0
- package/dist/commands/doctor.js.map +1 -0
- package/dist/commands/fonts.d.ts +3 -0
- package/dist/commands/fonts.d.ts.map +1 -0
- package/dist/commands/fonts.js +384 -0
- package/dist/commands/fonts.js.map +1 -0
- package/dist/commands/migrate.d.ts +3 -0
- package/dist/commands/migrate.d.ts.map +1 -0
- package/dist/commands/migrate.js +123 -0
- package/dist/commands/migrate.js.map +1 -0
- package/dist/commands/specs.d.ts.map +1 -1
- package/dist/commands/specs.js +61 -46
- package/dist/commands/specs.js.map +1 -1
- package/dist/commands/style.d.ts.map +1 -1
- package/dist/commands/style.js +92 -1
- package/dist/commands/style.js.map +1 -1
- package/dist/core/app-store-specs.d.ts +2 -0
- package/dist/core/app-store-specs.d.ts.map +1 -1
- package/dist/core/app-store-specs.js +2 -0
- package/dist/core/app-store-specs.js.map +1 -1
- package/dist/core/compose.d.ts +4 -0
- package/dist/core/compose.d.ts.map +1 -1
- package/dist/core/compose.js +102 -9
- package/dist/core/compose.js.map +1 -1
- package/dist/services/doctor.d.ts +35 -0
- package/dist/services/doctor.d.ts.map +1 -0
- package/dist/services/doctor.js +439 -0
- package/dist/services/doctor.js.map +1 -0
- package/dist/services/fonts.d.ts +71 -0
- package/dist/services/fonts.d.ts.map +1 -0
- package/dist/services/fonts.js +314 -0
- package/dist/services/fonts.js.map +1 -0
- package/dist/types/exec.d.ts +5 -0
- package/dist/types/exec.d.ts.map +1 -0
- package/dist/types/exec.js +2 -0
- package/dist/types/exec.js.map +1 -0
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/language.d.ts +32 -0
- package/dist/utils/language.d.ts.map +1 -0
- package/dist/utils/language.js +103 -0
- package/dist/utils/language.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,1013 +1,1642 @@
|
|
|
1
1
|
# Appshot πΈ
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
|
|
5
|
-
Generate beautiful, App Store-ready screenshots with device frames, gradients, and captions.
|
|
3
|
+
> **AI-First CLI for App Store Screenshots** - Generate beautiful, localized screenshots with device frames, gradients, and captions.
|
|
6
4
|
|
|
7
5
|
[](https://github.com/chrisvanbuskirk/appshot/actions/workflows/ci.yml)
|
|
8
6
|
[](https://www.npmjs.com/package/appshot-cli)
|
|
9
7
|
[](https://opensource.org/licenses/MIT)
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
π **Version 0.4.0** - Language-aware output directories, comprehensive font system, and system locale detection!
|
|
10
|
+
|
|
11
|
+
> β οΈ **BREAKING CHANGE in v0.4.0**: Output structure now always uses language subdirectories.
|
|
12
|
+
> Single language builds now output to `final/device/lang/` instead of `final/device/`.
|
|
13
|
+
> Run `appshot migrate --output-structure` to update existing projects.
|
|
14
|
+
|
|
15
|
+
## π Table of Contents
|
|
16
|
+
|
|
17
|
+
- [Why Appshot?](#-why-appshot)
|
|
18
|
+
- [Features](#-features)
|
|
19
|
+
- [Quick Start](#-quick-start)
|
|
20
|
+
- [Prerequisites](#prerequisites)
|
|
21
|
+
- [Installation](#installation)
|
|
22
|
+
- [Your First Screenshot](#your-first-screenshot)
|
|
23
|
+
- [Core Concepts](#-core-concepts)
|
|
24
|
+
- [Visual Customization](#-visual-customization)
|
|
25
|
+
- [Gradient System](#gradient-system)
|
|
26
|
+
- [Font System](#font-system)
|
|
27
|
+
- [Device Frames](#device-frames)
|
|
28
|
+
- [Caption System](#caption-system)
|
|
29
|
+
- [Localization & Translation](#-localization--translation)
|
|
30
|
+
- [Device Support](#-device-support)
|
|
31
|
+
- [Command Reference](#-command-reference)
|
|
32
|
+
- [Configuration Reference](#οΈ-configuration-reference)
|
|
33
|
+
- [Agent & Automation Guide](#-agent--automation-guide)
|
|
34
|
+
- [Recipes & Examples](#-recipes--examples)
|
|
35
|
+
- [Troubleshooting](#-troubleshooting)
|
|
36
|
+
- [Development](#-development)
|
|
37
|
+
- [Roadmap](#-roadmap)
|
|
38
|
+
- [License & Support](#-license--support)
|
|
39
|
+
|
|
40
|
+
## π Why Appshot?
|
|
41
|
+
|
|
42
|
+
Appshot is the only **agent-first CLI tool** designed for automated App Store screenshot generation. Built for LLM agents, CI/CD pipelines, and developers who value automation over GUIs.
|
|
43
|
+
|
|
44
|
+
### Key Differentiators
|
|
45
|
+
|
|
46
|
+
- π€ **Agent-First Design** - JSON outputs, predictable commands, no interactive prompts in automation mode
|
|
47
|
+
- π― **Smart Automation** - Auto-detects orientation, selects appropriate frames, handles batch operations
|
|
48
|
+
- π **AI-Powered Localization** - Translate captions in real-time using GPT-4o, GPT-5, o1, and o3 models
|
|
49
|
+
- π **App Store Compliant** - Built-in validation for all official Apple App Store specifications
|
|
50
|
+
- β‘ **Fast & Parallel** - Process hundreds of screenshots with configurable concurrency
|
|
51
|
+
- π οΈ **Pure CLI** - No web UI, no GUI, just predictable commands perfect for automation
|
|
52
|
+
|
|
53
|
+
## β¨ Features
|
|
12
54
|
|
|
13
55
|
- πΌοΈ **Smart Frames** - Automatically detects portrait/landscape and selects appropriate device frame
|
|
14
|
-
- π¨ **
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
- π **Orientation Detection** - Intelligently handles both portrait and landscape
|
|
21
|
-
- β‘ **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
56
|
+
- π¨ **Gradient Presets** - 24+ beautiful gradients with visual preview and easy application
|
|
57
|
+
- π€ **Font System** - 50+ font mappings, direct font setting, interactive selection, and system detection
|
|
58
|
+
- βοΈ **Dynamic Captions** - Smart text wrapping, auto-sizing, and multi-line support
|
|
59
|
+
- π **AI Translation** - Real-time and batch translation using OpenAI's latest models
|
|
60
|
+
- π± **Multi-Device** - iPhone, iPad, Mac, Apple TV, Vision Pro, and Apple Watch support
|
|
61
|
+
- π **App Store Specs** - All official resolutions with validation and presets
|
|
62
|
+
- π **Orientation Detection** - Intelligently handles both portrait and landscape
|
|
63
|
+
- β‘ **Parallel Processing** - Configurable concurrency for large batches
|
|
64
|
+
- π **Caption Autocomplete** - Intelligent suggestions with fuzzy search and learning
|
|
65
|
+
|
|
66
|
+
## π Quick Start
|
|
67
|
+
|
|
68
|
+
### Prerequisites
|
|
69
|
+
|
|
70
|
+
- **Node.js 16+** - Required for ESM modules
|
|
71
|
+
- **npm** or **yarn** - Package manager
|
|
72
|
+
- **Operating System** - macOS, Linux, or Windows
|
|
73
|
+
- **Optional**: OpenAI API key for translation features
|
|
26
74
|
|
|
27
75
|
### Installation
|
|
28
76
|
|
|
29
77
|
```bash
|
|
78
|
+
# Install globally via npm
|
|
30
79
|
npm install -g appshot-cli
|
|
80
|
+
|
|
81
|
+
# Or with yarn
|
|
82
|
+
yarn global add appshot-cli
|
|
83
|
+
|
|
84
|
+
# Verify installation
|
|
85
|
+
appshot --version
|
|
31
86
|
```
|
|
32
87
|
|
|
33
|
-
> **Note**: The package is called `appshot-cli` on NPM, but the command is
|
|
88
|
+
> **Note**: The package is called `appshot-cli` on NPM, but the command is `appshot`
|
|
34
89
|
|
|
35
|
-
###
|
|
90
|
+
### Your First Screenshot
|
|
91
|
+
|
|
92
|
+
Create App Store-ready screenshots in 5 simple steps:
|
|
36
93
|
|
|
37
94
|
```bash
|
|
95
|
+
# 1. Initialize your project
|
|
38
96
|
appshot init
|
|
39
|
-
```
|
|
40
97
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
- `.appshot/captions/` - Device-specific caption files
|
|
44
|
-
- `screenshots/` - Directory structure for your screenshots
|
|
98
|
+
# 2. Add your screenshots
|
|
99
|
+
cp ~/Desktop/screenshots/*.png screenshots/iphone/
|
|
45
100
|
|
|
46
|
-
|
|
101
|
+
# 3. Add captions interactively
|
|
102
|
+
appshot caption --device iphone
|
|
47
103
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
βββ mac/
|
|
54
|
-
βββ watch/
|
|
55
|
-
```
|
|
104
|
+
# 4. Apply a gradient preset
|
|
105
|
+
appshot gradients --apply ocean
|
|
106
|
+
|
|
107
|
+
# 5. Build final screenshots
|
|
108
|
+
appshot build
|
|
56
109
|
|
|
57
|
-
|
|
110
|
+
# β¨ Output ready in final/ directory!
|
|
111
|
+
```
|
|
58
112
|
|
|
59
|
-
|
|
113
|
+
### Example Output Structure
|
|
60
114
|
|
|
61
|
-
```
|
|
62
|
-
|
|
115
|
+
```
|
|
116
|
+
final/
|
|
117
|
+
βββ iphone/
|
|
118
|
+
β βββ en/ # Language subdirectory (always created)
|
|
119
|
+
β βββ home.png # 1284Γ2778 with frame, gradient, and caption
|
|
120
|
+
β βββ features.png
|
|
121
|
+
β βββ settings.png
|
|
122
|
+
βββ ipad/
|
|
123
|
+
βββ en/ # Language subdirectory
|
|
124
|
+
βββ dashboard.png # 2048Γ2732 iPad Pro screenshot
|
|
63
125
|
```
|
|
64
126
|
|
|
65
|
-
|
|
66
|
-
- π **Autocomplete** - Smart suggestions as you type
|
|
67
|
-
- π **Frequency tracking** - Most-used captions appear first
|
|
68
|
-
- π― **Device-specific** - Suggestions tailored to device type
|
|
69
|
-
- β¨οΈ **Keyboard shortcuts** - Tab to complete, arrows to navigate
|
|
127
|
+
## π Core Concepts
|
|
70
128
|
|
|
71
|
-
###
|
|
129
|
+
### Project Structure
|
|
72
130
|
|
|
73
|
-
|
|
131
|
+
Appshot uses a simple, predictable directory structure:
|
|
74
132
|
|
|
75
|
-
```
|
|
76
|
-
|
|
133
|
+
```
|
|
134
|
+
your-project/
|
|
135
|
+
βββ .appshot/
|
|
136
|
+
β βββ config.json # Main configuration
|
|
137
|
+
β βββ captions/ # Device-specific captions
|
|
138
|
+
β β βββ iphone.json
|
|
139
|
+
β β βββ ipad.json
|
|
140
|
+
β βββ caption-history.json # Autocomplete history
|
|
141
|
+
βββ screenshots/ # Original screenshots
|
|
142
|
+
β βββ iphone/
|
|
143
|
+
β βββ ipad/
|
|
144
|
+
β βββ mac/
|
|
145
|
+
βββ frames/ # Device frames (auto-downloaded)
|
|
146
|
+
βββ final/ # Generated output
|
|
77
147
|
```
|
|
78
148
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
## Configuration
|
|
149
|
+
### Configuration Overview
|
|
82
150
|
|
|
83
|
-
|
|
151
|
+
All settings are stored in `.appshot/config.json`:
|
|
84
152
|
|
|
85
153
|
```json
|
|
86
154
|
{
|
|
87
155
|
"output": "./final",
|
|
88
|
-
"frames": "./frames",
|
|
89
156
|
"gradient": {
|
|
90
|
-
"colors": ["#
|
|
91
|
-
"direction": "
|
|
157
|
+
"colors": ["#0077BE", "#33CCCC"],
|
|
158
|
+
"direction": "diagonal"
|
|
92
159
|
},
|
|
93
160
|
"caption": {
|
|
94
161
|
"font": "SF Pro",
|
|
95
162
|
"fontsize": 64,
|
|
96
163
|
"color": "#FFFFFF",
|
|
97
|
-
"
|
|
98
|
-
"paddingTop": 100
|
|
164
|
+
"position": "above"
|
|
99
165
|
},
|
|
100
166
|
"devices": {
|
|
101
167
|
"iphone": {
|
|
102
|
-
"input": "./screenshots/iphone",
|
|
103
168
|
"resolution": "1284x2778",
|
|
104
|
-
"autoFrame": true
|
|
105
|
-
"preferredFrame": "iphone-15-pro-max"
|
|
169
|
+
"autoFrame": true
|
|
106
170
|
}
|
|
107
171
|
}
|
|
108
172
|
}
|
|
109
173
|
```
|
|
110
174
|
|
|
111
|
-
###
|
|
175
|
+
### Workflow
|
|
176
|
+
|
|
177
|
+
1. **Capture** - Take screenshots from simulator/device or design tool
|
|
178
|
+
2. **Configure** - Set up gradients, fonts, and device settings
|
|
179
|
+
3. **Caption** - Add marketing text with optional AI translation
|
|
180
|
+
4. **Build** - Generate final App Store-ready screenshots
|
|
181
|
+
5. **Validate** - Ensure compliance with App Store requirements
|
|
112
182
|
|
|
113
|
-
|
|
114
|
-
- **direction**: `top-bottom`, `bottom-top`, `left-right`, `right-left`, `diagonal`
|
|
183
|
+
## π¨ Visual Customization
|
|
115
184
|
|
|
116
|
-
|
|
185
|
+
### Gradient System
|
|
117
186
|
|
|
118
|
-
|
|
187
|
+
Appshot includes 24+ professional gradient presets organized by category:
|
|
188
|
+
|
|
189
|
+
#### Browse & Apply Gradients
|
|
119
190
|
|
|
120
191
|
```bash
|
|
121
|
-
#
|
|
192
|
+
# View all gradients with color preview
|
|
122
193
|
appshot gradients
|
|
123
194
|
|
|
124
|
-
# Apply a
|
|
195
|
+
# Apply a gradient to your project
|
|
125
196
|
appshot gradients --apply sunset
|
|
126
197
|
|
|
127
|
-
# Interactive selection
|
|
198
|
+
# Interactive selection
|
|
128
199
|
appshot gradients select
|
|
129
200
|
|
|
130
201
|
# Generate preview image
|
|
131
202
|
appshot gradients --preview ocean
|
|
132
203
|
|
|
133
|
-
# Create
|
|
204
|
+
# Create sample gallery
|
|
134
205
|
appshot gradients --sample
|
|
135
206
|
```
|
|
136
207
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
**Warm Gradients** π₯
|
|
140
|
-
- **sunset** - Warm orange to pink (#FF5733 β #FFC300)
|
|
141
|
-
- **autumn** - Fall foliage colors (#D2691E β #FF4500)
|
|
142
|
-
- **golden** - Rich golden tones (#FFD700 β #FFA500)
|
|
143
|
-
- **coral** - Soft coral reef (#FF6B6B β #FFE66D)
|
|
144
|
-
|
|
145
|
-
**Cool Gradients** βοΈ
|
|
146
|
-
- **ocean** - Deep blue waves (#0077BE β #33CCCC)
|
|
147
|
-
- **arctic** - Icy blue frost (#E0F7FA β #81D4FA)
|
|
148
|
-
- **mint** - Fresh mint green (#00C9A7 β #00F5FF)
|
|
149
|
-
- **twilight** - Evening sky (#667EEA β #764BA2)
|
|
150
|
-
|
|
151
|
-
**Vibrant Gradients** π¨
|
|
152
|
-
- **neon** - Electric glow (#FF006E β #8338EC β #3A86FF)
|
|
153
|
-
- **tropical** - Paradise colors (#FE6B8B β #FF8E53)
|
|
154
|
-
- **rainbow** - Full spectrum (#FF0000 β #FF7F00 β #FFFF00 β #00FF00 β #0000FF β #8B00FF)
|
|
155
|
-
- **vivid** - Bold and bright (#F72585 β #7209B7 β #3A0CA3)
|
|
156
|
-
|
|
157
|
-
**Subtle Gradients** ποΈ
|
|
158
|
-
- **pastel** - Soft blend (#E8D8F5 β #D6E6FF)
|
|
159
|
-
- **lavender** - Gentle purple (#E6E6FA β #DDA0DD)
|
|
160
|
-
- **peach** - Soft peach tones (#FFDAB9 β #FFE4E1)
|
|
161
|
-
- **sky** - Clear day (#87CEEB β #E0F6FF)
|
|
162
|
-
|
|
163
|
-
**Monochrome Gradients** β«βͺ
|
|
164
|
-
- **noir** - Deep black (#000000 β #434343)
|
|
165
|
-
- **silver** - Metallic shine (#C0C0C0 β #F5F5F5)
|
|
166
|
-
- **charcoal** - Dark grey (#36454F β #708090)
|
|
167
|
-
- **pearl** - Soft white (#F8F8FF β #FFFFFF)
|
|
168
|
-
|
|
169
|
-
**Brand-Inspired Gradients** π’
|
|
170
|
-
- **instagram** - Brand colors (#833AB4 β #FD1D1D β #FCB045)
|
|
171
|
-
- **spotify** - Green energy (#1DB954 β #191414)
|
|
172
|
-
- **twitter** - Blue bird (#1DA1F2 β #14171A)
|
|
173
|
-
- **slack** - Workspace hues (#4A154B β #36C5F0 β #2EB67D)
|
|
174
|
-
|
|
175
|
-
### Caption Options
|
|
176
|
-
|
|
177
|
-
- **font**: Font family name
|
|
178
|
-
- **fontsize**: Size in pixels
|
|
179
|
-
- **color**: Hex color code
|
|
180
|
-
- **align**: `left`, `center`, `right`
|
|
181
|
-
- **paddingTop**: Space from top in pixels
|
|
182
|
-
- **paddingBottom**: Space from bottom in pixels
|
|
183
|
-
- **position**: `above` (above device frame) or `overlay` (on gradient)
|
|
184
|
-
- **box**: Caption box configuration (see Dynamic Caption Box section)
|
|
185
|
-
|
|
186
|
-
### Device Options
|
|
187
|
-
|
|
188
|
-
- **input**: Directory containing screenshots
|
|
189
|
-
- **resolution**: Output resolution (use App Store specs or custom)
|
|
190
|
-
- **autoFrame**: Enable automatic frame selection based on screenshot orientation (default: true)
|
|
191
|
-
- **preferredFrame**: Preferred frame name from the registry (optional)
|
|
192
|
-
- **partialFrame**: Cut off bottom portion of frame for dynamic look (default: false)
|
|
193
|
-
- **frameOffset**: Percentage to cut off when partialFrame is true (default: 25)
|
|
194
|
-
|
|
195
|
-
## Commands
|
|
196
|
-
|
|
197
|
-
### `appshot init`
|
|
198
|
-
Initialize a new appshot project with scaffolding.
|
|
208
|
+
#### Gradient Categories
|
|
199
209
|
|
|
200
|
-
|
|
201
|
-
-
|
|
210
|
+
- **π₯ Warm**: sunset, autumn, golden, coral
|
|
211
|
+
- **βοΈ Cool**: ocean, arctic, mint, twilight
|
|
212
|
+
- **π¨ Vibrant**: neon, tropical, rainbow, vivid
|
|
213
|
+
- **ποΈ Subtle**: pastel, lavender, peach, sky
|
|
214
|
+
- **β«βͺ Monochrome**: noir, silver, charcoal, pearl
|
|
215
|
+
- **π’ Brand**: instagram, spotify, twitter, slack
|
|
202
216
|
|
|
203
|
-
|
|
204
|
-
Interactively add or edit captions for screenshots with intelligent autocomplete and AI-powered translation.
|
|
217
|
+
#### Custom Gradients
|
|
205
218
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
219
|
+
```json
|
|
220
|
+
{
|
|
221
|
+
"gradient": {
|
|
222
|
+
"colors": ["#FF5733", "#FFC300", "#FF1493"],
|
|
223
|
+
"direction": "diagonal" // top-bottom, left-right, diagonal
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
```
|
|
213
227
|
|
|
214
|
-
|
|
215
|
-
- `--device <name>` - Device name (required)
|
|
216
|
-
- `--lang <code>` - Primary language code (default: en)
|
|
217
|
-
- `--translate` - Enable AI-powered real-time translation
|
|
218
|
-
- `--langs <codes>` - Target languages for translation (comma-separated)
|
|
219
|
-
- `--model <name>` - OpenAI model to use (default: gpt-4o-mini)
|
|
228
|
+
### Font System
|
|
220
229
|
|
|
221
|
-
|
|
222
|
-
```bash
|
|
223
|
-
# Add captions with instant translation to Spanish and French
|
|
224
|
-
appshot caption --device iphone --translate --langs es,fr
|
|
230
|
+
Version 0.4.0 introduces comprehensive font management with intelligent fallbacks.
|
|
225
231
|
|
|
226
|
-
|
|
227
|
-
appshot caption --device iphone --translate --langs zh-CN,ja --model gpt-5
|
|
228
|
-
```
|
|
232
|
+
#### Font Commands
|
|
229
233
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
- **Enter** - Select current suggestion
|
|
234
|
-
- **Esc** - Dismiss suggestions
|
|
234
|
+
```bash
|
|
235
|
+
# Browse recommended fonts
|
|
236
|
+
appshot fonts
|
|
235
237
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
Options:
|
|
240
|
-
- `--list` - List all available gradient presets (default)
|
|
241
|
-
- `--category <name>` - Filter by category (warm, cool, vibrant, subtle, monochrome, brand)
|
|
242
|
-
- `--preview <id>` - Generate preview image for a specific gradient
|
|
243
|
-
- `--sample` - Generate sample images for all gradients with HTML preview
|
|
244
|
-
- `--apply <id>` - Apply gradient preset to current project
|
|
245
|
-
|
|
246
|
-
Subcommands:
|
|
247
|
-
- `select` - Interactive gradient selection with visual preview
|
|
248
|
-
|
|
249
|
-
Features:
|
|
250
|
-
- **24+ Beautiful Presets** - Curated collection of professional gradients
|
|
251
|
-
- **6 Categories** - Warm, Cool, Vibrant, Subtle, Monochrome, Brand-inspired
|
|
252
|
-
- **Visual Preview** - See color blocks in terminal with ANSI approximation
|
|
253
|
-
- **Sample Generation** - Create PNG samples of all gradients
|
|
254
|
-
- **HTML Preview Page** - Browse all gradients in your browser
|
|
255
|
-
- **Quick Apply** - Instantly update project configuration
|
|
256
|
-
- **Direction Support** - All gradient directions (top-bottom, diagonal, etc.)
|
|
257
|
-
|
|
258
|
-
Example usage:
|
|
259
|
-
```bash
|
|
260
|
-
# Browse all gradients with color previews
|
|
261
|
-
appshot gradients
|
|
238
|
+
# Set font directly (NEW in v0.4.0)
|
|
239
|
+
appshot fonts --set "Montserrat"
|
|
262
240
|
|
|
263
|
-
#
|
|
264
|
-
appshot
|
|
241
|
+
# Interactive font selection (NEW in v0.4.0)
|
|
242
|
+
appshot fonts --select
|
|
265
243
|
|
|
266
|
-
#
|
|
267
|
-
appshot
|
|
244
|
+
# Set device-specific font (NEW in v0.4.0)
|
|
245
|
+
appshot fonts --set "SF Pro" --device iphone
|
|
268
246
|
|
|
269
|
-
#
|
|
270
|
-
appshot
|
|
247
|
+
# List ALL system fonts
|
|
248
|
+
appshot fonts --all
|
|
271
249
|
|
|
272
|
-
#
|
|
273
|
-
appshot
|
|
250
|
+
# Validate a font
|
|
251
|
+
appshot fonts --validate "SF Pro"
|
|
274
252
|
|
|
275
|
-
#
|
|
276
|
-
appshot
|
|
277
|
-
# Then open gradient-samples/preview.html in your browser
|
|
253
|
+
# Get JSON output for automation
|
|
254
|
+
appshot fonts --json
|
|
278
255
|
```
|
|
279
256
|
|
|
280
|
-
####
|
|
257
|
+
#### Font Setting Methods
|
|
281
258
|
|
|
282
|
-
|
|
283
|
-
- Visual color blocks showing the gradient colors
|
|
284
|
-
- Name and description
|
|
285
|
-
- Category grouping
|
|
286
|
-
- Gradient ID for applying
|
|
259
|
+
You have three ways to set fonts:
|
|
287
260
|
|
|
288
|
-
|
|
261
|
+
1. **Direct Command** (Fastest):
|
|
289
262
|
```bash
|
|
290
|
-
appshot
|
|
291
|
-
|
|
263
|
+
appshot fonts --set "Helvetica"
|
|
264
|
+
appshot fonts --set "SF Pro" --device iphone
|
|
292
265
|
```
|
|
293
266
|
|
|
294
|
-
|
|
267
|
+
2. **Interactive Selection**:
|
|
295
268
|
```bash
|
|
296
|
-
appshot
|
|
297
|
-
|
|
269
|
+
appshot fonts --select
|
|
270
|
+
appshot style --device iphone # Also includes font selection
|
|
298
271
|
```
|
|
299
272
|
|
|
300
|
-
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
# Use arrow keys to navigate, Enter to apply, Esc to cancel
|
|
273
|
+
3. **Manual Configuration**:
|
|
274
|
+
```json
|
|
275
|
+
{
|
|
276
|
+
"caption": {
|
|
277
|
+
"font": "Montserrat", // Global default
|
|
278
|
+
"fontsize": 64
|
|
279
|
+
},
|
|
280
|
+
"devices": {
|
|
281
|
+
"iphone": {
|
|
282
|
+
"captionFont": "SF Pro" // Device override
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
314
286
|
```
|
|
315
287
|
|
|
316
|
-
|
|
317
|
-
Configure device positioning and caption styling interactively.
|
|
318
|
-
|
|
319
|
-
Options:
|
|
320
|
-
- `--device <name>` - Device name (iphone, ipad, mac, watch)
|
|
321
|
-
- `--reset` - Reset device styling to defaults (removes all custom settings)
|
|
322
|
-
|
|
323
|
-
Features:
|
|
324
|
-
- **Auto frame selection** - Enable/disable automatic frame selection based on screenshot dimensions
|
|
325
|
-
- **Preferred frame** - Choose specific device frame when auto selection is disabled
|
|
326
|
-
- **Partial frames** - Toggle on/off and adjust cut-off percentage (15%-50%)
|
|
327
|
-
- **Frame positioning** - Top, center, bottom, or custom positioning (0-100%)
|
|
328
|
-
- **Frame scaling** - Control device size (75%-130% or custom)
|
|
329
|
-
- **Caption customization** - Device-specific size, position, and box behavior
|
|
330
|
-
- **Caption box** - Auto-sizing, max lines, line height adjustments
|
|
331
|
-
- **Interactive prompts** - Step-by-step configuration with visual descriptions
|
|
332
|
-
|
|
333
|
-
### `appshot build`
|
|
334
|
-
Generate final screenshots with frames, gradients, and captions.
|
|
335
|
-
|
|
336
|
-
Options:
|
|
337
|
-
- `--devices <list>` - Comma-separated device list
|
|
338
|
-
- `--preset <ids>` - Use specific App Store presets (e.g., iphone-6-9,ipad-13)
|
|
339
|
-
- `--config <file>` - Use specific config file (default: .appshot/config.json)
|
|
340
|
-
- `--langs <list>` - Comma-separated language codes
|
|
341
|
-
- `--preview` - Generate low-res previews
|
|
342
|
-
- `--concurrency <n>` - Parallel processing limit
|
|
343
|
-
- `--no-frame` - Skip device frames
|
|
344
|
-
- `--no-gradient` - Skip gradient backgrounds
|
|
345
|
-
- `--no-caption` - Skip captions
|
|
288
|
+
#### Intelligent Fallbacks
|
|
346
289
|
|
|
347
|
-
|
|
348
|
-
Display device specifications and resolutions.
|
|
290
|
+
Every font automatically includes appropriate fallback chains:
|
|
349
291
|
|
|
350
|
-
|
|
351
|
-
|
|
292
|
+
- **SF Pro** β `system-ui, -apple-system, Helvetica, Arial, sans-serif`
|
|
293
|
+
- **Custom Serif** β `'Custom Serif', Georgia, Times New Roman, serif`
|
|
294
|
+
- **Code Font** β `'Code Font', Monaco, Consolas, monospace`
|
|
352
295
|
|
|
353
|
-
|
|
354
|
-
- `--all` - Remove all generated files including .appshot/ directory
|
|
355
|
-
- `--history` - Clear caption autocomplete history
|
|
356
|
-
- `--keep-history` - Preserve caption history when using --all
|
|
357
|
-
- `--yes` - Skip confirmation prompt
|
|
296
|
+
#### System Font Detection
|
|
358
297
|
|
|
359
|
-
|
|
360
|
-
-
|
|
361
|
-
-
|
|
298
|
+
- **macOS**: Uses `system_profiler` for complete font list
|
|
299
|
+
- **Linux**: Uses `fc-list` for fontconfig fonts
|
|
300
|
+
- **Windows**: PowerShell queries font registry
|
|
362
301
|
|
|
363
|
-
###
|
|
364
|
-
Validate project configuration and assets.
|
|
302
|
+
### Device Frames
|
|
365
303
|
|
|
366
|
-
|
|
367
|
-
- `--fix` - Attempt to fix issues automatically
|
|
304
|
+
#### Smart Frame Selection
|
|
368
305
|
|
|
369
|
-
|
|
370
|
-
Manage App Store screenshot presets for all official resolutions.
|
|
306
|
+
Appshot automatically detects screenshot orientation and selects the appropriate frame:
|
|
371
307
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
308
|
+
```json
|
|
309
|
+
{
|
|
310
|
+
"devices": {
|
|
311
|
+
"iphone": {
|
|
312
|
+
"autoFrame": true, // Auto-detect orientation
|
|
313
|
+
"preferredFrame": "iphone-16-pro-max-portrait" // Override
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
```
|
|
378
318
|
|
|
379
|
-
|
|
380
|
-
Validate screenshots against App Store requirements.
|
|
319
|
+
#### Partial Frames
|
|
381
320
|
|
|
382
|
-
|
|
383
|
-
- `--strict` - Validate against required presets only
|
|
384
|
-
- `--fix` - Suggest fixes for invalid screenshots
|
|
321
|
+
Create modern App Store screenshots with cut-off device frames:
|
|
385
322
|
|
|
386
|
-
|
|
387
|
-
|
|
323
|
+
```json
|
|
324
|
+
{
|
|
325
|
+
"devices": {
|
|
326
|
+
"iphone": {
|
|
327
|
+
"partialFrame": true,
|
|
328
|
+
"frameOffset": 25, // Cut 25% from bottom
|
|
329
|
+
"framePosition": 40, // Position at 40% from top
|
|
330
|
+
"frameScale": 0.85 // Scale to 85%
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
```
|
|
388
335
|
|
|
389
|
-
|
|
390
|
-
- `--langs <codes>` - Target languages (comma-separated, required)
|
|
391
|
-
- `--device <name>` - Specific device or all devices
|
|
392
|
-
- `--model <name>` - OpenAI model to use (default: gpt-4o-mini)
|
|
393
|
-
- `--source <lang>` - Source language (default: en)
|
|
394
|
-
- `--review` - Review translations before saving
|
|
395
|
-
- `--overwrite` - Overwrite existing translations
|
|
336
|
+
### Caption System
|
|
396
337
|
|
|
397
|
-
|
|
398
|
-
- **GPT-4o models**: gpt-4o, gpt-4o-mini (using max_tokens)
|
|
399
|
-
- **GPT-5 models**: gpt-5, gpt-5-mini, gpt-5-nano (using max_completion_tokens)
|
|
400
|
-
- **o1 models**: o1, o1-mini (reasoning models)
|
|
401
|
-
- **o3 models**: o3, o3-mini (latest reasoning models)
|
|
338
|
+
#### Dynamic Caption Box
|
|
402
339
|
|
|
403
|
-
|
|
404
|
-
```bash
|
|
405
|
-
# Translate all captions to Spanish, French, and German
|
|
406
|
-
appshot localize --langs es,fr,de
|
|
340
|
+
Intelligent caption rendering that adapts to content:
|
|
407
341
|
|
|
408
|
-
|
|
409
|
-
|
|
342
|
+
```json
|
|
343
|
+
{
|
|
344
|
+
"caption": {
|
|
345
|
+
"position": "above", // above or overlay
|
|
346
|
+
"box": {
|
|
347
|
+
"autoSize": true, // Dynamic height
|
|
348
|
+
"maxLines": 3, // Line limit
|
|
349
|
+
"lineHeight": 1.4, // Line spacing
|
|
350
|
+
"minHeight": 100,
|
|
351
|
+
"maxHeight": 500
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
```
|
|
410
356
|
|
|
411
|
-
|
|
412
|
-
appshot localize --langs zh-CN,zh-TW --model gpt-5
|
|
357
|
+
#### Caption Autocomplete
|
|
413
358
|
|
|
414
|
-
|
|
415
|
-
appshot localize --langs es,fr --overwrite
|
|
416
|
-
```
|
|
359
|
+
The caption command includes intelligent autocomplete:
|
|
417
360
|
|
|
418
|
-
Setup:
|
|
419
361
|
```bash
|
|
420
|
-
|
|
421
|
-
|
|
362
|
+
appshot caption --device iphone
|
|
363
|
+
# Features:
|
|
364
|
+
# - Fuzzy search
|
|
365
|
+
# - Frequency tracking
|
|
366
|
+
# - Device-specific suggestions
|
|
367
|
+
# - Pattern detection
|
|
422
368
|
```
|
|
423
369
|
|
|
424
|
-
|
|
370
|
+
Keyboard shortcuts:
|
|
371
|
+
- **Tab** - Complete suggestion
|
|
372
|
+
- **ββ** - Navigate suggestions
|
|
373
|
+
- **Enter** - Select
|
|
374
|
+
- **Esc** - Dismiss
|
|
375
|
+
|
|
376
|
+
## π Localization & Translation
|
|
377
|
+
|
|
378
|
+
### AI-Powered Translation
|
|
425
379
|
|
|
426
|
-
Appshot
|
|
380
|
+
Appshot integrates with OpenAI for instant caption translation.
|
|
427
381
|
|
|
428
|
-
|
|
382
|
+
#### Setup
|
|
429
383
|
|
|
430
|
-
First, set your OpenAI API key:
|
|
431
384
|
```bash
|
|
432
385
|
export OPENAI_API_KEY="your-api-key-here"
|
|
433
386
|
```
|
|
434
387
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
Translate captions instantly as you type them:
|
|
388
|
+
#### Real-Time Translation
|
|
438
389
|
|
|
439
390
|
```bash
|
|
440
|
-
#
|
|
441
|
-
appshot caption --device iphone --translate --langs es,fr
|
|
442
|
-
|
|
443
|
-
# Use a specific model for higher quality
|
|
444
|
-
appshot caption --device iphone --translate --langs zh-CN,ja --model gpt-5
|
|
445
|
-
```
|
|
391
|
+
# Translate as you type
|
|
392
|
+
appshot caption --device iphone --translate --langs es,fr,de
|
|
446
393
|
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
394
|
+
# Output:
|
|
395
|
+
# ? home.png: Welcome to the future
|
|
396
|
+
# es: Bienvenido al futuro
|
|
397
|
+
# fr: Bienvenue dans le futur
|
|
398
|
+
# de: Willkommen in der Zukunft
|
|
452
399
|
```
|
|
453
400
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
Translate all existing captions at once:
|
|
401
|
+
#### Batch Translation
|
|
457
402
|
|
|
458
403
|
```bash
|
|
459
|
-
# Translate all captions
|
|
404
|
+
# Translate all existing captions
|
|
460
405
|
appshot localize --langs es,fr,de,ja,zh-CN
|
|
461
406
|
|
|
462
|
-
#
|
|
407
|
+
# Device-specific translation
|
|
463
408
|
appshot localize --device iphone --langs es,fr
|
|
464
409
|
|
|
465
|
-
#
|
|
466
|
-
appshot localize --langs es,fr --review
|
|
467
|
-
|
|
468
|
-
# Use GPT-5 for best quality
|
|
410
|
+
# Use premium model
|
|
469
411
|
appshot localize --langs ja,ko --model gpt-5
|
|
412
|
+
|
|
413
|
+
# Review before saving
|
|
414
|
+
appshot localize --langs es --review
|
|
470
415
|
```
|
|
471
416
|
|
|
472
417
|
### Supported Models
|
|
473
418
|
|
|
474
|
-
|
|
419
|
+
| Model Series | Best For | Parameter | Temperature |
|
|
420
|
+
|-------------|----------|-----------|-------------|
|
|
421
|
+
| **GPT-4o** | Fast, cost-effective | `max_tokens` | 0.3 |
|
|
422
|
+
| **GPT-5** | High-quality, nuanced | `max_completion_tokens` | 1.0 |
|
|
423
|
+
| **o1** | Deep reasoning | `max_completion_tokens` | 1.0 |
|
|
424
|
+
| **o3** | State-of-the-art | `max_completion_tokens` | 1.0 |
|
|
475
425
|
|
|
476
|
-
|
|
477
|
-
- **Models**: `gpt-4o`, `gpt-4o-mini`, `gpt-4-turbo`
|
|
478
|
-
- **Best for**: Fast, cost-effective translations
|
|
479
|
-
- **Parameter**: Uses `max_tokens`
|
|
480
|
-
- **Temperature**: Configurable (default 0.3)
|
|
426
|
+
### Supported Languages
|
|
481
427
|
|
|
482
|
-
|
|
483
|
-
- **
|
|
484
|
-
- **
|
|
485
|
-
- **
|
|
486
|
-
- **
|
|
428
|
+
25+ languages including:
|
|
429
|
+
- **European**: es, fr, de, it, pt, nl, sv, no, da, fi, pl, ru
|
|
430
|
+
- **Asian**: ja, ko, zh-CN, zh-TW, hi, th, vi, id, ms
|
|
431
|
+
- **Middle Eastern**: ar, he, tr
|
|
432
|
+
- **Variants**: pt-BR
|
|
487
433
|
|
|
488
|
-
|
|
489
|
-
- **Models**: `o1`, `o1-mini`
|
|
490
|
-
- **Best for**: Complex marketing copy with cultural adaptation
|
|
491
|
-
- **Parameter**: Uses `max_completion_tokens`
|
|
492
|
-
- **Temperature**: Fixed at 1.0
|
|
434
|
+
### Multi-Language Workflow
|
|
493
435
|
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
- **Parameter**: Uses `max_completion_tokens`
|
|
498
|
-
- **Temperature**: Fixed at 1.0
|
|
436
|
+
```bash
|
|
437
|
+
# 1. Add captions with translation
|
|
438
|
+
appshot caption --device iphone --translate --langs es,fr
|
|
499
439
|
|
|
500
|
-
|
|
440
|
+
# 2. Build localized screenshots
|
|
441
|
+
appshot build --langs en,es,fr
|
|
501
442
|
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
443
|
+
# Output structure (always uses language subdirectories):
|
|
444
|
+
# final/
|
|
445
|
+
# iphone/
|
|
446
|
+
# en/
|
|
447
|
+
# es/
|
|
448
|
+
# fr/
|
|
449
|
+
```
|
|
507
450
|
|
|
508
|
-
|
|
451
|
+
## π± Device Support
|
|
509
452
|
|
|
510
|
-
|
|
511
|
-
Translations are cached to avoid duplicate API calls. If you translate the same caption again, it returns instantly without using API credits.
|
|
453
|
+
### Apple Devices
|
|
512
454
|
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
455
|
+
| Device | Orientations | Frame Variants | Special Features |
|
|
456
|
+
|--------|-------------|----------------|------------------|
|
|
457
|
+
| **iPhone** | Portrait, Landscape | 15+ models | Notch/Dynamic Island support |
|
|
458
|
+
| **iPad** | Portrait, Landscape | 10+ models | Multiple sizes |
|
|
459
|
+
| **Mac** | Landscape | 4 resolutions | 16:10 aspect ratio |
|
|
460
|
+
| **Apple Watch** | Portrait | 5 sizes | Band cropping |
|
|
461
|
+
| **Apple TV** | Landscape | HD, 4K | TV frame |
|
|
462
|
+
| **Vision Pro** | Landscape | 3840Γ2160 | Spatial computing |
|
|
519
463
|
|
|
520
|
-
|
|
521
|
-
- Graceful fallback if API is unavailable
|
|
522
|
-
- Clear error messages for rate limits
|
|
523
|
-
- Automatic retry with delays for batch operations
|
|
524
|
-
- Continues with other translations if one fails
|
|
464
|
+
### App Store Specifications
|
|
525
465
|
|
|
526
|
-
|
|
466
|
+
#### Required Resolutions
|
|
527
467
|
|
|
528
|
-
|
|
468
|
+
**iPhone** (choose one):
|
|
469
|
+
- 6.9" Display: 1290Γ2796 (iPhone 16/15 Pro Max)
|
|
470
|
+
- 6.5" Display: 1284Γ2778 (iPhone 14 Plus)
|
|
529
471
|
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
"defaultModel": "gpt-5",
|
|
533
|
-
"temperature": 0.3,
|
|
534
|
-
"cache": true,
|
|
535
|
-
"systemPrompt": "You are translating premium app marketing text. Keep it impactful and concise."
|
|
536
|
-
}
|
|
537
|
-
```
|
|
472
|
+
**iPad**:
|
|
473
|
+
- 13" Display: 2064Γ2752 or 2048Γ2732
|
|
538
474
|
|
|
539
|
-
|
|
475
|
+
**Mac**:
|
|
476
|
+
- 16:10 aspect: 2880Γ1800, 2560Γ1600, 1440Γ900, or 1280Γ800
|
|
540
477
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
3. **Batch operations** are more efficient than real-time for large projects
|
|
544
|
-
4. **Review mode** lets you verify before committing translations
|
|
478
|
+
**Apple Watch**:
|
|
479
|
+
- Must use same size across all localizations
|
|
545
480
|
|
|
546
|
-
|
|
481
|
+
#### Preset Management
|
|
547
482
|
|
|
548
483
|
```bash
|
|
549
|
-
#
|
|
550
|
-
appshot
|
|
551
|
-
|
|
552
|
-
# 2. Add screenshots
|
|
553
|
-
cp ~/Desktop/screenshots/*.png screenshots/iphone/
|
|
484
|
+
# View all presets
|
|
485
|
+
appshot presets
|
|
554
486
|
|
|
555
|
-
#
|
|
556
|
-
appshot
|
|
487
|
+
# Show required only
|
|
488
|
+
appshot presets --required
|
|
557
489
|
|
|
558
|
-
#
|
|
559
|
-
appshot
|
|
490
|
+
# Generate config for specific presets
|
|
491
|
+
appshot presets --generate iphone-6-9,ipad-13
|
|
560
492
|
|
|
561
|
-
#
|
|
562
|
-
|
|
563
|
-
# iphone/
|
|
564
|
-
# en/
|
|
565
|
-
# home.png
|
|
566
|
-
# es/
|
|
567
|
-
# home.png
|
|
568
|
-
# fr/
|
|
569
|
-
# home.png
|
|
570
|
-
# de/
|
|
571
|
-
# home.png
|
|
493
|
+
# Build with presets
|
|
494
|
+
appshot build --preset iphone-6-9,ipad-13
|
|
572
495
|
```
|
|
573
496
|
|
|
574
|
-
|
|
497
|
+
### Validation
|
|
575
498
|
|
|
576
|
-
|
|
499
|
+
```bash
|
|
500
|
+
# Validate against App Store requirements
|
|
501
|
+
appshot validate
|
|
577
502
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
"es": "Organiza tu vida",
|
|
584
|
-
"de": "Organisieren Sie Ihr Leben",
|
|
585
|
-
"ja": "δΊΊηγζ΄ηγγ"
|
|
586
|
-
}
|
|
587
|
-
}
|
|
503
|
+
# Strict mode (required presets only)
|
|
504
|
+
appshot validate --strict
|
|
505
|
+
|
|
506
|
+
# Get fix suggestions
|
|
507
|
+
appshot validate --fix
|
|
588
508
|
```
|
|
589
509
|
|
|
590
|
-
|
|
510
|
+
## π Command Reference
|
|
511
|
+
|
|
512
|
+
### `appshot build`
|
|
513
|
+
|
|
514
|
+
Generate final screenshots with frames, gradients, and captions.
|
|
591
515
|
|
|
592
516
|
```bash
|
|
593
|
-
appshot build
|
|
517
|
+
appshot build [options]
|
|
594
518
|
```
|
|
595
519
|
|
|
596
|
-
|
|
520
|
+
**Options:**
|
|
521
|
+
- `--devices <list>` - Comma-separated device list (default: all)
|
|
522
|
+
- `--preset <ids>` - Use App Store presets (e.g., `iphone-6-9,ipad-13`)
|
|
523
|
+
- `--config <file>` - Custom config file (default: `.appshot/config.json`)
|
|
524
|
+
- `--langs <list>` - Build for specific languages (if not specified, auto-detects)
|
|
525
|
+
- `--preview` - Generate low-res previews
|
|
526
|
+
- `--concurrency <n>` - Parallel processing limit (default: 5)
|
|
527
|
+
- `--no-frame` - Skip device frames
|
|
528
|
+
- `--no-gradient` - Skip gradient backgrounds
|
|
529
|
+
- `--no-caption` - Skip captions
|
|
597
530
|
|
|
598
|
-
|
|
531
|
+
**Language Detection:**
|
|
532
|
+
When `--langs` is not specified, appshot automatically determines languages in this order:
|
|
533
|
+
1. Languages found in caption files (if using multi-language captions)
|
|
534
|
+
2. `defaultLanguage` setting in config.json
|
|
535
|
+
3. System locale (e.g., `fr` for French systems)
|
|
536
|
+
4. Fallback to `en`
|
|
599
537
|
|
|
538
|
+
**Examples:**
|
|
600
539
|
```bash
|
|
601
|
-
#
|
|
602
|
-
appshot
|
|
540
|
+
# Build all devices
|
|
541
|
+
appshot build
|
|
603
542
|
|
|
604
|
-
#
|
|
605
|
-
appshot
|
|
543
|
+
# Specific devices and languages
|
|
544
|
+
appshot build --devices iphone,ipad --langs en,fr,es
|
|
606
545
|
|
|
607
|
-
#
|
|
608
|
-
appshot
|
|
609
|
-
```
|
|
546
|
+
# Use App Store presets
|
|
547
|
+
appshot build --preset iphone-6-9-portrait,ipad-13-landscape
|
|
610
548
|
|
|
611
|
-
|
|
549
|
+
# Preview mode
|
|
550
|
+
appshot build --preview --devices iphone
|
|
551
|
+
```
|
|
612
552
|
|
|
613
|
-
**
|
|
614
|
-
-
|
|
615
|
-
-
|
|
553
|
+
**Exit Codes:**
|
|
554
|
+
- `0` - Success
|
|
555
|
+
- `1` - Configuration error
|
|
556
|
+
- `2` - Missing screenshots
|
|
557
|
+
- `3` - Processing error
|
|
616
558
|
|
|
617
|
-
|
|
618
|
-
- **13" Display**: 2064Γ2752 or 2048Γ2732
|
|
559
|
+
### `appshot caption`
|
|
619
560
|
|
|
620
|
-
|
|
621
|
-
- **16:10 aspect ratio**: 2880Γ1800, 2560Γ1600, 1440Γ900, or 1280Γ800
|
|
561
|
+
Add or edit captions with autocomplete and AI translation.
|
|
622
562
|
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
- **Series 9/8/7**: 396Γ484
|
|
563
|
+
```bash
|
|
564
|
+
appshot caption --device <name> [options]
|
|
565
|
+
```
|
|
627
566
|
|
|
628
|
-
|
|
567
|
+
**Options:**
|
|
568
|
+
- `--device <name>` - Device name (required)
|
|
569
|
+
- `--lang <code>` - Primary language (default: en)
|
|
570
|
+
- `--translate` - Enable real-time AI translation
|
|
571
|
+
- `--langs <codes>` - Target languages for translation
|
|
572
|
+
- `--model <name>` - OpenAI model (default: gpt-4o-mini)
|
|
629
573
|
|
|
574
|
+
**Examples:**
|
|
630
575
|
```bash
|
|
631
|
-
#
|
|
632
|
-
appshot
|
|
576
|
+
# Basic caption entry
|
|
577
|
+
appshot caption --device iphone
|
|
633
578
|
|
|
634
|
-
#
|
|
635
|
-
appshot
|
|
636
|
-
```
|
|
579
|
+
# With translation
|
|
580
|
+
appshot caption --device iphone --translate --langs es,fr,de
|
|
637
581
|
|
|
638
|
-
|
|
582
|
+
# Custom model
|
|
583
|
+
appshot caption --device ipad --translate --langs ja --model gpt-5
|
|
584
|
+
```
|
|
639
585
|
|
|
640
|
-
|
|
586
|
+
### `appshot check`
|
|
641
587
|
|
|
642
|
-
|
|
588
|
+
Validate project configuration and assets.
|
|
643
589
|
|
|
644
590
|
```bash
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
cd appshot
|
|
591
|
+
appshot check [options]
|
|
592
|
+
```
|
|
648
593
|
|
|
649
|
-
|
|
650
|
-
|
|
594
|
+
**Options:**
|
|
595
|
+
- `--fix` - Attempt automatic fixes
|
|
651
596
|
|
|
652
|
-
|
|
653
|
-
|
|
597
|
+
**Checks:**
|
|
598
|
+
- Configuration file validity
|
|
599
|
+
- Screenshot presence
|
|
600
|
+
- Frame availability
|
|
601
|
+
- Directory structure
|
|
602
|
+
- Caption files
|
|
654
603
|
|
|
655
|
-
|
|
656
|
-
npm test
|
|
604
|
+
### `appshot clean`
|
|
657
605
|
|
|
658
|
-
|
|
659
|
-
npm link
|
|
660
|
-
```
|
|
606
|
+
Remove generated files and temporary data.
|
|
661
607
|
|
|
662
|
-
|
|
608
|
+
```bash
|
|
609
|
+
appshot clean [options]
|
|
610
|
+
```
|
|
663
611
|
|
|
664
|
-
|
|
612
|
+
**Options:**
|
|
613
|
+
- `--all` - Remove all generated files including `.appshot/`
|
|
614
|
+
- `--history` - Clear caption autocomplete history
|
|
615
|
+
- `--keep-history` - Preserve history when using `--all`
|
|
616
|
+
- `--yes` - Skip confirmation prompt
|
|
665
617
|
|
|
666
|
-
|
|
618
|
+
**Examples:**
|
|
619
|
+
```bash
|
|
620
|
+
# Clean output only
|
|
621
|
+
appshot clean
|
|
667
622
|
|
|
668
|
-
|
|
623
|
+
# Full reset
|
|
624
|
+
appshot clean --all --yes
|
|
669
625
|
|
|
670
|
-
|
|
626
|
+
# Clear history
|
|
627
|
+
appshot clean --history
|
|
628
|
+
```
|
|
671
629
|
|
|
672
|
-
|
|
630
|
+
### `appshot doctor`
|
|
673
631
|
|
|
674
|
-
|
|
632
|
+
Run comprehensive system diagnostics to verify appshot installation and dependencies.
|
|
675
633
|
|
|
676
|
-
|
|
634
|
+
```bash
|
|
635
|
+
appshot doctor [options]
|
|
636
|
+
```
|
|
677
637
|
|
|
678
|
-
|
|
638
|
+
**Options:**
|
|
639
|
+
- `--json` - Output results as JSON for CI/automation
|
|
640
|
+
- `--verbose` - Show detailed diagnostic information
|
|
641
|
+
- `--category <categories>` - Run specific checks (comma-separated: system,dependencies,fonts,filesystem,frames)
|
|
679
642
|
|
|
680
|
-
|
|
681
|
-
- **
|
|
682
|
-
- **
|
|
683
|
-
- **
|
|
643
|
+
**Checks:**
|
|
644
|
+
- **System Requirements** - Node.js version (β₯18), npm availability, platform detection
|
|
645
|
+
- **Dependencies** - Sharp module installation, native bindings, image processing test, OpenAI API key
|
|
646
|
+
- **Font System** - Font detection commands, system font loading, common font availability
|
|
647
|
+
- **File System** - Write permissions (current/temp directories), .appshot directory, configuration validity
|
|
648
|
+
- **Frame Assets** - Frame directory presence, Frames.json validation, device frame counts, missing files
|
|
684
649
|
|
|
685
|
-
|
|
650
|
+
**Examples:**
|
|
651
|
+
```bash
|
|
652
|
+
# Run all diagnostics
|
|
653
|
+
appshot doctor
|
|
686
654
|
|
|
687
|
-
|
|
655
|
+
# Check specific categories
|
|
656
|
+
appshot doctor --category system,dependencies
|
|
688
657
|
|
|
689
|
-
|
|
658
|
+
# JSON output for CI
|
|
659
|
+
appshot doctor --json
|
|
690
660
|
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
"devices": {
|
|
694
|
-
"iphone": {
|
|
695
|
-
"partialFrame": true,
|
|
696
|
-
"frameOffset": 25 // Cut off bottom 25%
|
|
697
|
-
}
|
|
698
|
-
}
|
|
699
|
-
}
|
|
661
|
+
# Verbose mode for debugging
|
|
662
|
+
appshot doctor --verbose
|
|
700
663
|
```
|
|
701
664
|
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
Place captions above the device frame (recommended) or as an overlay:
|
|
705
|
-
|
|
706
|
-
```json
|
|
707
|
-
{
|
|
708
|
-
"caption": {
|
|
709
|
-
"position": "above", // or "overlay"
|
|
710
|
-
"paddingTop": 120,
|
|
711
|
-
"paddingBottom": 80
|
|
712
|
-
}
|
|
713
|
-
}
|
|
665
|
+
**Output Example:**
|
|
714
666
|
```
|
|
667
|
+
π₯ Appshot Doctor - System Diagnostics
|
|
715
668
|
|
|
716
|
-
|
|
669
|
+
System Requirements:
|
|
670
|
+
β Node.js v20.5.0 (minimum: v18.0.0)
|
|
671
|
+
β npm v9.8.0
|
|
672
|
+
β darwin (macOS)
|
|
717
673
|
|
|
718
|
-
|
|
674
|
+
Dependencies:
|
|
675
|
+
β Sharp v0.33.5 installed
|
|
676
|
+
β libvips v8.15.3 loaded
|
|
677
|
+
β Sharp image processing test passed
|
|
678
|
+
β OpenAI API key not found (translation features disabled)
|
|
719
679
|
|
|
720
|
-
|
|
680
|
+
Summary: 20 passed, 1 warning, 0 errors
|
|
721
681
|
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
- Device frame position
|
|
726
|
-
- Available space constraints
|
|
727
|
-
3. **Smart Positioning** - Caption space adjusts to device placement:
|
|
728
|
-
- Device at **top** β Minimal caption space (15% of screen)
|
|
729
|
-
- Device at **center** β Balanced caption space
|
|
730
|
-
- Device at **bottom** β Maximum caption space (up to 50% of screen)
|
|
682
|
+
Suggestions:
|
|
683
|
+
β’ Set OPENAI_API_KEY environment variable to enable translation features
|
|
684
|
+
```
|
|
731
685
|
|
|
732
|
-
|
|
686
|
+
### `appshot fonts`
|
|
733
687
|
|
|
734
|
-
|
|
688
|
+
Browse, validate, and set fonts for captions.
|
|
735
689
|
|
|
736
|
-
```
|
|
737
|
-
|
|
738
|
-
"caption": {
|
|
739
|
-
"fontsize": 64,
|
|
740
|
-
"box": {
|
|
741
|
-
"autoSize": true, // Auto-size height based on content
|
|
742
|
-
"maxLines": 3, // Maximum lines before truncation
|
|
743
|
-
"lineHeight": 1.4, // Line spacing (1.2-1.8)
|
|
744
|
-
"minHeight": 100, // Minimum caption area height
|
|
745
|
-
"maxHeight": 500 // Maximum caption area height
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
}
|
|
690
|
+
```bash
|
|
691
|
+
appshot fonts [options]
|
|
749
692
|
```
|
|
750
693
|
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
"maxLines": 4, // iPhone can show more lines
|
|
760
|
-
"lineHeight": 1.5 // More spacing for readability
|
|
761
|
-
}
|
|
762
|
-
},
|
|
763
|
-
"watch": {
|
|
764
|
-
"captionBox": {
|
|
765
|
-
"maxLines": 2, // Watch limited to 2 lines
|
|
766
|
-
"lineHeight": 1.3 // Tighter spacing
|
|
767
|
-
}
|
|
768
|
-
}
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
```
|
|
694
|
+
**Options:**
|
|
695
|
+
- `--all` - List all system fonts
|
|
696
|
+
- `--recommended` - Show recommended fonts only (default)
|
|
697
|
+
- `--validate <name>` - Check if font is available
|
|
698
|
+
- `--set <name>` - Set the caption font
|
|
699
|
+
- `--select` - Interactive font selection
|
|
700
|
+
- `--device <name>` - Target specific device (with --set or --select)
|
|
701
|
+
- `--json` - Output as JSON
|
|
772
702
|
|
|
773
|
-
|
|
703
|
+
**Examples:**
|
|
704
|
+
```bash
|
|
705
|
+
# Browse recommended fonts
|
|
706
|
+
appshot fonts
|
|
774
707
|
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
- Result: Automatically wrapped to 2-3 centered lines with proper spacing
|
|
708
|
+
# Set global font directly
|
|
709
|
+
appshot fonts --set "Montserrat"
|
|
778
710
|
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
- `framePosition: "center"` β Caption gets ~700px height
|
|
782
|
-
- `framePosition: "bottom"` β Caption gets ~1400px height
|
|
711
|
+
# Interactive font selection
|
|
712
|
+
appshot fonts --select
|
|
783
713
|
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
- Use 3-4 lines maximum for readability
|
|
787
|
-
- Test with `appshot build --preview` to quickly iterate
|
|
788
|
-
- Adjust `lineHeight` for visual balance (1.4 recommended)
|
|
714
|
+
# Set device-specific font
|
|
715
|
+
appshot fonts --set "SF Pro" --device iphone
|
|
789
716
|
|
|
790
|
-
|
|
717
|
+
# Validate before setting
|
|
718
|
+
appshot fonts --validate "My Font" && appshot fonts --set "My Font"
|
|
791
719
|
|
|
792
|
-
|
|
720
|
+
# List all system fonts
|
|
721
|
+
appshot fonts --all
|
|
793
722
|
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
"devices": {
|
|
797
|
-
"iphone": {
|
|
798
|
-
"partialFrame": true, // Enable partial frame
|
|
799
|
-
"frameOffset": 25, // Cut off bottom 25%
|
|
800
|
-
"framePosition": "center", // or "top", "bottom", 0-100
|
|
801
|
-
"frameScale": 0.9, // Size multiplier (0.5-2.0)
|
|
802
|
-
"captionSize": 72, // Override global caption size
|
|
803
|
-
"captionPosition": "above", // Override global position
|
|
804
|
-
"captionBox": { // Caption box configuration
|
|
805
|
-
"autoSize": true, // Auto-size based on content
|
|
806
|
-
"maxLines": 4, // Maximum lines before truncation
|
|
807
|
-
"lineHeight": 1.4 // Line spacing multiplier
|
|
808
|
-
}
|
|
809
|
-
},
|
|
810
|
-
"watch": {
|
|
811
|
-
"framePosition": "bottom", // Position at bottom
|
|
812
|
-
"frameScale": 1.3, // Make watch larger
|
|
813
|
-
"partialFrame": true, // Cut off band
|
|
814
|
-
"frameOffset": 30 // Cut 30% from bottom
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
}
|
|
723
|
+
# JSON output for automation
|
|
724
|
+
appshot fonts --json > fonts.json
|
|
818
725
|
```
|
|
819
726
|
|
|
820
|
-
###
|
|
727
|
+
### `appshot gradients`
|
|
821
728
|
|
|
822
|
-
|
|
729
|
+
Manage gradient presets.
|
|
823
730
|
|
|
824
|
-
|
|
731
|
+
```bash
|
|
732
|
+
appshot gradients [options]
|
|
733
|
+
appshot gradients select
|
|
734
|
+
```
|
|
825
735
|
|
|
826
|
-
|
|
827
|
-
-
|
|
828
|
-
-
|
|
829
|
-
-
|
|
736
|
+
**Options:**
|
|
737
|
+
- `--list` - List all presets (default)
|
|
738
|
+
- `--category <name>` - Filter by category
|
|
739
|
+
- `--preview <id>` - Generate preview image
|
|
740
|
+
- `--sample` - Generate all samples with HTML
|
|
741
|
+
- `--apply <id>` - Apply preset to project
|
|
830
742
|
|
|
831
|
-
|
|
743
|
+
**Examples:**
|
|
744
|
+
```bash
|
|
745
|
+
# Browse all
|
|
746
|
+
appshot gradients
|
|
832
747
|
|
|
833
|
-
|
|
748
|
+
# Apply preset
|
|
749
|
+
appshot gradients --apply ocean
|
|
834
750
|
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
751
|
+
# Interactive selection
|
|
752
|
+
appshot gradients select
|
|
753
|
+
|
|
754
|
+
# Generate samples
|
|
755
|
+
appshot gradients --sample
|
|
756
|
+
```
|
|
757
|
+
|
|
758
|
+
### `appshot init`
|
|
759
|
+
|
|
760
|
+
Initialize new project with scaffolding.
|
|
761
|
+
|
|
762
|
+
```bash
|
|
763
|
+
appshot init [options]
|
|
764
|
+
```
|
|
765
|
+
|
|
766
|
+
**Options:**
|
|
767
|
+
- `--force` - Overwrite existing files
|
|
768
|
+
|
|
769
|
+
**Creates:**
|
|
770
|
+
- `.appshot/config.json`
|
|
771
|
+
- `.appshot/captions/`
|
|
772
|
+
- `screenshots/` directories
|
|
773
|
+
- Default configuration
|
|
774
|
+
|
|
775
|
+
### `appshot migrate`
|
|
776
|
+
|
|
777
|
+
Migrate project structure to latest version.
|
|
778
|
+
|
|
779
|
+
```bash
|
|
780
|
+
appshot migrate [options]
|
|
781
|
+
```
|
|
782
|
+
|
|
783
|
+
**Options:**
|
|
784
|
+
- `--output-structure` - Migrate to language subdirectory structure
|
|
785
|
+
- `--dry-run` - Preview changes without making them
|
|
786
|
+
- `--lang <code>` - Language to use for migration (default: system language)
|
|
787
|
+
|
|
788
|
+
**Examples:**
|
|
789
|
+
```bash
|
|
790
|
+
# Migrate existing screenshots to language subdirectories
|
|
791
|
+
appshot migrate --output-structure
|
|
792
|
+
|
|
793
|
+
# Preview migration without changes
|
|
794
|
+
appshot migrate --output-structure --dry-run
|
|
795
|
+
|
|
796
|
+
# Specify target language
|
|
797
|
+
appshot migrate --output-structure --lang fr
|
|
798
|
+
```
|
|
799
|
+
|
|
800
|
+
### `appshot localize`
|
|
801
|
+
|
|
802
|
+
Batch translate all captions using AI.
|
|
803
|
+
|
|
804
|
+
```bash
|
|
805
|
+
appshot localize --langs <codes> [options]
|
|
851
806
|
```
|
|
852
807
|
|
|
853
|
-
|
|
808
|
+
**Options:**
|
|
809
|
+
- `--langs <codes>` - Target languages (required)
|
|
810
|
+
- `--device <name>` - Specific device only
|
|
811
|
+
- `--model <name>` - OpenAI model (default: gpt-4o-mini)
|
|
812
|
+
- `--source <lang>` - Source language (default: en)
|
|
813
|
+
- `--review` - Review before saving
|
|
814
|
+
- `--overwrite` - Replace existing translations
|
|
854
815
|
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
816
|
+
**Examples:**
|
|
817
|
+
```bash
|
|
818
|
+
# Translate all
|
|
819
|
+
appshot localize --langs es,fr,de
|
|
858
820
|
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
- Without this, device scales based on available space
|
|
821
|
+
# Device-specific
|
|
822
|
+
appshot localize --device iphone --langs ja,ko
|
|
862
823
|
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
824
|
+
# Premium model with review
|
|
825
|
+
appshot localize --langs zh-CN --model gpt-5 --review
|
|
826
|
+
```
|
|
866
827
|
|
|
867
|
-
|
|
868
|
-
- MUST be false for consistent layouts
|
|
869
|
-
- Default is true (adapts to content)
|
|
828
|
+
### `appshot presets`
|
|
870
829
|
|
|
871
|
-
|
|
872
|
-
- Both MUST be set to same value
|
|
873
|
-
- Creates fixed caption area regardless of text length
|
|
830
|
+
Manage App Store screenshot presets.
|
|
874
831
|
|
|
875
|
-
|
|
832
|
+
```bash
|
|
833
|
+
appshot presets [options]
|
|
834
|
+
```
|
|
835
|
+
|
|
836
|
+
**Options:**
|
|
837
|
+
- `--list` - List all presets (default)
|
|
838
|
+
- `--required` - Show required only
|
|
839
|
+
- `--generate <ids>` - Generate config for presets
|
|
840
|
+
- `--category <type>` - Filter by device type
|
|
841
|
+
- `--output <file>` - Output file for config
|
|
842
|
+
|
|
843
|
+
**Examples:**
|
|
844
|
+
```bash
|
|
845
|
+
# View all
|
|
846
|
+
appshot presets
|
|
847
|
+
|
|
848
|
+
# Required only
|
|
849
|
+
appshot presets --required
|
|
850
|
+
|
|
851
|
+
# Generate config
|
|
852
|
+
appshot presets --generate iphone-6-9,ipad-13
|
|
853
|
+
```
|
|
854
|
+
|
|
855
|
+
### `appshot specs`
|
|
856
|
+
|
|
857
|
+
Display complete Apple App Store screenshot specifications.
|
|
858
|
+
|
|
859
|
+
```bash
|
|
860
|
+
appshot specs [options]
|
|
861
|
+
```
|
|
862
|
+
|
|
863
|
+
**Options:**
|
|
864
|
+
- `--device <name>` - Filter by device type (iphone|ipad|mac|watch|appletv|visionpro)
|
|
865
|
+
- `--json` - Output as JSON (exact Apple specifications for diffing)
|
|
866
|
+
- `--required` - Show only required presets
|
|
867
|
+
|
|
868
|
+
**Shows:**
|
|
869
|
+
- Complete Apple specifications with exact resolutions
|
|
870
|
+
- Display sizes and device compatibility lists
|
|
871
|
+
- Required vs optional indicators
|
|
872
|
+
- Fallback notes and requirements
|
|
873
|
+
|
|
874
|
+
**JSON Output for Change Tracking:**
|
|
875
|
+
The `--json` flag outputs the complete Apple App Store specifications data, perfect for tracking changes over time:
|
|
876
|
+
|
|
877
|
+
```bash
|
|
878
|
+
# Save current specifications
|
|
879
|
+
appshot specs --json > apple-specs-2024-08.json
|
|
880
|
+
|
|
881
|
+
# After Apple updates (typically September)
|
|
882
|
+
appshot specs --json > apple-specs-2024-09.json
|
|
883
|
+
|
|
884
|
+
# See what changed
|
|
885
|
+
diff apple-specs-2024-08.json apple-specs-2024-09.json
|
|
886
|
+
```
|
|
887
|
+
|
|
888
|
+
**Data Source:**
|
|
889
|
+
The specifications mirror [Apple's official screenshot requirements](https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications)
|
|
890
|
+
and are maintained in sync with Apple's updates. The JSON output preserves all metadata including:
|
|
891
|
+
- Exact resolutions (e.g., `1290x2796` for iPhone 6.9")
|
|
892
|
+
- Device groupings (which devices share requirements)
|
|
893
|
+
- Requirement status (mandatory vs optional)
|
|
894
|
+
- Fallback rules and special notes
|
|
895
|
+
|
|
896
|
+
This is particularly useful for:
|
|
897
|
+
- Tracking when Apple adds new device requirements
|
|
898
|
+
- Validating screenshot compliance before submission
|
|
899
|
+
- Automating screenshot generation pipelines
|
|
900
|
+
- Planning resource allocation for new devices
|
|
901
|
+
|
|
902
|
+
### `appshot style`
|
|
903
|
+
|
|
904
|
+
Configure device styling interactively.
|
|
905
|
+
|
|
906
|
+
```bash
|
|
907
|
+
appshot style --device <name> [options]
|
|
908
|
+
```
|
|
909
|
+
|
|
910
|
+
**Options:**
|
|
911
|
+
- `--device <name>` - Device name (required)
|
|
912
|
+
- `--reset` - Reset to defaults
|
|
913
|
+
|
|
914
|
+
**Configures:**
|
|
915
|
+
- Font selection
|
|
916
|
+
- Frame settings
|
|
917
|
+
- Partial frames
|
|
918
|
+
- Frame positioning
|
|
919
|
+
- Frame scaling
|
|
920
|
+
- Caption settings
|
|
921
|
+
|
|
922
|
+
**Examples:**
|
|
923
|
+
```bash
|
|
924
|
+
# Configure iPhone
|
|
925
|
+
appshot style --device iphone
|
|
926
|
+
|
|
927
|
+
# Reset to defaults
|
|
928
|
+
appshot style --device iphone --reset
|
|
929
|
+
```
|
|
930
|
+
|
|
931
|
+
### `appshot validate`
|
|
932
|
+
|
|
933
|
+
Validate screenshots against App Store requirements.
|
|
934
|
+
|
|
935
|
+
```bash
|
|
936
|
+
appshot validate [options]
|
|
937
|
+
```
|
|
938
|
+
|
|
939
|
+
**Options:**
|
|
940
|
+
- `--strict` - Validate required presets only
|
|
941
|
+
- `--fix` - Show fix suggestions
|
|
942
|
+
|
|
943
|
+
**Validates:**
|
|
944
|
+
- Resolution compliance
|
|
945
|
+
- Aspect ratios
|
|
946
|
+
- Required presets
|
|
947
|
+
- File formats
|
|
948
|
+
|
|
949
|
+
## βοΈ Configuration Reference
|
|
950
|
+
|
|
951
|
+
### Complete Schema
|
|
876
952
|
|
|
877
953
|
```json
|
|
878
954
|
{
|
|
955
|
+
"output": "./final", // Output directory
|
|
956
|
+
"frames": "./frames", // Frame directory
|
|
957
|
+
"defaultLanguage": "en", // Default language for builds (optional)
|
|
879
958
|
"gradient": {
|
|
880
|
-
"colors": ["#
|
|
881
|
-
"direction": "top-bottom"
|
|
959
|
+
"colors": ["#hex1", "#hex2"],
|
|
960
|
+
"direction": "top-bottom" // or diagonal, left-right
|
|
882
961
|
},
|
|
883
962
|
"caption": {
|
|
884
|
-
"
|
|
963
|
+
"font": "Font Name",
|
|
964
|
+
"fontsize": 64, // Pixels
|
|
885
965
|
"color": "#FFFFFF",
|
|
886
|
-
"align": "center",
|
|
887
|
-
"
|
|
966
|
+
"align": "center", // left, center, right
|
|
967
|
+
"position": "above", // above, overlay
|
|
968
|
+
"paddingTop": 100,
|
|
969
|
+
"paddingBottom": 60,
|
|
970
|
+
"box": {
|
|
971
|
+
"autoSize": true, // Dynamic height
|
|
972
|
+
"maxLines": 3,
|
|
973
|
+
"lineHeight": 1.4,
|
|
974
|
+
"minHeight": 100,
|
|
975
|
+
"maxHeight": 500
|
|
976
|
+
}
|
|
888
977
|
},
|
|
889
978
|
"devices": {
|
|
890
979
|
"iphone": {
|
|
891
980
|
"input": "./screenshots/iphone",
|
|
892
981
|
"resolution": "1284x2778",
|
|
893
|
-
"autoFrame":
|
|
982
|
+
"autoFrame": true,
|
|
983
|
+
"preferredFrame": "frame-name",
|
|
984
|
+
"partialFrame": false,
|
|
985
|
+
"frameOffset": 25, // Percentage
|
|
986
|
+
"framePosition": "center", // or top, bottom, 0-100
|
|
987
|
+
"frameScale": 0.9, // 0.5-2.0
|
|
988
|
+
"captionFont": "Override",
|
|
989
|
+
"captionSize": 72,
|
|
990
|
+
"captionPosition": "above",
|
|
991
|
+
"captionBox": {
|
|
992
|
+
"autoSize": false,
|
|
993
|
+
"minHeight": 320,
|
|
994
|
+
"maxHeight": 320
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
}
|
|
999
|
+
```
|
|
1000
|
+
|
|
1001
|
+
### Device Configuration
|
|
1002
|
+
|
|
1003
|
+
Each device can override global settings:
|
|
1004
|
+
|
|
1005
|
+
```json
|
|
1006
|
+
{
|
|
1007
|
+
"devices": {
|
|
1008
|
+
"iphone": {
|
|
1009
|
+
// Required
|
|
1010
|
+
"input": "./screenshots/iphone",
|
|
1011
|
+
"resolution": "1284x2778",
|
|
1012
|
+
|
|
1013
|
+
// Frame options
|
|
1014
|
+
"autoFrame": true,
|
|
894
1015
|
"preferredFrame": "iphone-16-pro-max-portrait",
|
|
1016
|
+
"partialFrame": true,
|
|
1017
|
+
"frameOffset": 25,
|
|
1018
|
+
"framePosition": 40,
|
|
1019
|
+
"frameScale": 0.85,
|
|
1020
|
+
|
|
1021
|
+
// Caption overrides
|
|
1022
|
+
"captionFont": "SF Pro",
|
|
1023
|
+
"captionSize": 64,
|
|
1024
|
+
"captionPosition": "above",
|
|
895
1025
|
"captionBox": {
|
|
896
1026
|
"autoSize": false,
|
|
897
1027
|
"minHeight": 320,
|
|
898
1028
|
"maxHeight": 320,
|
|
899
1029
|
"maxLines": 3
|
|
900
|
-
}
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
```
|
|
1035
|
+
|
|
1036
|
+
### Fixed Layout Configuration
|
|
1037
|
+
|
|
1038
|
+
For consistent screenshots regardless of caption length:
|
|
1039
|
+
|
|
1040
|
+
```json
|
|
1041
|
+
{
|
|
1042
|
+
"devices": {
|
|
1043
|
+
"iphone": {
|
|
1044
|
+
"autoFrame": false,
|
|
1045
|
+
"preferredFrame": "iphone-16-pro-max-portrait",
|
|
901
1046
|
"frameScale": 0.85,
|
|
902
|
-
"framePosition": 40
|
|
1047
|
+
"framePosition": 40,
|
|
1048
|
+
"captionBox": {
|
|
1049
|
+
"autoSize": false, // Critical
|
|
1050
|
+
"minHeight": 320, // Fixed height
|
|
1051
|
+
"maxHeight": 320 // Same as min
|
|
1052
|
+
}
|
|
903
1053
|
}
|
|
904
1054
|
}
|
|
905
1055
|
}
|
|
906
1056
|
```
|
|
907
1057
|
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
- β
Caption area is always 320px tall
|
|
912
|
-
- β
Long captions truncate instead of expanding
|
|
913
|
-
- β
Professional, consistent App Store screenshots
|
|
1058
|
+
## π€ Agent & Automation Guide
|
|
1059
|
+
|
|
1060
|
+
### Design Principles
|
|
914
1061
|
|
|
915
|
-
|
|
1062
|
+
Appshot is built for automation:
|
|
916
1063
|
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
4. **Frame Scale** - Adjust device size
|
|
922
|
-
5. **Caption Settings** - Customize text size, position, and box behavior
|
|
1064
|
+
1. **Predictable** - Consistent commands and outputs
|
|
1065
|
+
2. **Scriptable** - JSON configs, exit codes, no GUI
|
|
1066
|
+
3. **Composable** - Unix philosophy, pipe-friendly
|
|
1067
|
+
4. **Fast** - Parallel processing, no overhead
|
|
923
1068
|
|
|
924
|
-
|
|
1069
|
+
### JSON Output Mode
|
|
1070
|
+
|
|
1071
|
+
Most commands support JSON output for parsing:
|
|
925
1072
|
|
|
926
|
-
To reset a device to default settings:
|
|
927
1073
|
```bash
|
|
928
|
-
|
|
1074
|
+
# Device specs as JSON
|
|
1075
|
+
appshot specs --json
|
|
1076
|
+
|
|
1077
|
+
# Font list as JSON
|
|
1078
|
+
appshot fonts --json
|
|
1079
|
+
|
|
1080
|
+
# Preset data as JSON
|
|
1081
|
+
appshot presets --json
|
|
1082
|
+
|
|
1083
|
+
# Validation results as JSON
|
|
1084
|
+
appshot validate --json
|
|
929
1085
|
```
|
|
930
1086
|
|
|
931
|
-
|
|
1087
|
+
### Exit Codes
|
|
932
1088
|
|
|
933
|
-
|
|
1089
|
+
| Code | Meaning | Commands |
|
|
1090
|
+
|------|---------|----------|
|
|
1091
|
+
| 0 | Success | All |
|
|
1092
|
+
| 1 | Configuration error | build, check |
|
|
1093
|
+
| 2 | Missing files | build, validate |
|
|
1094
|
+
| 3 | Processing error | build |
|
|
1095
|
+
| 4 | Invalid input | All |
|
|
1096
|
+
| 5 | API error | localize, caption |
|
|
934
1097
|
|
|
935
|
-
###
|
|
1098
|
+
### Batch Operations
|
|
936
1099
|
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
1100
|
+
```bash
|
|
1101
|
+
# Process multiple devices
|
|
1102
|
+
appshot build --devices iphone,ipad,mac
|
|
1103
|
+
|
|
1104
|
+
# Multiple languages
|
|
1105
|
+
appshot build --langs en,es,fr,de,ja
|
|
1106
|
+
|
|
1107
|
+
# Parallel processing
|
|
1108
|
+
appshot build --concurrency 10
|
|
1109
|
+
```
|
|
942
1110
|
|
|
943
|
-
###
|
|
1111
|
+
### CI/CD Integration
|
|
1112
|
+
|
|
1113
|
+
#### GitHub Actions
|
|
1114
|
+
|
|
1115
|
+
```yaml
|
|
1116
|
+
name: Generate Screenshots
|
|
1117
|
+
on: [push]
|
|
1118
|
+
|
|
1119
|
+
jobs:
|
|
1120
|
+
screenshots:
|
|
1121
|
+
runs-on: macos-latest
|
|
1122
|
+
steps:
|
|
1123
|
+
- uses: actions/checkout@v2
|
|
1124
|
+
|
|
1125
|
+
- name: Setup Node
|
|
1126
|
+
uses: actions/setup-node@v2
|
|
1127
|
+
with:
|
|
1128
|
+
node-version: '18'
|
|
1129
|
+
|
|
1130
|
+
- name: Install Appshot
|
|
1131
|
+
run: npm install -g appshot-cli
|
|
1132
|
+
|
|
1133
|
+
- name: Generate Screenshots
|
|
1134
|
+
run: |
|
|
1135
|
+
appshot init --force
|
|
1136
|
+
appshot gradients --apply ocean
|
|
1137
|
+
appshot build --preset iphone-6-9,ipad-13
|
|
1138
|
+
|
|
1139
|
+
- name: Upload Artifacts
|
|
1140
|
+
uses: actions/upload-artifact@v2
|
|
1141
|
+
with:
|
|
1142
|
+
name: screenshots
|
|
1143
|
+
path: final/
|
|
1144
|
+
```
|
|
944
1145
|
|
|
945
|
-
|
|
1146
|
+
#### Shell Script Automation
|
|
946
1147
|
|
|
947
1148
|
```bash
|
|
948
|
-
|
|
949
|
-
|
|
1149
|
+
#!/bin/bash
|
|
1150
|
+
set -e
|
|
1151
|
+
|
|
1152
|
+
# Configure
|
|
1153
|
+
cat > .appshot/config.json << EOF
|
|
1154
|
+
{
|
|
1155
|
+
"gradient": {"colors": ["#FF5733", "#FFC300"]},
|
|
1156
|
+
"devices": {
|
|
1157
|
+
"iphone": {"resolution": "1284x2778"}
|
|
1158
|
+
}
|
|
1159
|
+
}
|
|
1160
|
+
EOF
|
|
1161
|
+
|
|
1162
|
+
# Add captions programmatically
|
|
1163
|
+
echo '{"home.png": "Welcome"}' > .appshot/captions/iphone.json
|
|
950
1164
|
|
|
951
|
-
#
|
|
1165
|
+
# Build
|
|
952
1166
|
appshot build --devices iphone
|
|
1167
|
+
|
|
1168
|
+
# Validate
|
|
1169
|
+
appshot validate --strict || exit 1
|
|
953
1170
|
```
|
|
954
1171
|
|
|
955
|
-
###
|
|
1172
|
+
### MCP Integration
|
|
1173
|
+
|
|
1174
|
+
Works with Model Context Protocol tools:
|
|
1175
|
+
|
|
1176
|
+
```bash
|
|
1177
|
+
# MCP captures screenshot
|
|
1178
|
+
mcp-screenshot capture --output ./screenshots/iphone/home.png
|
|
1179
|
+
|
|
1180
|
+
# Appshot processes
|
|
1181
|
+
appshot build --devices iphone --no-interactive
|
|
1182
|
+
```
|
|
1183
|
+
|
|
1184
|
+
### Python Automation
|
|
956
1185
|
|
|
957
1186
|
```python
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1187
|
+
import subprocess
|
|
1188
|
+
import json
|
|
1189
|
+
|
|
1190
|
+
def generate_screenshots(device, captions):
|
|
1191
|
+
# Configure
|
|
1192
|
+
config = {
|
|
1193
|
+
"gradient": {"colors": ["#0077BE", "#33CCCC"]},
|
|
1194
|
+
"devices": {
|
|
1195
|
+
device: {"resolution": "1284x2778"}
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
962
1198
|
|
|
963
|
-
|
|
964
|
-
|
|
1199
|
+
with open('.appshot/config.json', 'w') as f:
|
|
1200
|
+
json.dump(config, f)
|
|
965
1201
|
|
|
966
|
-
#
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
"devices": {"iphone": {"frameScale": 0.85}}
|
|
970
|
-
})
|
|
1202
|
+
# Add captions
|
|
1203
|
+
with open(f'.appshot/captions/{device}.json', 'w') as f:
|
|
1204
|
+
json.dump(captions, f)
|
|
971
1205
|
|
|
972
|
-
#
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
1206
|
+
# Build
|
|
1207
|
+
result = subprocess.run(
|
|
1208
|
+
['appshot', 'build', '--devices', device],
|
|
1209
|
+
capture_output=True,
|
|
1210
|
+
text=True
|
|
1211
|
+
)
|
|
976
1212
|
|
|
977
|
-
|
|
978
|
-
|
|
1213
|
+
return result.returncode == 0
|
|
1214
|
+
|
|
1215
|
+
# Usage
|
|
1216
|
+
captions = {
|
|
1217
|
+
"home.png": "Your Dashboard",
|
|
1218
|
+
"settings.png": "Customize Everything"
|
|
1219
|
+
}
|
|
1220
|
+
generate_screenshots("iphone", captions)
|
|
1221
|
+
```
|
|
1222
|
+
|
|
1223
|
+
### Node.js Automation
|
|
1224
|
+
|
|
1225
|
+
```javascript
|
|
1226
|
+
import { exec } from 'child_process';
|
|
1227
|
+
import { writeFileSync } from 'fs';
|
|
1228
|
+
|
|
1229
|
+
async function generateScreenshots() {
|
|
1230
|
+
// 1. Initialize
|
|
1231
|
+
await execPromise('appshot init --force');
|
|
1232
|
+
|
|
1233
|
+
// 2. Configure
|
|
1234
|
+
const config = {
|
|
1235
|
+
gradient: { colors: ['#FF5733', '#FFC300'] },
|
|
1236
|
+
caption: { font: 'SF Pro', fontsize: 64 }
|
|
1237
|
+
};
|
|
1238
|
+
writeFileSync('.appshot/config.json', JSON.stringify(config));
|
|
1239
|
+
|
|
1240
|
+
// 3. Add captions
|
|
1241
|
+
const captions = {
|
|
1242
|
+
'home.png': {
|
|
1243
|
+
en: 'Welcome',
|
|
1244
|
+
es: 'Bienvenido',
|
|
1245
|
+
fr: 'Bienvenue'
|
|
1246
|
+
}
|
|
1247
|
+
};
|
|
1248
|
+
writeFileSync('.appshot/captions/iphone.json', JSON.stringify(captions));
|
|
1249
|
+
|
|
1250
|
+
// 4. Build with multiple languages
|
|
1251
|
+
await execPromise('appshot build --langs en,es,fr');
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
function execPromise(cmd) {
|
|
1255
|
+
return new Promise((resolve, reject) => {
|
|
1256
|
+
exec(cmd, (error, stdout) => {
|
|
1257
|
+
if (error) reject(error);
|
|
1258
|
+
else resolve(stdout);
|
|
1259
|
+
});
|
|
1260
|
+
});
|
|
1261
|
+
}
|
|
1262
|
+
```
|
|
1263
|
+
|
|
1264
|
+
## π― Recipes & Examples
|
|
1265
|
+
|
|
1266
|
+
### App Store Submission Workflow
|
|
1267
|
+
|
|
1268
|
+
```bash
|
|
1269
|
+
# 1. Initialize project
|
|
1270
|
+
appshot init
|
|
1271
|
+
|
|
1272
|
+
# 2. Configure for App Store
|
|
1273
|
+
appshot presets --generate iphone-6-9,ipad-13 > .appshot/config.json
|
|
1274
|
+
|
|
1275
|
+
# 3. Add screenshots
|
|
1276
|
+
cp simulator/*.png screenshots/iphone/
|
|
1277
|
+
|
|
1278
|
+
# 4. Add captions with translation
|
|
1279
|
+
export OPENAI_API_KEY="sk-..."
|
|
1280
|
+
appshot caption --device iphone --translate --langs es,fr,de,ja,zh-CN
|
|
1281
|
+
|
|
1282
|
+
# 5. Apply premium gradient
|
|
1283
|
+
appshot gradients --apply twilight
|
|
1284
|
+
|
|
1285
|
+
# 6. Configure styling
|
|
1286
|
+
appshot style --device iphone
|
|
1287
|
+
|
|
1288
|
+
# 7. Build all localizations
|
|
1289
|
+
appshot build --preset iphone-6-9,ipad-13 --langs en,es,fr,de,ja,zh-CN
|
|
1290
|
+
|
|
1291
|
+
# 8. Validate
|
|
1292
|
+
appshot validate --strict
|
|
1293
|
+
|
|
1294
|
+
# 9. Output ready in final/
|
|
1295
|
+
```
|
|
1296
|
+
|
|
1297
|
+
### Consistent Marketing Screenshots
|
|
1298
|
+
|
|
1299
|
+
For identical device positioning across all screenshots:
|
|
1300
|
+
|
|
1301
|
+
```json
|
|
1302
|
+
{
|
|
1303
|
+
"devices": {
|
|
1304
|
+
"iphone": {
|
|
1305
|
+
"resolution": "1284x2778",
|
|
1306
|
+
"autoFrame": false,
|
|
1307
|
+
"preferredFrame": "iphone-16-pro-max-portrait",
|
|
1308
|
+
"frameScale": 0.85,
|
|
1309
|
+
"framePosition": 40,
|
|
1310
|
+
"partialFrame": true,
|
|
1311
|
+
"frameOffset": 25,
|
|
1312
|
+
"captionBox": {
|
|
1313
|
+
"autoSize": false,
|
|
1314
|
+
"minHeight": 320,
|
|
1315
|
+
"maxHeight": 320,
|
|
1316
|
+
"maxLines": 3
|
|
1317
|
+
}
|
|
1318
|
+
}
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
979
1321
|
```
|
|
980
1322
|
|
|
981
|
-
###
|
|
1323
|
+
### Brand Guidelines Compliance
|
|
982
1324
|
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
1325
|
+
```json
|
|
1326
|
+
{
|
|
1327
|
+
"gradient": {
|
|
1328
|
+
"colors": ["#BrandColor1", "#BrandColor2"],
|
|
1329
|
+
"direction": "diagonal"
|
|
1330
|
+
},
|
|
1331
|
+
"caption": {
|
|
1332
|
+
"font": "Brand Font Name",
|
|
1333
|
+
"fontsize": 72,
|
|
1334
|
+
"color": "#BrandTextColor",
|
|
1335
|
+
"align": "center"
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
```
|
|
988
1339
|
|
|
989
|
-
|
|
1340
|
+
### Multi-Device Campaign
|
|
1341
|
+
|
|
1342
|
+
```bash
|
|
1343
|
+
# Configure each device
|
|
1344
|
+
appshot style --device iphone
|
|
1345
|
+
appshot style --device ipad
|
|
1346
|
+
appshot style --device mac
|
|
1347
|
+
|
|
1348
|
+
# Build all at once
|
|
1349
|
+
appshot build --devices iphone,ipad,mac --langs en,es,fr
|
|
1350
|
+
|
|
1351
|
+
# Output structure (language subdirectories):
|
|
1352
|
+
# final/
|
|
1353
|
+
# iphone/
|
|
1354
|
+
# en/ es/ fr/
|
|
1355
|
+
# ipad/
|
|
1356
|
+
# en/ es/ fr/
|
|
1357
|
+
# mac/
|
|
1358
|
+
# en/ es/ fr/
|
|
1359
|
+
```
|
|
1360
|
+
|
|
1361
|
+
### A/B Testing Different Styles
|
|
1362
|
+
|
|
1363
|
+
```bash
|
|
1364
|
+
# Version A - Ocean gradient
|
|
1365
|
+
appshot gradients --apply ocean
|
|
1366
|
+
appshot build --devices iphone --output final-ocean
|
|
1367
|
+
|
|
1368
|
+
# Version B - Sunset gradient
|
|
1369
|
+
appshot gradients --apply sunset
|
|
1370
|
+
appshot build --devices iphone --output final-sunset
|
|
1371
|
+
|
|
1372
|
+
# Version C - Monochrome
|
|
1373
|
+
appshot gradients --apply noir
|
|
1374
|
+
appshot build --devices iphone --output final-noir
|
|
1375
|
+
```
|
|
1376
|
+
|
|
1377
|
+
## π§ Troubleshooting
|
|
1378
|
+
|
|
1379
|
+
### Common Issues
|
|
1380
|
+
|
|
1381
|
+
#### Screenshots Not Found
|
|
1382
|
+
|
|
1383
|
+
```bash
|
|
1384
|
+
# Check path configuration
|
|
1385
|
+
appshot check
|
|
1386
|
+
|
|
1387
|
+
# Verify screenshot location
|
|
1388
|
+
ls screenshots/iphone/
|
|
1389
|
+
|
|
1390
|
+
# Fix: Update config
|
|
1391
|
+
{
|
|
1392
|
+
"devices": {
|
|
1393
|
+
"iphone": {
|
|
1394
|
+
"input": "./correct/path/to/screenshots"
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1398
|
+
```
|
|
1399
|
+
|
|
1400
|
+
#### Font Not Rendering
|
|
1401
|
+
|
|
1402
|
+
```bash
|
|
1403
|
+
# 1. Validate font availability
|
|
1404
|
+
appshot fonts --validate "Font Name"
|
|
1405
|
+
|
|
1406
|
+
# 2. Use fallback font
|
|
1407
|
+
appshot fonts --recommended
|
|
1408
|
+
|
|
1409
|
+
# 3. Set web-safe font
|
|
1410
|
+
{
|
|
1411
|
+
"caption": {
|
|
1412
|
+
"font": "Arial" // Always works
|
|
1413
|
+
}
|
|
1414
|
+
}
|
|
1415
|
+
```
|
|
1416
|
+
|
|
1417
|
+
#### Translation Not Working
|
|
1418
|
+
|
|
1419
|
+
```bash
|
|
1420
|
+
# Check API key
|
|
1421
|
+
echo $OPENAI_API_KEY
|
|
1422
|
+
|
|
1423
|
+
# Test with different model
|
|
1424
|
+
appshot caption --device iphone --translate --model gpt-4o-mini
|
|
1425
|
+
|
|
1426
|
+
# Check rate limits
|
|
1427
|
+
# Wait 60 seconds between large batches
|
|
1428
|
+
```
|
|
990
1429
|
|
|
991
|
-
|
|
992
|
-
|
|
1430
|
+
#### Blurry Output
|
|
1431
|
+
|
|
1432
|
+
```bash
|
|
1433
|
+
# Ensure high-res input
|
|
1434
|
+
# Minimum: 1242x2208 for iPhone
|
|
1435
|
+
|
|
1436
|
+
# Check scaling
|
|
1437
|
+
{
|
|
1438
|
+
"devices": {
|
|
1439
|
+
"iphone": {
|
|
1440
|
+
"frameScale": 1.0 // No scaling
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1443
|
+
}
|
|
1444
|
+
```
|
|
1445
|
+
|
|
1446
|
+
#### Memory Issues with Large Batches
|
|
1447
|
+
|
|
1448
|
+
```bash
|
|
1449
|
+
# Reduce concurrency
|
|
1450
|
+
appshot build --concurrency 2
|
|
1451
|
+
|
|
1452
|
+
# Process in batches
|
|
1453
|
+
appshot build --devices iphone
|
|
1454
|
+
appshot build --devices ipad
|
|
1455
|
+
```
|
|
1456
|
+
|
|
1457
|
+
### Performance Tips
|
|
1458
|
+
|
|
1459
|
+
1. **Use appropriate concurrency**
|
|
1460
|
+
```bash
|
|
1461
|
+
# For 8GB RAM
|
|
1462
|
+
appshot build --concurrency 3
|
|
1463
|
+
|
|
1464
|
+
# For 16GB+ RAM
|
|
1465
|
+
appshot build --concurrency 8
|
|
1466
|
+
```
|
|
1467
|
+
|
|
1468
|
+
2. **Optimize images before processing**
|
|
1469
|
+
```bash
|
|
1470
|
+
# Use imagemagick to optimize
|
|
1471
|
+
mogrify -quality 95 screenshots/iphone/*.png
|
|
1472
|
+
```
|
|
1473
|
+
|
|
1474
|
+
3. **Cache translations**
|
|
1475
|
+
- Translations are automatically cached
|
|
1476
|
+
- Reuse improves speed and reduces costs
|
|
1477
|
+
|
|
1478
|
+
4. **Use preview mode for testing**
|
|
1479
|
+
```bash
|
|
1480
|
+
appshot build --preview
|
|
1481
|
+
```
|
|
1482
|
+
|
|
1483
|
+
### Error Messages
|
|
1484
|
+
|
|
1485
|
+
| Error | Cause | Solution |
|
|
1486
|
+
|-------|-------|----------|
|
|
1487
|
+
| `Frame not found` | Missing frame file | Run `appshot check --fix` |
|
|
1488
|
+
| `Invalid resolution` | Wrong dimensions | Check with `appshot validate` |
|
|
1489
|
+
| `Font validation failed` | Font not available | Use `appshot fonts` to find alternatives |
|
|
1490
|
+
| `API rate limit` | Too many requests | Add delays or reduce batch size |
|
|
1491
|
+
| `Out of memory` | Large images | Reduce concurrency or image size |
|
|
1492
|
+
|
|
1493
|
+
## π§βπ» Development
|
|
1494
|
+
|
|
1495
|
+
### Building from Source
|
|
1496
|
+
|
|
1497
|
+
```bash
|
|
1498
|
+
# Clone repository
|
|
1499
|
+
git clone https://github.com/chrisvanbuskirk/appshot.git
|
|
1500
|
+
cd appshot
|
|
1501
|
+
|
|
1502
|
+
# Install dependencies
|
|
1503
|
+
npm install
|
|
1504
|
+
|
|
1505
|
+
# Build TypeScript
|
|
1506
|
+
npm run build
|
|
1507
|
+
|
|
1508
|
+
# Run tests
|
|
1509
|
+
npm test
|
|
1510
|
+
|
|
1511
|
+
# Link for local development
|
|
1512
|
+
npm link
|
|
1513
|
+
|
|
1514
|
+
# Run in development mode
|
|
1515
|
+
npm run dev -- build --devices iphone
|
|
1516
|
+
```
|
|
1517
|
+
|
|
1518
|
+
### Project Structure
|
|
1519
|
+
|
|
1520
|
+
```
|
|
1521
|
+
appshot/
|
|
1522
|
+
βββ src/
|
|
1523
|
+
β βββ cli.ts # Entry point
|
|
1524
|
+
β βββ commands/ # Command implementations
|
|
1525
|
+
β βββ core/ # Core functionality
|
|
1526
|
+
β βββ services/ # Services (fonts, translation)
|
|
1527
|
+
β βββ types.ts # TypeScript definitions
|
|
1528
|
+
βββ tests/ # Test files
|
|
1529
|
+
βββ frames/ # Device frame images
|
|
1530
|
+
βββ examples/ # Example projects
|
|
1531
|
+
```
|
|
1532
|
+
|
|
1533
|
+
### Testing
|
|
1534
|
+
|
|
1535
|
+
Appshot includes comprehensive test coverage with unit tests, integration tests, and CI/CD validation.
|
|
1536
|
+
|
|
1537
|
+
#### Test Suites
|
|
1538
|
+
|
|
1539
|
+
- **Unit Tests** (50+ test files)
|
|
1540
|
+
- Device detection and frame selection
|
|
1541
|
+
- Gradient rendering and presets
|
|
1542
|
+
- Font validation and fallbacks
|
|
1543
|
+
- Caption positioning and text wrapping
|
|
1544
|
+
- Multi-language support
|
|
1545
|
+
- App Store specifications validation
|
|
1546
|
+
|
|
1547
|
+
- **Integration Tests** (`tests/integration/`)
|
|
1548
|
+
- Full CLI command testing
|
|
1549
|
+
- End-to-end workflow validation
|
|
1550
|
+
- Multi-platform compatibility
|
|
1551
|
+
- Error handling scenarios
|
|
1552
|
+
|
|
1553
|
+
- **CI/CD Testing**
|
|
1554
|
+
- Automated testing on every PR
|
|
1555
|
+
- Multi-OS testing (Ubuntu, macOS, Windows)
|
|
1556
|
+
- Multi-Node version testing (18.x, 20.x, 22.x)
|
|
1557
|
+
- Visual validation workflows
|
|
1558
|
+
- Screenshot artifact generation
|
|
1559
|
+
|
|
1560
|
+
```bash
|
|
1561
|
+
# Run all tests
|
|
1562
|
+
npm test
|
|
1563
|
+
|
|
1564
|
+
# Run specific test
|
|
1565
|
+
npm test -- fonts.test.ts
|
|
1566
|
+
|
|
1567
|
+
# Run integration tests
|
|
1568
|
+
npm test -- tests/integration/cli-integration.test.ts
|
|
1569
|
+
|
|
1570
|
+
# Watch mode
|
|
1571
|
+
npm run test:watch
|
|
1572
|
+
|
|
1573
|
+
# Run with coverage
|
|
1574
|
+
npm run test:coverage
|
|
1575
|
+
```
|
|
1576
|
+
|
|
1577
|
+
### Contributing
|
|
1578
|
+
|
|
1579
|
+
We welcome contributions! Please:
|
|
1580
|
+
|
|
1581
|
+
1. Fork the repository
|
|
1582
|
+
2. Create a feature branch
|
|
1583
|
+
3. Add tests for new features
|
|
1584
|
+
4. Ensure all tests pass
|
|
1585
|
+
5. Submit a pull request
|
|
1586
|
+
|
|
1587
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for details.
|
|
1588
|
+
|
|
1589
|
+
## πΊοΈ Roadmap
|
|
1590
|
+
|
|
1591
|
+
### Completed β
|
|
1592
|
+
- [x] Official App Store specifications
|
|
1593
|
+
- [x] Caption positioning (above/overlay)
|
|
993
1594
|
- [x] Partial frame support
|
|
994
1595
|
- [x] Intelligent caption autocomplete
|
|
995
1596
|
- [x] Apple Watch optimizations
|
|
996
1597
|
- [x] Gradient presets system (24+ gradients)
|
|
997
|
-
- [x]
|
|
998
|
-
- [
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
- [ ]
|
|
1002
|
-
- [ ]
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
- [ ]
|
|
1006
|
-
- [ ]
|
|
1007
|
-
- [ ]
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
- [
|
|
1012
|
-
- [
|
|
1013
|
-
|
|
1598
|
+
- [x] AI-Powered Translations (GPT-4o, GPT-5, o1, o3)
|
|
1599
|
+
- [x] Comprehensive Font System (v0.4.0)
|
|
1600
|
+
|
|
1601
|
+
### In Progress π§
|
|
1602
|
+
- [ ] MCP Integration Guide
|
|
1603
|
+
- [ ] Agent API Mode
|
|
1604
|
+
|
|
1605
|
+
### Planned π
|
|
1606
|
+
- [ ] Android Device Support (Google Play Store)
|
|
1607
|
+
- [ ] Batch Config Files
|
|
1608
|
+
- [ ] Screenshot Validation API
|
|
1609
|
+
- [ ] Auto-Caption Generation
|
|
1610
|
+
- [ ] Smart Frame Detection
|
|
1611
|
+
- [ ] Pipeline Mode
|
|
1612
|
+
- [ ] WebP/AVIF Support
|
|
1613
|
+
- [ ] Differential Builds
|
|
1614
|
+
|
|
1615
|
+
## π License & Support
|
|
1616
|
+
|
|
1617
|
+
### License
|
|
1618
|
+
|
|
1619
|
+
MIT Β© Chris Van Buskirk
|
|
1620
|
+
|
|
1621
|
+
### Support
|
|
1622
|
+
|
|
1623
|
+
- π [Report Issues](https://github.com/chrisvanbuskirk/appshot/issues)
|
|
1624
|
+
- π‘ [Request Features](https://github.com/chrisvanbuskirk/appshot/issues/new?labels=enhancement)
|
|
1625
|
+
- π [Documentation Wiki](https://github.com/chrisvanbuskirk/appshot/wiki)
|
|
1626
|
+
- π¬ [Discussions](https://github.com/chrisvanbuskirk/appshot/discussions)
|
|
1627
|
+
|
|
1628
|
+
### Security
|
|
1629
|
+
|
|
1630
|
+
For security vulnerabilities, please see [SECURITY.md](SECURITY.md).
|
|
1631
|
+
|
|
1632
|
+
### NPM Package
|
|
1633
|
+
|
|
1634
|
+
- π¦ [appshot-cli on NPM](https://www.npmjs.com/package/appshot-cli)
|
|
1635
|
+
- π Latest version: 0.4.0
|
|
1636
|
+
- β¬οΈ Weekly downloads: 
|
|
1637
|
+
|
|
1638
|
+
---
|
|
1639
|
+
|
|
1640
|
+
<div align="center">
|
|
1641
|
+
Built with β€οΈ for developers and AI agents who automate everything.
|
|
1642
|
+
</div>
|