Skip to content

feat: added --prompt-only flag to preview final generated prompts without generating images #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dereknex wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: added --prompt-only flag to preview final generated prompts without generating images #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
893252f
feat: support --prompt-only flag
dereknex Dec 10, 2025
ba94431
docs: update readme
dereknex Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 67 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ snapai icon --prompt "minimalist weather app with sun and cloud"

## 🎨 Amazing Example Prompts

> [!NOTE]
> Want to see how these prompts look with different styles? Add `--prompt-only` to any command below to preview for free!

Try these proven prompts that create stunning icons:

```bash
Expand Down Expand Up @@ -94,6 +97,48 @@ snapai icon --prompt "modern Android app with Material Design floating action bu

### Generate Icons

#### Preview Prompts (No Generation)

Use `--prompt-only` to see the final enhanced prompt that will be sent to the AI model without generating images. Perfect for:

- Seeing how styles modify your prompt
- Debugging and refining prompts before paying for generation
- Understanding the iOS enhancement logic
- Testing different style combinations

```bash
# See the raw prompt (no enhancements)
snapai icon --prompt "calculator app with clean design" --prompt-only

# See how minimalism style enhances your prompt
snapai icon --prompt "calculator app" --style minimalism --prompt-only

# See the default iOS enhancement for app icons
snapai icon --prompt "modern fitness tracker" --prompt-only

# Compare different styles for the same concept
snapai icon --prompt "music player" --style glassy --prompt-only
snapai icon --prompt "music player" --style neon --prompt-only
snapai icon --prompt "music player" --style minimalism --prompt-only

# See the full configuration with model and size
snapai icon --prompt "banking app with secure lock" --style material --model gpt-image-1 --size 1024x1024 --prompt-only
```

**Example output:**
```
📝 Final Generated Prompt:

Create a full-bleed 1024x1024 px iOS app icon: banking app with secure lock. Use crisp, minimal design with vibrant colors. Add a subtle inner bevel for gentle depth; no hard shadows or outlines. Center the design with comfortable breathing room from the edges. Solid, light-neutral background. IMPORTANT: Fill the entire canvas edge-to-edge with the design, no padding, no margins. Design elements should be centered with appropriate spacing from edges but the background must cover 100% of the canvas. Add subtle depth with inner highlights, avoid hard shadows. Clean, minimal, Apple-style design. No borders, frames, or rounded corners.

🎨 Style: minimalism
Clean, simple lines with maximum 2-3 colors. Ultra-clean, Apple-inspired minimalism.

🤖 Model: gpt-image-1

📐 Size: 1024x1024
```

#### Basic Usage

```bash
Expand Down Expand Up @@ -196,6 +241,7 @@ snapai icon --prompt "edgy gaming app with dark theme and bold red accent colors
| `--moderation` | | `low`, `auto` | `auto` | Content filtering (gpt-image-1 only) |
| `--raw-prompt` | | boolean | `false` | Skip iOS enhancement |
| `--style` | | See style table below | _none_ | Icon design style |
| `--prompt-only` | | boolean | `false` | Output final prompt without generating images |


#### Model Comparison
Expand Down Expand Up @@ -336,6 +382,11 @@ snapai config --api-key YOUR_KEY # Set/update API key

```bash
# 💡 Cost-effective workflow
# 0. Preview prompts for FREE before paying
snapai icon --prompt "fitness app concept" --style minimalism --prompt-only
snapai icon --prompt "fitness app concept" --style glassy --prompt-only
snapai icon --prompt "fitness app concept" --style neon --prompt-only

# 1. Start with DALL-E 2 for quick iterations
snapai icon --prompt "modern fitness app icon concept with dumbbell and clean design" --model dall-e-2

Expand All @@ -354,18 +405,28 @@ snapai icon --prompt "final fitness app icon with professional dumbbell design a
```

> [!TIP]
> Use `--model dall-e-2` for testing, then `--model gpt-image-1` for style exploration and variations, and `--model dall-e-3 --quality hd` for production! Combine with `--style` for consistent visual identity.
> Use `--model dall-e-2` for testing, then `--model gpt-image-1` for style exploration and variations, and `--model dall-e-3 --quality hd` for production! Combine with `--style` for consistent visual identity. Use `--prompt-only` to preview and refine prompts for FREE before generating!

## 🚀 Advanced Usage

### CI/CD Integration

