Make the AI image prompt model-authored (img.ai_prompt), deterministic as fallback

Thumbnail design is offer design, not a market measurement — so the model now
authors a rich image prompt per gig (scenes/metaphors an image model can render
but the canvas can't) while assembling gig-config.json. SKILL.md Step 6 sets
the guardrails: exact quoted text strings, 1280x769, accent-consistent, no
watermarks/unquoted text, and never credibility claims that aren't supplied
(no invented "Top Rated"/review counts). The catalog prefers img.ai_prompt and
falls back to the deterministic canvas-mirror composer when absent. 81 tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Ahad690

USER_MANUAL.md

@@ -90,9 +90,12 @@ claude plugin validate .
    **`fiverr-catalog.html`**. Open it in a browser: each gig has a thumbnail,
    copy buttons for title/description/tags, a PNG download, and the launch plan.
    Prefer an AI-generated thumbnail instead? Each gig also includes a
-   **copy-ready AI image prompt** (under the thumbnail) describing the same
-   design brief — paste it into ChatGPT/DALL·E/Midjourney and use that image
-   in place of the built-in PNG.
+   **copy-ready AI image prompt** (under the thumbnail) — written by the model
+   alongside your titles and descriptions, so it can describe a richer scene or
+   visual metaphor than the flat canvas design. Paste it into
+   ChatGPT/DALL·E/Midjourney and use that image in place of the built-in PNG.
+   (Configs without an authored prompt fall back to a deterministic one that
+   mirrors the canvas design.)
 
 That's the whole loop — no key, no setup.
 

skills/fiverr-gig-optimizer/SKILL.md

@@ -95,6 +95,19 @@ titles/tags/descriptions (lint rules in the playbook), pick phases and
 cross-sells, set per-gig thumbnail accent from the palette. The `competition`,
 `scores`, and `pricing` blocks are the script outputs — do not alter them.
 
+Also author `img.ai_prompt` for each gig — a rich prompt for an AI image model
+(ChatGPT/DALL·E/Midjourney), offered in the catalog as an alternative to the
+canvas PNG. Thumbnail design is offer design, so be creative here: describe a
+distinctive scene, composition, or visual metaphor suited to the service (an
+isometric workflow, a stylized robot at a desk, glowing pipeline nodes…) —
+not just flat text on a gradient. Requirements: specify 1280×769 landscape;
+quote the exact headline/badge strings that must appear and say "spelled
+exactly as written"; keep it consistent with the gig's accent color; forbid
+watermarks, logos, and any unquoted text. Never put claims in the image that
+aren't true of the seller (no "Top Rated", review counts, or client numbers
+unless supplied). If you skip `ai_prompt`, the catalog falls back to a
+deterministic prompt mirroring the canvas design.
+
 **Step 7 — Render (FR14/FR15).**
 `build_catalog.py gig-config.json` → `fiverr-catalog.html`. Optionally
 `build_pdfs.py gig-config.json` for per-gig PDFs (skips if no Chrome).

skills/fiverr-gig-optimizer/scripts/build_catalog.py

@@ -3,8 +3,11 @@
 
 Reads a gig-config.json (§7.2) and writes a single fiverr-catalog.html with:
   - canvas thumbnails (1280x769) drawn from each gig's img block
