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