```bash
# Preview prompts in CI/CD pipelines before generation
npx snapai icon --prompt "$(cat icon-prompt.txt)" --prompt-only --style minimalism

# Perfect for automation with different models
npx snapai icon --prompt "$(cat icon-prompt.txt)" --output ./dist/icons --model gpt-image-1 --style minimalism

# Generate multiple formats for web
npx snapai icon --prompt "modern web logo with company branding and clean geometric design" --background transparent --output-format webp --output ./web-assets --style glassy

# Use in scripts to validate prompts
#!/bin/bash
PROMPT=$(cat icon-concept.txt)
echo "Testing prompt variations..."
npx snapai icon --prompt "$PROMPT" --style minimalism --prompt-only > prompts-minimal.txt
npx snapai icon --prompt "$PROMPT" --style glassy --prompt-only > prompts-glassy.txt
```

### Batch Generation
Expand All @@ -382,6 +443,11 @@ snapai icon --prompt "premium banner logo with glass-like elements and transluce
### Professional Workflow

```bash
# 0. Prompt Design & Preview (FREE)
snapai icon --prompt "fitness app with dumbbell" --style minimalism --prompt-only
snapai icon --prompt "fitness app with dumbbell" --style glassy --prompt-only
snapai icon --prompt "fitness app with dumbbell" --style neon --prompt-only

# 1. Concept phase - quick & cheap
snapai icon --prompt "modern fitness app icon concept with dumbbell and clean geometric design" --model dall-e-2 --num-images 5

Expand Down
55 changes: 55 additions & 0 deletions src/commands/icon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export default class IconCommand extends Command {
'<%= config.bin %> <%= command.id %> --prompt "calculator app" --style minimalism',
'<%= config.bin %> <%= command.id %> --prompt "music player" --style glassy',
'<%= config.bin %> <%= command.id %> --prompt "weather app" --style neon',
"",
// Prompt-only options
'<%= config.bin %> <%= command.id %> --prompt "calculator app" --style minimalism --prompt-only',
'<%= config.bin %> <%= command.id %> --prompt "music player" --raw-prompt --prompt-only',
];

static flags = {
Expand Down Expand Up @@ -108,6 +112,12 @@ export default class IconCommand extends Command {
description: "Icon style: minimalism, glassy, woven, geometric, neon, gradient, flat, material, ios-classic, android-material",
options: StyleTemplates.getAvailableStyles(),
}),

// === Output Options ===
"prompt-only": Flags.boolean({
description: "Output the final prompt without generating images",
default: false,
}),
};

public async run(): Promise<void> {
Expand All @@ -120,6 +130,36 @@ export default class IconCommand extends Command {
this.error(promptError);
}

// If prompt-only mode, output prompt and return
if (flags["prompt-only"]) {
const finalPrompt = this.generateFinalPrompt(flags);

this.log(chalk.blue("📝 Final Generated Prompt:"));
this.log("");
this.log(finalPrompt);
this.log("");

if (flags.style) {
this.log(chalk.blue(`🎨 Style: ${flags.style}`));
this.log(chalk.gray(` ${StyleTemplates.getStyleDescription(flags.style as any)}`));
}

if (flags.model) {
this.log(chalk.blue(`🤖 Model: ${flags.model}`));
}

if (flags.size) {
this.log(chalk.blue(`📐 Size: ${flags.size}`));
}

if (flags["raw-prompt"]) {
this.log(chalk.yellow("⚠️ Using raw prompt (no style enhancement)"));
}

return;
}

// Validate output path for image generation
const outputError = ValidationService.validateOutputPath(flags.output);
if (outputError) {
this.error(outputError);
Expand Down Expand Up @@ -185,6 +225,21 @@ export default class IconCommand extends Command {
}
}

private generateFinalPrompt(flags: any): string {
const { prompt, size = "1024x1024", style } = flags;
const rawPrompt = flags["raw-prompt"];

// Use either raw prompt, style-enhanced prompt, or default iOS prompt
if (rawPrompt) {
return prompt;
} else if (style) {
return StyleTemplates.getStylePrompt(prompt, style, size);
} else {
// Default iOS prompt (backward compatibility)
return `Create a full-bleed ${size} px iOS app icon: ${prompt}.Use crisp, minimal design with vibrant colors. Add a subtle inner bevel for gentle depth; no hard shadows or outlines. Center the design with comfortable breathing room from the edges. Solid, light-neutral background. IMPORTANT: Fill the entire canvas edge-to-edge with the design, no padding, no margins. Design elements should be centered with appropriate spacing from edges but the background must cover 100% of the canvas. Add subtle depth with inner highlights, avoid hard shadows. Clean, minimal, Apple-style design. No borders, frames, or rounded corners.`;
}
}

private async saveBase64Images(
base64DataArray: string[],
outputDir: string,
Expand Down
36 changes: 20 additions & 16 deletions src/utils/styleTemplates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
export type IconStyle = 'minimalism' | 'glassy' | 'woven' | 'geometric' | 'neon' | 'gradient' | 'flat' | 'material' | 'ios-classic' | 'android-material' | 'pixel' | 'game' | 'clay' | 'holographic';

export class StyleTemplates {
private static readonly baseRules = `Single icon symbol fills 96–98% of the 1024x1024 canvas (no padding, no inset, no margins). No container, no rounded-square tile, no app plate, no border, no outline, no drop shadow, no outer glow, no bevel, no emboss, no inner shadow. Crisp, sharp, professional composition.`;
static getBaseRules(size: string = '1024x1024'): string {
const sizeNum = size === 'auto' ? 1024 : parseInt(size.split('x')[0]);
return `Single icon symbol fills 96–98% of the ${sizeNum}x${sizeNum} canvas (no padding, no inset, no margins). No container, no rounded-square tile, no app plate, no border, no outline, no drop shadow, no outer glow, no bevel, no emboss, no inner shadow. Crisp, sharp, professional composition.`;
}

static getStylePrompt(userPrompt: string, style: IconStyle, size: string = '1024x1024'): string {
const sizeNum = size === 'auto' ? 1024 : parseInt(size.split('x')[0]);
const baseRules = this.getBaseRules(size);

switch (style) {
case 'minimalism':
return `Create a ${sizeNum}x${sizeNum} minimalist app icon: ${userPrompt}. ${this.baseRules} Use clean, simple lines with maximum 2-3 colors. Focus on essential shapes only. White or very light background. Ultra-clean, Apple-inspired minimalism.`;
return `Create a ${sizeNum}x${sizeNum} minimalist app icon: ${userPrompt}. ${baseRules} Use clean, simple lines with maximum 2-3 colors. Focus on essential shapes only. White or very light background. Ultra-clean, Apple-inspired minimalism.`;

case 'glassy':
return `Create a ${sizeNum}x${sizeNum} glassy app icon: ${userPrompt}. ${this.baseRules} Use glass-like, semi-transparent elements with soft color blending where elements overlap. Subtle gradients and translucent effects. Modern, premium glass aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} glassy app icon: ${userPrompt}. ${baseRules} Use glass-like, semi-transparent elements with soft color blending where elements overlap. Subtle gradients and translucent effects. Modern, premium glass aesthetic.`;

case 'woven':
return `Create a ${sizeNum}x${sizeNum} woven/fabric app icon: ${userPrompt}. ${this.baseRules} Use textile-inspired patterns with woven textures, soft fabric-like gradients, and organic flowing lines. Warm, tactile materials aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} woven/fabric app icon: ${userPrompt}. ${baseRules} Use textile-inspired patterns with woven textures, soft fabric-like gradients, and organic flowing lines. Warm, tactile materials aesthetic.`;

case 'geometric':
return `Create a ${sizeNum}x${sizeNum} geometric app icon: ${userPrompt}. ${this.baseRules} Use only geometric shapes: circles, squares, triangles, hexagons. Bold, angular compositions with high contrast colors. Mathematical precision and symmetry.`;
return `Create a ${sizeNum}x${sizeNum} geometric app icon: ${userPrompt}. ${baseRules} Use only geometric shapes: circles, squares, triangles, hexagons. Bold, angular compositions with high contrast colors. Mathematical precision and symmetry.`;

case 'neon':
return `Create a ${sizeNum}x${sizeNum} neon app icon: ${userPrompt}. ${this.baseRules} Use electric neon colors (cyan, magenta, yellow, green) with glowing effects. Dark background with bright neon outlines. Cyberpunk, futuristic aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} neon app icon: ${userPrompt}. ${baseRules} Use electric neon colors (cyan, magenta, yellow, green) with glowing effects. Dark background with bright neon outlines. Cyberpunk, futuristic aesthetic.`;

case 'gradient':
return `Create a ${sizeNum}x${sizeNum} gradient app icon: ${userPrompt}. ${this.baseRules} Use smooth, vibrant gradients as the primary design element. Multiple color transitions creating depth and visual interest. Modern, Instagram-inspired aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} gradient app icon: ${userPrompt}. ${baseRules} Use smooth, vibrant gradients as the primary design element. Multiple color transitions creating depth and visual interest. Modern, Instagram-inspired aesthetic.`;

case 'flat':
return `Create a ${sizeNum}x${sizeNum} flat design app icon: ${userPrompt}. ${this.baseRules} Use flat design principles: solid colors, no gradients, no shadows, no 3D effects. Clean, modern, Microsoft-inspired flat design.`;
return `Create a ${sizeNum}x${sizeNum} flat design app icon: ${userPrompt}. ${baseRules} Use flat design principles: solid colors, no gradients, no shadows, no 3D effects. Clean, modern, Microsoft-inspired flat design.`;

case 'material':
return `Create a ${sizeNum}x${sizeNum} Material Design app icon: ${userPrompt}. ${this.baseRules} Use Google Material Design principles: bold colors, geometric shapes, subtle shadows, and depth. Android-optimized design language.`;
return `Create a ${sizeNum}x${sizeNum} Material Design app icon: ${userPrompt}. ${baseRules} Use Google Material Design principles: bold colors, geometric shapes, subtle shadows, and depth. Android-optimized design language.`;

case 'ios-classic':
return `Create a ${sizeNum}x${sizeNum} classic iOS app icon: ${userPrompt}. ${this.baseRules} Use traditional iOS design: subtle gradients, soft shadows, rounded elements, and Apple's signature color palette. Timeless iOS aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} classic iOS app icon: ${userPrompt}. ${baseRules} Use traditional iOS design: subtle gradients, soft shadows, rounded elements, and Apple's signature color palette. Timeless iOS aesthetic.`;

case 'android-material':
return `Create a ${sizeNum}x${sizeNum} Android Material app icon: ${userPrompt}. ${this.baseRules} Use Android Material Design 3: dynamic colors, adaptive icons, geometric shapes, and modern Android styling.`;
return `Create a ${sizeNum}x${sizeNum} Android Material app icon: ${userPrompt}. ${baseRules} Use Android Material Design 3: dynamic colors, adaptive icons, geometric shapes, and modern Android styling.`;

case 'pixel':
return `Create a ${sizeNum}x${sizeNum} pixel art app icon: ${userPrompt}. ${this.baseRules} Use pixel-perfect, retro 8-bit/16-bit game art style. Sharp, blocky pixels with limited color palette. Nostalgic gaming aesthetic with clear pixel boundaries.`;
return `Create a ${sizeNum}x${sizeNum} pixel art app icon: ${userPrompt}. ${baseRules} Use pixel-perfect, retro 8-bit/16-bit game art style. Sharp, blocky pixels with limited color palette. Nostalgic gaming aesthetic with clear pixel boundaries.`;

case 'game':
return `Create a ${sizeNum}x${sizeNum} gaming app icon: ${userPrompt}. ${this.baseRules} Use vibrant, energetic gaming aesthetics with bold colors, dynamic compositions, and playful elements. Modern mobile game icon style with high contrast and engaging visuals.`;
return `Create a ${sizeNum}x${sizeNum} gaming app icon: ${userPrompt}. ${baseRules} Use vibrant, energetic gaming aesthetics with bold colors, dynamic compositions, and playful elements. Modern mobile game icon style with high contrast and engaging visuals.`;

case 'clay':
return `Create a ${sizeNum}x${sizeNum} clay/plasticine app icon: ${userPrompt}. ${this.baseRules} Use soft, malleable clay-like textures with organic, handcrafted appearance. Soft shadows, rounded edges, and tactile material feel. Playful, child-friendly aesthetic.`;
return `Create a ${sizeNum}x${sizeNum} clay/plasticine app icon: ${userPrompt}. ${baseRules} Use soft, malleable clay-like textures with organic, handcrafted appearance. Soft shadows, rounded edges, and tactile material feel. Playful, child-friendly aesthetic.`;

case 'holographic':
return `Create a ${sizeNum}x${sizeNum} holographic app icon: ${userPrompt}. ${this.baseRules} Use iridescent, rainbow-shifting colors with metallic finishes and prismatic effects. Futuristic, high-tech aesthetic with light refraction and dimensional depth.`;
return `Create a ${sizeNum}x${sizeNum} holographic app icon: ${userPrompt}. ${baseRules} Use iridescent, rainbow-shifting colors with metallic finishes and prismatic effects. Futuristic, high-tech aesthetic with light refraction and dimensional depth.`;

default:
return `Create a ${sizeNum}x${sizeNum} app icon: ${userPrompt}. ${this.baseRules}`;
return `Create a ${sizeNum}x${sizeNum} app icon: ${userPrompt}. ${baseRules}`;
}
}

Expand Down