diff --git a/README.md b/README.md index 4ae1fb4..b7852fa 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 diff --git a/src/commands/icon.ts b/src/commands/icon.ts index 49b9339..412001e 100644 --- a/src/commands/icon.ts +++ b/src/commands/icon.ts @@ -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 = { @@ -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 { @@ -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); @@ -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, diff --git a/src/utils/styleTemplates.ts b/src/utils/styleTemplates.ts index 1af485c..73873a7 100644 --- a/src/utils/styleTemplates.ts +++ b/src/utils/styleTemplates.ts @@ -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}`; } }