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.
Files changed (51) hide show
  1. package/README.md +1343 -714
  2. package/dist/cli.js +7 -1
  3. package/dist/cli.js.map +1 -1
  4. package/dist/commands/build.d.ts.map +1 -1
  5. package/dist/commands/build.js +11 -4
  6. package/dist/commands/build.js.map +1 -1
  7. package/dist/commands/doctor.d.ts +3 -0
  8. package/dist/commands/doctor.d.ts.map +1 -0
  9. package/dist/commands/doctor.js +67 -0
  10. package/dist/commands/doctor.js.map +1 -0
  11. package/dist/commands/fonts.d.ts +3 -0
  12. package/dist/commands/fonts.d.ts.map +1 -0
  13. package/dist/commands/fonts.js +384 -0
  14. package/dist/commands/fonts.js.map +1 -0
  15. package/dist/commands/migrate.d.ts +3 -0
  16. package/dist/commands/migrate.d.ts.map +1 -0
  17. package/dist/commands/migrate.js +123 -0
  18. package/dist/commands/migrate.js.map +1 -0
  19. package/dist/commands/specs.d.ts.map +1 -1
  20. package/dist/commands/specs.js +61 -46
  21. package/dist/commands/specs.js.map +1 -1
  22. package/dist/commands/style.d.ts.map +1 -1
  23. package/dist/commands/style.js +92 -1
  24. package/dist/commands/style.js.map +1 -1
  25. package/dist/core/app-store-specs.d.ts +2 -0
  26. package/dist/core/app-store-specs.d.ts.map +1 -1
  27. package/dist/core/app-store-specs.js +2 -0
  28. package/dist/core/app-store-specs.js.map +1 -1
  29. package/dist/core/compose.d.ts +4 -0
  30. package/dist/core/compose.d.ts.map +1 -1
  31. package/dist/core/compose.js +102 -9
  32. package/dist/core/compose.js.map +1 -1
  33. package/dist/services/doctor.d.ts +35 -0
  34. package/dist/services/doctor.d.ts.map +1 -0
  35. package/dist/services/doctor.js +439 -0
  36. package/dist/services/doctor.js.map +1 -0
  37. package/dist/services/fonts.d.ts +71 -0
  38. package/dist/services/fonts.d.ts.map +1 -0
  39. package/dist/services/fonts.js +314 -0
  40. package/dist/services/fonts.js.map +1 -0
  41. package/dist/types/exec.d.ts +5 -0
  42. package/dist/types/exec.d.ts.map +1 -0
  43. package/dist/types/exec.js +2 -0
  44. package/dist/types/exec.js.map +1 -0
  45. package/dist/types.d.ts +2 -0
  46. package/dist/types.d.ts.map +1 -1
  47. package/dist/utils/language.d.ts +32 -0
  48. package/dist/utils/language.d.ts.map +1 -0
  49. package/dist/utils/language.js +103 -0
  50. package/dist/utils/language.js.map +1 -0
  51. package/package.json +1 -1
package/README.md CHANGED
@@ -1,1013 +1,1642 @@
1
1
  # Appshot πŸ“Έ
2
2
 
