ad-designer

# Ad Designer Generate professional image ad creatives for Meta/social campaigns using AI image generation. > **Portability note:** Originally a VPS slash-command. Two host-specific references: output path `~/clawd/output/...` (substitute any writable project/output dir on your host) and the `message action=send ...` delivery tool (substitute your environment's file-send/attach mechanism, or just hand back the saved file path). The generation logic is host-agnostic. ## Single-voice craft (do NOT parallelize) One creative = one coherent visual voice. Do **not** fan out a brief across parallel agents — concept, composition, copy placement, and palette must come from a single hand, or the result looks like a committee collage. Iterate one image at a time (generate → review → refine), never branch into competing versions in parallel and stitch them. If the user wants A/B variants, produce them **sequentially**, each fully realized in its own voice, then label them — don't blend. Craft upgrades (apply every time): 1. **One focal idea per frame.** Decide the single thing the eye lands on first (the price, the claim, the hook line). Everything else is subordinate. If two elements fight for attention, kill or demote one. 2. **Type as the design.** For text-led ads, hierarchy *is* the layout: one dominant line (the payload), supporting lines smaller and lower-contrast. Name exact weights/sizes/colors in the prompt; never leave the model to guess hierarchy. 3. **Brand-true palette, restrained.** Pull 1 accent + 1 neutral from the brand guidelines; resist adding a third color "for interest." Restraint reads as premium; clutter reads as stock. ## Model **Nano Banana 2** (`gemini-3.1-flash-image-preview`) - State-of-the-art image generation and editing - Good text rendering for ad copy - Supports multiple aspect ratios ## Prerequisites - `GEMINI_API_KEY` in environment - Brand guidelines (colors, fonts, voice) — ideally from `/website_brand_analysis` - Creative brief (ad concept, copy, target audience) ## Aspect Ratios Always specify aspect ratio in the prompt. Common Meta ad formats: | Ratio | Dimensions | Use Case | Prompt Keyword | |-------|------------|----------|----------------| | 1:1 | 1080×1080 | Feed (universal) | "square image" | | 4:5 | 1080×1350 | Feed (recommended) | "4:5 vertical image" | | 9:16 | 1080×1920 | Stories/Reels | "9:16 vertical image" | | 16:9 | 1920×1080 | Landscape | "16:9 landscape image" | **Default to 1:1** unless brief specifies otherwise — it works everywhere. ## Prompt Engineering ### Critical Rules 1. **Be explicit about exclusions:** ``` NO logos. NO brand names. NO company names. NO watermarks. NO additional text. ``` 2. **Specify exact text:** ``` The ONLY text on the image should be exactly: [your text here] ``` 3. **Keep prompts focused:** - Don't overload with too many instructions - Separate layout from content from style 4. **Include aspect ratio:** ``` Generate a square 1:1 image... ``` ### Prompt Template ``` Generate a [aspect ratio] image. [Background/setting description] [Text content - be explicit:] The ONLY text should be exactly: - Line 1: "[text]" in [color] [size] - Line 2: "[text]" in [color] [size] [Visual elements - icons, mockups, etc.] Style: [clean/minimal/warm/professional/etc.] NO logos. NO brand names. NO watermarks. NO additional elements. ``` ### Example Prompts **Price Anchor Ad:** ``` Generate a square image. White background. Clean typography only, no decorations, no logos, no icons, no borders, no frames. The ONLY text on the image should be exactly: Line 1 (small gray): What companies pay €10,000 to train their teams... Line 2 (large navy blue): You can learn for €249 Line 3 (small gray): AI Operator Course — 10 hours to AI proficiency. The €249 should be in gold/yellow color. Nothing else. No brand names. No additional elements. ``` **Native/Organic Creative:** ``` Generate a square photograph of a notebook page. Warm lighting. Cream colored lined paper. Handwritten text in black ink pen that says EXACTLY: The AI tools dont matter. The workflows do. Most people chase the next tool. Operators master the fundamentals. Draw a hand-drawn red circle around the word workflows. Coffee cup visible at edge. NO logos. NO brand names. NO watermarks. Just the notebook with handwritten text. ``` **Tutorial Carousel Hook:** ``` Generate a square image. Light cream/yellow background. Navy blue bold text that says EXACTLY: How to summarize any meeting in 30 seconds with AI Center the text. Include a simple video call icon below the text. NO logos. NO brand names. NO company names. NO watermarks. Clean minimal design. ``` ## API Usage ```bash curl -s "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent?key=$GEMINI_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "contents": [{ "parts": [{ "text": "YOUR_PROMPT_HERE" }] }], "generationConfig": { "responseModalities": ["image", "text"] } }' | jq -r '.candidates[0].content.parts[0].inlineData.data' | base64 -d > output.png ``` ## Workflow ### 1. Receive Brief Get creative brief with: - Ad concept (price anchor, native, tutorial, etc.) - Exact copy/text - Target aspect ratio - Brand colors (if applicable) - Reference images (if any) ### 2. Construct Prompt Build prompt using template above. Key points: - Start with aspect ratio - Be explicit about exact text - End with exclusions (NO logos, etc.) ### 3. Generate Image Run API call, save to output folder: ``` ~/clawd/output/{project}-{ad-type}-{version}.png ``` ### 4. Review Before Sending ⚠️ **ALWAYS review generated images before sending to user.** Check for: - [ ] Text is correct (no garbled words) - [ ] No hallucinated logos or brand names - [ ] No unexpected elements - [ ] Aspect ratio looks correct - [ ] Overall quality is acceptable Use the `Read` tool to view the image: ``` Read file_path=/path/to/image.png ``` ### 5. Iterate if Needed If image has issues: - Simplify the prompt - Be more explicit about exclusions - Try regenerating (results vary) ### 6. Deliver Send via message tool with descriptive caption: ``` message action=send filePath=/path/to/image.png caption="🎨 Ad Name (1:1) ✓ Reviewed" ``` ## Common Issues & Fixes | Issue | Cause | Fix | |-------|-------|-----| | Hallucinated logos | Model fills "empty" space | Add "NO logos. NO brand names." explicitly | | Garbled text | Too many text instructions | Simplify, use fewer lines | | Wrong aspect ratio | Not specified clearly | Start prompt with "Generate a square/4:5/etc image" | | Extra decorations | Over-specified design | Add "no decorations, no borders, no frames" | | Generic stock look | Vague prompt | Add specific style cues (warm lighting, minimal, etc.) | ## Ad Types ### 1. Native/Organic Creative - Looks like user content, not an ad - Notebook, whiteboard, screenshot styles - Text-heavy, minimal design - Works great for TOFU ### 2. Price Anchor - Clean typography on white/simple background - Comparison format (expensive vs affordable) - Bold price in accent color - Works great for MOFU ### 3. Tutorial/Value Bomb - Instructional design - Step badges, mockups - Educational feel - Works for TOFU (carousel format) ### 4. Testimonial/Social Proof - Quote format - Photo or avatar (if provided) - Company logos (if permitted) - Works for MOFU/BOFU ### 5. Bold Claim - Single powerful statement - Minimal design, maximum impact - Brand colors - Works for awareness ## Integration This skill works with: - `/campaign_planner` — Provides creative briefs - `/creative_director` — Orchestrates asset creation - `/website_brand_analysis` — Provides brand guidelines ## Output Save images to: ``` ~/clawd/output/{project}-{ad-type}-v{N}.png ``` Examples: - `{brand}-hero-v1.png` - `{brand}-price-anchor-v2.png` - `{brand}-carousel-1-v1.png` ## Output contract Every run delivers, explicitly: 1. **The image file** — saved PNG at the output path, correct aspect ratio for the placement. 2. **The exact prompt used** — so the result is reproducible and tweakable. 3. **The review verdict** — pass/fail against the checklist below, with the specific issue named if it failed. 4. **Delivery** — the file path (and the send action if the host supports it), captioned with name + ratio + "✓ Reviewed". Never report an image as delivered without having actually viewed it (step 4 / Review). ## VERIFY (mandatory before "done") Re-open the generated PNG with the `Read` tool and confirm — citing what you see, not what you intended: - [ ] Rendered text matches the brief **character-for-character** (no garbled, dropped, or invented words) - [ ] **No hallucinated logos, brand names, watermarks, or stray UI** the brief didn't ask for - [ ] No unrequested decorations / borders / frames - [ ] Aspect ratio matches the target placement - [ ] Palette stays within the brand accent + neutral (no third color crept in) - [ ] Overall quality is ship-grade, not generic-stock **No-hallucination guardrail:** the model invents text and logos to fill space — treat every generation as guilty until the viewed pixels prove otherwise. If any checkbox fails, regenerate with a tighter, more explicit prompt; do **not** hand off a failing image with a hopeful caption. A claim of "reviewed" with no actual `Read` of the file is a regression.