-  - a copy-ready AI image-generation prompt per gig (same design brief as the
-    canvas, for users who prefer ChatGPT/DALL-E/Midjourney over the built-in PNG)
+  - a copy-ready AI image-generation prompt per gig, for users who prefer
+    ChatGPT/DALL-E/Midjourney over the built-in PNG. Primary source is the
+    model-authored ``img.ai_prompt`` (written with the rest of the gig copy —
+    it can describe scenes/compositions the canvas can't draw); when absent,
+    a deterministic composer mirrors the canvas design as a fallback.
   - copy-to-clipboard buttons for title / description / tags
   - per-gig PNG download (from the canvas)
   - a cross-sell map and a phase-based action plan
@@ -118,10 +121,11 @@
 function copy(text,btn){ navigator.clipboard.writeText(text).then(()=>{
   const o=btn.textContent; btn.textContent='Copied!'; setTimeout(()=>btn.textContent=o,1200); }); }
 
-// Compose an AI image-generation prompt describing the SAME design the canvas
-// draws (deterministic — built only from the gig's own img block, no invention).
-// For users who prefer generating the thumbnail with ChatGPT/DALL-E/Midjourney
-// instead of downloading the canvas PNG.
+// FALLBACK image prompt: mirrors the flat canvas design, built only from the
+// gig's own img block. The PRIMARY path is gig.img.ai_prompt — authored by the
+// model while assembling gig-config.json (thumbnail design is offer design,
+// so creative freedom is allowed there; an image model can render scenes the
+// canvas can't). This composer covers configs that lack ai_prompt.
 function aiPrompt(gig){
   const img = gig.img || {};
   const accent = img.accent || '#06b6d4';
@@ -188,7 +192,9 @@
     <p class="desc">${(gig.desc||'').replace(/</g,'&lt;')}</p>`;
   app.appendChild(el);
   draw(document.getElementById('cv'+gig.id), gig.img||{});
-  const prompt = aiPrompt(gig);
+  // Prefer the model-authored prompt (richer: scenes/metaphors an image model
+  // can render); fall back to the deterministic canvas-mirror when absent.
+  const prompt = (gig.img && gig.img.ai_prompt) ? gig.img.ai_prompt : aiPrompt(gig);
   document.getElementById('pp'+gig.id).textContent = prompt;
   document.getElementById('cp'+gig.id).onclick=e=>copy(prompt,e.target);
   document.getElementById('ct'+gig.id).onclick=e=>copy(gig.title||'',e.target);

tests/test_build_catalog.py

@@ -50,15 +50,36 @@ def test_ai_prompt_ui_present(self):
         self.assertIn("aiPrompt(", self.html)
         self.assertIn("ChatGPT / DALL·E / Midjourney", self.html)
 
-    def test_prompt_composed_from_gig_img_block_only(self):
-        # The composer must reference the img fields and thumbnail spec…
+    def test_fallback_prompt_composed_from_gig_img_block(self):
+        # No ai_prompt in CONFIG -> the deterministic fallback composer is used;
+        # it must reference the img fields and thumbnail spec…
         for needle in ("1280x769", "img.headline", "img.badge", "img.tools",
                        "img.accent", "spelled exactly as written"):
             self.assertIn(needle, self.html)
         # …and the gig's real data must be in the embedded CONFIG for it to use.
         self.assertIn("FAST DELIVERY", self.html)
         self.assertIn("n8n + OpenAI", self.html)
 
+    def test_model_authored_ai_prompt_takes_priority(self):
+        cfg = json.loads(json.dumps(CONFIG))
+        cfg["gigs"][0]["img"]["ai_prompt"] = (
+            "An isometric 3D scene of a friendly robot assembling chat bubbles "
+            'on a conveyor belt, headline "AI CHATBOT" spelled exactly as written, '
+            "1280x769 landscape, teal #06b6d4 accent, no watermarks."
+        )
+        cfg_path = os.path.join(self.dir, "gig-config2.json")
+        out = os.path.join(self.dir, "catalog2.html")
+        with open(cfg_path, "w", encoding="utf-8") as fh:
+            json.dump(cfg, fh)
+        r = subprocess.run([sys.executable, SCRIPT, cfg_path, "--out", out],
+                           capture_output=True, text=True)
+        self.assertEqual(r.returncode, 0, r.stderr)
+        with open(out, encoding="utf-8") as fh:
+            html = fh.read()
+        # The authored prompt is embedded, and the renderer prefers it.
+        self.assertIn("isometric 3D scene of a friendly robot", html)
+        self.assertIn("gig.img.ai_prompt", html)
+
 
 if __name__ == "__main__":
     unittest.main()