3
- > πŸŽ‰ **Now available on NPM!** Install with `npm install -g appshot-cli`
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
  [![CI](https://github.com/chrisvanbuskirk/appshot/actions/workflows/ci.yml/badge.svg)](https://github.com/chrisvanbuskirk/appshot/actions/workflows/ci.yml)
8
6
  [![npm version](https://badge.fury.io/js/appshot-cli.svg)](https://www.npmjs.com/package/appshot-cli)
9
7
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
10
8
 
11
- ## Features
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
- - 🎨 **Gradients** - Beautiful gradient backgrounds with customizable colors
15
- - ✏️ **Captions** - Add marketing text with full typography control (above or overlay)
16
- - 🌍 **Localization** - Multi-language support with AI-powered translations for international app stores
17
- - πŸ“± **Multi-Device** - Support for iPhone, iPad, Mac, Apple TV, Vision Pro, and Apple Watch
18
- - πŸ“ **App Store Specs** - Built-in support for all official App Store screenshot resolutions
19
- - βœ… **Validation** - Verify screenshots meet App Store requirements
20
- - πŸ”„ **Orientation Detection** - Intelligently handles both portrait and landscape screenshots
21
- - ⚑ **Fast** - Parallel processing with configurable concurrency
22
- - πŸ€– **AI Translation** - Real-time and batch translation using OpenAI models (GPT-4o, GPT-5, o1, o3)
23
- - πŸ› οΈ **CLI** - Simple command-line interface designed for agents and automation
24
-
25
- ## Quick Start
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 still `appshot`
88
+ > **Note**: The package is called `appshot-cli` on NPM, but the command is `appshot`
34
89
 
35
- ### Initialize a new project
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
- This creates:
42
- - `.appshot/config.json` - Main configuration file
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
- ### Add your screenshots
101
+ # 3. Add captions interactively
102
+ appshot caption --device iphone
47
103
 
48
- Place your app screenshots in the appropriate device folders:
49
- ```
50
- screenshots/
51
- β”œβ”€β”€ iphone/
52
- β”œβ”€β”€ ipad/
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
- ### Add captions
110
+ # ✨ Output ready in final/ directory!
111
+ ```
58
112
 
59
- Use the interactive caption editor with autocomplete:
113
+ ### Example Output Structure
60
114
 
61
- ```bash
62
- appshot caption --device iphone
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
- Features:
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
- ### Build final screenshots
129
+ ### Project Structure
72
130
 
73
- Generate your App Store-ready screenshots:
131
+ Appshot uses a simple, predictable directory structure:
74
132
 
75
- ```bash
76
- appshot build
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
- Output appears in the `final/` directory, ready for upload!
80
-
81
- ## Configuration
149
+ ### Configuration Overview
82
150
 
83
- Edit `.appshot/config.json` to customize your screenshots:
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": ["#FF5733", "#FFC300"],
91
- "direction": "top-bottom"
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
- "align": "center",
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
- ### Gradient Options
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
- - **colors**: Array of hex color codes
114
- - **direction**: `top-bottom`, `bottom-top`, `left-right`, `right-left`, `diagonal`
183
+ ## 🎨 Visual Customization
115
184
 
116
- #### Using Gradient Presets
185
+ ### Gradient System
117
186
 
118
- Instead of manually configuring gradients, you can use one of the 24+ built-in presets:
187
+ Appshot includes 24+ professional gradient presets organized by category:
188
+
189
+ #### Browse & Apply Gradients
119
190
 
120
191
  ```bash
121
- # Browse available gradients
192
+ # View all gradients with color preview
122
193
  appshot gradients
123
194
 
124
- # Apply a preset
195
+ # Apply a gradient to your project
125
196
  appshot gradients --apply sunset
126
197
 
127
- # Interactive selection with visual preview
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 samples of all gradients
204
+ # Create sample gallery
134
205
  appshot gradients --sample
135
206
  ```
136
207
 
137
- ##### Available Presets by Category
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
- Options:
201
- - `--force` - Overwrite existing files
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
- ### `appshot caption`
204
- Interactively add or edit captions for screenshots with intelligent autocomplete and AI-powered translation.
217
+ #### Custom Gradients
205
218
 
206
- Features:
207
- - **Autocomplete suggestions** - Shows previous captions as you type
208
- - **Fuzzy search** - Finds captions even with typos
209
- - **Usage tracking** - Frequently used captions appear first
210
- - **Learning system** - Improves suggestions over time
211
- - **Device-specific** - Prioritizes captions used for the same device
212
- - **Real-time translation** - Instantly translate captions as you type (requires OpenAI API key)
219
+ ```json
220
+ {
221
+ "gradient": {
222
+ "colors": ["#FF5733", "#FFC300", "#FF1493"],
223
+ "direction": "diagonal" // top-bottom, left-right, diagonal
224
+ }
225
+ }
226
+ ```
213
227
 
214
- Options:
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
- Example with translation:
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
- # Use a specific model for translation
227
- appshot caption --device iphone --translate --langs zh-CN,ja --model gpt-5
228
- ```
232
+ #### Font Commands
229
233
 
230
- Keyboard shortcuts:
231
- - **Tab** - Autocomplete the top suggestion
232
- - **↑↓** - Navigate through suggestions
233
- - **Enter** - Select current suggestion
234
- - **Esc** - Dismiss suggestions
234
+ ```bash
235
+ # Browse recommended fonts
236
+ appshot fonts
235
237
 
236
- ### `appshot gradients`
237
- Browse, preview, and apply gradient presets for stunning backgrounds.
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
- # Filter by category
264
- appshot gradients --category warm
241
+ # Interactive font selection (NEW in v0.4.0)
242
+ appshot fonts --select
265
243
 
266
- # Preview a specific gradient (creates gradient-sunset.png)
267
- appshot gradients --preview sunset
244
+ # Set device-specific font (NEW in v0.4.0)
245
+ appshot fonts --set "SF Pro" --device iphone
268
246
 
269
- # Apply a gradient to your project
270
- appshot gradients --apply ocean
247
+ # List ALL system fonts
248
+ appshot fonts --all
271
249
 
272
- # Interactive selection with arrow keys
273
- appshot gradients select
250
+ # Validate a font
251
+ appshot fonts --validate "SF Pro"
274
252
 
275
- # Generate samples for all gradients (creates gradient-samples/ directory)
276
- appshot gradients --sample
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
- #### How Gradient Presets Work
257
+ #### Font Setting Methods
281
258
 
282
- 1. **Browsing** - The `gradients` command displays all presets with:
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
- 2. **Previewing** - Generate a sample image to see exactly how a gradient looks:
261
+ 1. **Direct Command** (Fastest):
289
262
  ```bash
290
- appshot gradients --preview neon
291
- # Creates: gradient-neon.png (400x800px)
263
+ appshot fonts --set "Helvetica"
264
+ appshot fonts --set "SF Pro" --device iphone
292
265
  ```
293
266
 
294
- 3. **Applying** - Updates your `.appshot/config.json` automatically:
267
+ 2. **Interactive Selection**:
295
268
  ```bash
296
- appshot gradients --apply twilight
297
- # Updates gradient.colors and gradient.direction in config
269
+ appshot fonts --select
270
+ appshot style --device iphone # Also includes font selection
298
271
  ```
299
272
 
300
- 4. **Sample Generation** - Creates a gallery of all gradients:
301
- ```bash
302
- appshot gradients --sample
303
- # Creates: gradient-samples/
304
- # β”œβ”€β”€ sunset.png
305
- # β”œβ”€β”€ ocean.png
306
- # β”œβ”€β”€ neon.png
307
- # └── preview.html (view all in browser)
308
- ```
309
-
310
- 5. **Interactive Selection** - Visual menu for choosing gradients:
311
- ```bash
312
- appshot gradients select
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
- ### `appshot style`
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
- ### `appshot specs`
348
- Display device specifications and resolutions.
290
+ Every font automatically includes appropriate fallback chains:
349
291
 
350
- ### `appshot clean`
351
- Remove generated screenshots and temporary files.
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
- Options:
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
- Options:
360
- - `--device <name>` - Filter by device type
361
- - `--json` - Output as JSON
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
- ### `appshot check`
364
- Validate project configuration and assets.
302
+ ### Device Frames
365
303
 
366
- Options:
367
- - `--fix` - Attempt to fix issues automatically
304
+ #### Smart Frame Selection
368
305
 
369
- ### `appshot presets`
370
- Manage App Store screenshot presets for all official resolutions.
306
+ Appshot automatically detects screenshot orientation and selects the appropriate frame:
371
307
 
372
- Options:
373
- - `--list` - List all available presets
374
- - `--required` - Show only required presets for App Store submission
375
- - `--generate <ids>` - Generate config for specific preset IDs (comma-separated)
376
- - `--category <type>` - Filter by category (iphone, ipad, mac, appletv, visionpro, watch)
377
- - `--output <file>` - Output file for generated config (default: appshot-presets.json)
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
- ### `appshot validate`
380
- Validate screenshots against App Store requirements.
319
+ #### Partial Frames
381
320
 
382
- Options:
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
- ### `appshot localize`
387
- Generate translations for all existing captions using OpenAI's powerful language models.
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
- Options:
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
- Supported models:
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
- Example usage:
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
- # Translate iPhone captions only, with review
409
- appshot localize --device iphone --langs ja,ko --review
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
- # Use GPT-5 for higher quality translations
412
- appshot localize --langs zh-CN,zh-TW --model gpt-5
357
+ #### Caption Autocomplete
413
358
 
414
- # Overwrite existing translations with new ones
415
- appshot localize --langs es,fr --overwrite
416
- ```
359
+ The caption command includes intelligent autocomplete:
417
360
 
418
- Setup:
419
361
  ```bash
420
- # Set your OpenAI API key
421
- export OPENAI_API_KEY="your-api-key-here"
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
- ## AI-Powered Translation πŸ€–
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 includes powerful AI translation capabilities using OpenAI's latest models, including GPT-4o, GPT-5, and reasoning models (o1, o3).
380
+ Appshot integrates with OpenAI for instant caption translation.
427
381
 
428
- ### Setup
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
- ### Real-Time Translation
436
-
437
- Translate captions instantly as you type them:
388
+ #### Real-Time Translation
438
389
 
439
390
  ```bash
440
- # Add captions with automatic translation to Spanish and French
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
- When you enter a caption, translations appear immediately below:
448
- ```
449
- ? home.png: Welcome to the future
450
- es: Bienvenido al futuro
451
- fr: Bienvenue dans le futur
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
- ### Batch Translation
455
-
456
- Translate all existing captions at once:
401
+ #### Batch Translation
457
402
 
458
403
  ```bash
459
- # Translate all captions to multiple languages
404
+ # Translate all existing captions
460
405
  appshot localize --langs es,fr,de,ja,zh-CN
461
406
 
462
- # Translate specific device only
407
+ # Device-specific translation
463
408
  appshot localize --device iphone --langs es,fr
464
409
 
465
- # Review translations before saving
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
- Appshot intelligently handles different OpenAI models and their specific requirements:
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
- #### GPT-4o Series (General Purpose)
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
- #### GPT-5 Series (Advanced)
483
- - **Models**: `gpt-5`, `gpt-5-mini`, `gpt-5-nano`
484
- - **Best for**: High-quality, nuanced translations
485
- - **Parameter**: Uses `max_completion_tokens`
486
- - **Temperature**: Fixed at 1.0 (reasoning model requirement)
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
- #### o1 Series (Deep Reasoning)
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
- #### o3 Series (Latest Reasoning)
495
- - **Models**: `o3`, `o3-mini`
496
- - **Best for**: State-of-the-art translation quality
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
- ### Language Support
440
+ # 2. Build localized screenshots
441
+ appshot build --langs en,es,fr
501
442
 
502
- Built-in support for 25+ languages:
503
- - **European**: Spanish (es), French (fr), German (de), Italian (it), Portuguese (pt), Dutch (nl), Swedish (sv), Norwegian (no), Danish (da), Finnish (fi), Polish (pl), Russian (ru)
504
- - **Asian**: Japanese (ja), Korean (ko), Simplified Chinese (zh-CN), Traditional Chinese (zh-TW), Hindi (hi), Thai (th), Vietnamese (vi), Indonesian (id), Malay (ms)
505
- - **Middle Eastern**: Arabic (ar), Hebrew (he), Turkish (tr)
506
- - **Portuguese Variants**: Brazilian Portuguese (pt-BR)
443
+ # Output structure (always uses language subdirectories):
444
+ # final/
445
+ # iphone/
446
+ # en/
447
+ # es/
448
+ # fr/
449
+ ```
507
450
 
508
- ### Translation Features
451
+ ## πŸ“± Device Support
509
452
 
510
- #### Smart Caching
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
- #### Marketing-Optimized Prompts
514
- The system uses specialized prompts designed for app marketing text:
515
- - Maintains marketing tone and impact
516
- - Keeps translations concise
517
- - Ensures cultural appropriateness
518
- - Preserves call-to-action strength
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
- #### Error Handling
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
- ### Advanced Configuration
466
+ #### Required Resolutions
527
467
 
528
- Create `.appshot/ai-config.json` for custom settings:
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
- ```json
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
- ### Cost Optimization Tips
475
+ **Mac**:
476
+ - 16:10 aspect: 2880Γ—1800, 2560Γ—1600, 1440Γ—900, or 1280Γ—800
540
477
 
541
- 1. **Use `gpt-4o-mini`** for draft translations (very cost-effective)
542
- 2. **Enable caching** to avoid retranslating identical text
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
- ### Example Workflow
481
+ #### Preset Management
547
482
 
548
483
  ```bash
549
- # 1. Initialize project
550
- appshot init
551
-
552
- # 2. Add screenshots
553
- cp ~/Desktop/screenshots/*.png screenshots/iphone/
484
+ # View all presets
485
+ appshot presets
554
486
 
555
- # 3. Add captions with instant translation
556
- appshot caption --device iphone --translate --langs es,fr,de
487
+ # Show required only
488
+ appshot presets --required
557
489
 
558
- # 4. Build localized screenshots
559
- appshot build --langs en,es,fr,de
490
+ # Generate config for specific presets
491
+ appshot presets --generate iphone-6-9,ipad-13
560
492
 
561
- # Output structure:
562
- # final/
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
- ## Multi-Language Support
497
+ ### Validation
575
498
 
576
- Captions are stored with all translations in JSON format:
499
+ ```bash
500
+ # Validate against App Store requirements
501
+ appshot validate
577
502
 
578
- ```json
579
- {
580
- "home.png": {
581
- "en": "Organize your life",
582
- "fr": "Organisez votre vie",
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
- Build for specific languages:
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 --langs en,fr,es
517
+ appshot build [options]
594
518
  ```
595
519
 
596
- ## App Store Specifications
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
- Appshot includes all official App Store screenshot resolutions. View them with:
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
- # Show all presets
602
- appshot presets
540
+ # Build all devices
541
+ appshot build
603
542
 
604
- # Show only required presets
605
- appshot presets --required
543
+ # Specific devices and languages
544
+ appshot build --devices iphone,ipad --langs en,fr,es
606
545
 
607
- # Generate config for specific devices
608
- appshot presets --generate iphone-6-9,ipad-13,mac-2880,watch-ultra
609
- ```
546
+ # Use App Store presets
547
+ appshot build --preset iphone-6-9-portrait,ipad-13-landscape
610
548
 
611
- ### Required Resolutions
549
+ # Preview mode
550
+ appshot build --preview --devices iphone
551
+ ```
612
552
 
613
- **iPhone** (choose one):
614
- - **6.9" Display**: 1290Γ—2796 (iPhone 16 Pro Max, 15 Pro Max, etc.)
615
- - **6.5" Display**: 1284Γ—2778 (iPhone 14 Plus, 13 Pro Max, etc.)
553
+ **Exit Codes:**
554
+ - `0` - Success
555
+ - `1` - Configuration error
556
+ - `2` - Missing screenshots
557
+ - `3` - Processing error
616
558
 
617
- **iPad** (required):
618
- - **13" Display**: 2064Γ—2752 or 2048Γ—2732
559
+ ### `appshot caption`
619
560
 
620
- **Mac** (for Mac apps):
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
- **Apple Watch** (for Watch apps):
624
- - **Ultra**: 410Γ—502
625
- - **Series 10**: 416Γ—496
626
- - **Series 9/8/7**: 396Γ—484
563
+ ```bash
564
+ appshot caption --device <name> [options]
565
+ ```
627
566
 
628
- ### Quick Preset Usage
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
- # Build with iPhone 6.9" and iPad 13" presets
632
- appshot build --preset iphone-6-9,ipad-13
576
+ # Basic caption entry
577
+ appshot caption --device iphone
633
578
 
634
- # Validate existing screenshots
635
- appshot validate --strict
636
- ```
579
+ # With translation
580
+ appshot caption --device iphone --translate --langs es,fr,de
637
581
 
638
- ## Examples
582
+ # Custom model
583
+ appshot caption --device ipad --translate --langs ja --model gpt-5
584
+ ```
639
585
 
640
- See the `examples/minimal-project` directory for a complete example setup.
586
+ ### `appshot check`
641
587
 
642
- ## Development
588
+ Validate project configuration and assets.
643
589
 
644
590
  ```bash
645
- # Clone the repository
646
- git clone https://github.com/chrisvanbuskirk/appshot.git
647
- cd appshot
591
+ appshot check [options]
592
+ ```
648
593
 
649
- # Install dependencies
650
- npm install
594
+ **Options:**
595
+ - `--fix` - Attempt automatic fixes
651
596
 
652
- # Build
653
- npm run build
597
+ **Checks:**
598
+ - Configuration file validity
599
+ - Screenshot presence
600
+ - Frame availability
601
+ - Directory structure
602
+ - Caption files
654
603
 
655
- # Run tests
656
- npm test
604
+ ### `appshot clean`
657
605
 
658
- # Link for local development
659
- npm link
660
- ```
606
+ Remove generated files and temporary data.
661
607
 
662
- ## Contributing
608
+ ```bash
609
+ appshot clean [options]
610
+ ```
663
611
 
664
- We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.
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
- ## Security
618
+ **Examples:**
619
+ ```bash
620
+ # Clean output only
621
+ appshot clean
667
622
 
668
- For security issues, please see [SECURITY.md](SECURITY.md).
623
+ # Full reset
624
+ appshot clean --all --yes
669
625
 
670
- ## License
626
+ # Clear history
627
+ appshot clean --history
628
+ ```
671
629
 
672
- MIT Β© Chris Van Buskirk
630
+ ### `appshot doctor`
673
631
 
674
- ## Advanced Features
632
+ Run comprehensive system diagnostics to verify appshot installation and dependencies.
675
633
 
676
- ### Smart Frame Selection
634
+ ```bash
635
+ appshot doctor [options]
636
+ ```
677
637
 
678
- Appshot automatically detects whether your screenshots are portrait or landscape and selects the appropriate device frame:
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
- - **iPhone screenshots** automatically use portrait frames for vertical shots and landscape frames for horizontal ones
681
- - **iPad screenshots** work seamlessly in both orientations
682
- - **Mac screenshots** always use landscape frames
683
- - **Watch screenshots** always use portrait frames
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
- Override automatic selection with `preferredFrame` in your device configuration.
650
+ **Examples:**
651
+ ```bash
652
+ # Run all diagnostics
653
+ appshot doctor
686
654
 
687
- ### Partial Frames
655
+ # Check specific categories
656
+ appshot doctor --category system,dependencies
688
657
 
689
- Create dynamic App Store screenshots with partial device frames in `.appshot/config.json`:
658
+ # JSON output for CI
659
+ appshot doctor --json
690
660
 
691
- ```json
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
- ### Caption Positioning
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
- ### Dynamic Caption Box System
669
+ System Requirements:
670
+ βœ“ Node.js v20.5.0 (minimum: v18.0.0)
671
+ βœ“ npm v9.8.0
672
+ βœ“ darwin (macOS)
717
673
 
718
- Appshot features an intelligent caption system that automatically adapts to your content and device positioning:
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
- #### How It Works
680
+ Summary: 20 passed, 1 warning, 0 errors
721
681
 
722
- 1. **Automatic Text Wrapping** - Long captions automatically wrap to multiple lines based on available width
723
- 2. **Dynamic Height Calculation** - Caption area expands or contracts based on:
724
- - Text content length
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
- #### Configuration
686
+ ### `appshot fonts`
733
687
 
734
- Global caption box settings in `.appshot/config.json`:
688
+ Browse, validate, and set fonts for captions.
735
689
 
736
- ```json
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
- Device-specific overrides:
752
-
753
- ```json
754
- {
755
- "devices": {
756
- "iphone": {
757
- "captionBox": {
758
- "autoSize": true,
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
- #### Examples
703
+ **Examples:**
704
+ ```bash
705
+ # Browse recommended fonts
706
+ appshot fonts
774
707
 
775
- **Long Caption Handling:**
776
- - Input: "This is a very long caption that needs multiple lines to display properly"
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
- **Device Position Impact:**
780
- - `framePosition: "top"` β†’ Caption gets ~400px height
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
- **Best Practices:**
785
- - Keep captions concise (under 100 characters)
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
- ### Device-Specific Styling
717
+ # Validate before setting
718
+ appshot fonts --validate "My Font" && appshot fonts --set "My Font"
791
719
 
792
- Use the `appshot style` command or configure directly in `.appshot/config.json`:
720
+ # List all system fonts
721
+ appshot fonts --all
793
722
 
794
- ```json
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
- ### Achieving Consistent Device Positioning
727
+ ### `appshot gradients`
821
728
 
822
- ⚠️ **Important**: Caption sizing can affect device frame positioning and size. Here's how to achieve perfectly consistent screenshots:
729
+ Manage gradient presets.
823
730
 
824
- #### The Problem
731
+ ```bash
732
+ appshot gradients [options]
733
+ appshot gradients select
734
+ ```
825
735
 
826
- By default, appshot uses dynamic caption sizing which causes:
827
- - **Variable device sizes** - Longer captions = smaller devices
828
- - **Variable device positions** - Caption height affects vertical placement
829
- - **Inconsistent layouts** - Each screenshot looks different
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
- #### The Solution: Fixed Layout Configuration
743
+ **Examples:**
744
+ ```bash
745
+ # Browse all
746
+ appshot gradients
832
747
 
833
- To ensure all screenshots have identical device size and position regardless of caption length:
748
+ # Apply preset
749
+ appshot gradients --apply ocean
834
750
 
835
- ```json
836
- {
837
- "devices": {
838
- "iphone": {
839
- "autoFrame": false, // Disable auto frame selection
840
- "preferredFrame": "iphone-16-pro-max-portrait", // Use specific frame
841
- "frameScale": 0.85, // Lock device at 85% size
842
- "framePosition": 40, // Position at 40% from top
843
- "captionBox": {
844
- "autoSize": false, // CRITICAL: Disable auto-sizing
845
- "minHeight": 320, // CRITICAL: Set fixed height
846
- "maxHeight": 320 // CRITICAL: Same as minHeight
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
- #### Key Settings Explained
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
- 1. **`autoFrame: false`** - Disables automatic frame selection
856
- - Use with `preferredFrame` to specify exact device frame
857
- - Ensures consistent frame across all screenshots
816
+ **Examples:**
817
+ ```bash
818
+ # Translate all
819
+ appshot localize --langs es,fr,de
858
820
 
859
- 2. **`frameScale`** - Controls device size (0.5 to 2.0)
860
- - Set explicitly to lock device size
861
- - Without this, device scales based on available space
821
+ # Device-specific
822
+ appshot localize --device iphone --langs ja,ko
862
823
 
863
- 3. **`framePosition`** - Vertical positioning (0-100 or "top"/"center"/"bottom")
864
- - Number = percentage from top of available space
865
- - Keeps device at consistent height
824
+ # Premium model with review
825
+ appshot localize --langs zh-CN --model gpt-5 --review
826
+ ```
866
827
 
867
- 4. **`captionBox.autoSize: false`** - Disables dynamic caption sizing
868
- - MUST be false for consistent layouts
869
- - Default is true (adapts to content)
828
+ ### `appshot presets`
870
829
 
871
- 5. **`minHeight` = `maxHeight`** - Forces exact caption height
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
- #### Complete Example for Consistent iPhone Screenshots
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": ["#FF5733", "#FFC300"],
881
- "direction": "top-bottom"
959
+ "colors": ["#hex1", "#hex2"],
960
+ "direction": "top-bottom" // or diagonal, left-right
882
961
  },
883
962
  "caption": {
884
- "fontsize": 64,
963
+ "font": "Font Name",
964
+ "fontsize": 64, // Pixels
885
965
  "color": "#FFFFFF",
886
- "align": "center",
887
- "paddingTop": 100
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": false,
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
- With this configuration:
909
- - βœ… All devices are exactly the same size
910
- - βœ… All devices are at the same vertical position
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
- #### Interactive Styling
1062
+ Appshot is built for automation:
916
1063
 
917
- Run `appshot style --device iphone` for step-by-step configuration:
918
- 1. **Partial Frame** - Choose whether to cut off device bottom
919
- 2. **Frame Offset** - Select how much to cut (15%, 25%, 35%, 50%, or custom)
920
- 3. **Frame Position** - Set vertical position (top, center, bottom, or 0-100%)
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
- #### Reset Styling
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
- appshot style --device iphone --reset
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
- ## Agent-First Design πŸ€–
1087
+ ### Exit Codes
932
1088
 
933
- Appshot is designed to work seamlessly with LLM agents and automation tools. The CLI interface is structured for predictable, scriptable operations that agents can easily control.
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
- ### Working with AI Agents
1098
+ ### Batch Operations
936
1099
 
937
- - **Structured Commands** - All commands have consistent, predictable outputs
938
- - **JSON Support** - Most commands support `--json` output for agent parsing
939
- - **Error Codes** - Consistent exit codes for automation workflows
940
- - **File-Based Config** - Agents can modify `.appshot/config.json` directly
941
- - **Batch Operations** - Process multiple devices/languages in single commands
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
- ### MCP (Model Context Protocol) Integration
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
- Appshot works perfectly with MCP screenshot tools:
1146
+ #### Shell Script Automation
946
1147
 
947
1148
  ```bash
948
- # Agent takes screenshot via MCP
949
- mcp-screenshot capture --app "MyApp" --output ./screenshots/iphone/home.png
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
- # Agent processes with appshot
1165
+ # Build
952
1166
  appshot build --devices iphone
1167
+
1168
+ # Validate
1169
+ appshot validate --strict || exit 1
953
1170
  ```
954
1171
 
955
- ### Agent Workflow Example
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
- # Example: Agent automating screenshot generation
959
- def generate_app_store_screenshots():
960
- # 1. Agent captures screenshots from simulator/device
961
- run_command("xcrun simctl io booted screenshot screen1.png")
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
- # 2. Agent initializes appshot project
964
- run_command("appshot init")
1199
+ with open('.appshot/config.json', 'w') as f:
1200
+ json.dump(config, f)
965
1201
 
966
- # 3. Agent configures styling
967
- modify_json(".appshot/config.json", {
968
- "gradient": {"colors": ["#FF5733", "#FFC300"]},
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
- # 4. Agent adds captions programmatically
973
- modify_json(".appshot/captions/iphone.json", {
974
- "screen1.png": "Your perfect companion"
975
- })
1206
+ # Build
1207
+ result = subprocess.run(
1208
+ ['appshot', 'build', '--devices', device],
1209
+ capture_output=True,
1210
+ text=True
1211
+ )
976
1212
 
977
- # 5. Agent builds final screenshots
978
- run_command("appshot build --devices iphone")
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
- ### Why CLI-Only?
1323
+ ### Brand Guidelines Compliance
982
1324
 
983
- - **Predictable** - Agents need consistent, scriptable interfaces
984
- - **Composable** - Integrates with any automation pipeline
985
- - **Version Control** - All config is text files, perfect for Git
986
- - **Fast** - No UI overhead, pure processing power
987
- - **Universal** - Works on any system with Node.js
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
- ## Roadmap
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
- - [x] Official App Store specifications support
992
- - [x] Caption positioning (above/overlay)
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] **AI-Powered Translations** - Translate captions using OpenAI models (GPT-4o, GPT-5, o1, o3)
998
- - [ ] **MCP Integration Guide** - Documentation for screenshot tool integration
999
- - [ ] **Agent API Mode** - Structured JSON input/output for all commands
1000
- - [ ] **Android Device Support** - Google Play Store specifications
1001
- - [ ] **Batch Config Files** - Process multiple configurations in one run
1002
- - [ ] **Screenshot Validation API** - Programmatic validation for CI/CD
1003
- - [ ] **Auto-Caption Generation** - Use AI to generate marketing captions from screenshots
1004
- - [ ] **Smart Frame Detection** - AI-powered frame selection based on screenshot content
1005
- - [ ] **Pipeline Mode** - Stream processing for large batches
1006
- - [ ] **WebP/AVIF Support** - Modern image formats for smaller files
1007
- - [ ] **Differential Builds** - Only rebuild changed screenshots
1008
-
1009
- ## Support
1010
-
1011
- - [Report issues](https://github.com/chrisvanbuskirk/appshot/issues)
1012
- - [Request features](https://github.com/chrisvanbuskirk/appshot/issues/new?labels=enhancement)
1013
- - [Documentation](https://github.com/chrisvanbuskirk/appshot/wiki)
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: ![npm](https://img.shields.io/npm/dw/appshot-cli)
1637
+
1638
+ ---
1639
+
1640
+ <div align="center">
1641
+ Built with ❀️ for developers and AI agents who automate everything.
1642
+ </div>