feat(linkedin): add MCP image pipeline to carousel command

Add Step 5.5 (Generate Slide Images) using mcp-image Nano Banana Pro.
Each slide is generated with template-specific styling at 3:4 aspect
ratio. Graceful degradation: if mcp-image unavailable, falls back to
text-only output with manual design guide (existing behavior).

- mcp__mcp-image__generate_image added to allowed-tools
- Template-aware visual styles (5 templates → 5 visual directions)
- Images saved to assets/drafts/carousel-[date]-[slug]/
- Step 6 branches: generated images → publish instructions, no images → design guide
- Removed interactive AskUserQuestion from refinement (friction reduction)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen 2026-04-10 15:49:35 +02:00
commit aca312ea57

View file

@ -117,9 +117,56 @@ Run against the Carousel Quality Checklist from `carousel-templates.md`:
If any item fails, fix before presenting.
## Step 5.5: Generate Slide Images
Generate a visual for each slide using mcp-image (Nano Banana Pro). If mcp-image is unavailable or fails, skip this step — the command degrades gracefully to text-only output with a manual design guide.
1. **Create output directory:**
```bash
mkdir -p assets/drafts/carousel-$(date +%Y%m%d)-SLUG
```
Replace SLUG with a short kebab-case version of the carousel topic (e.g., `ai-governance`).
2. **Determine consistent style** based on the chosen template:
- How-To Guide: Clean numbered layout, light accent color per step, white background
- Listicle: Card-style with icon area, soft gradient background
- Story / Before-After: Cinematic dark gradient backgrounds
- Comparison: Split-screen layout, contrasting color halves
- Framework: Diagram-style with connected elements, dark blue background
3. **For each slide (1 through N),** call `mcp__mcp-image__generate_image` with:
- **prompt:** `"Professional LinkedIn carousel slide. [TEMPLATE STYLE from above]. Background: [consistent color scheme across all slides]. Bold header text: '[SLIDE HEADER]' in large white sans-serif font near the top. Body text below: '[SLIDE BODY lines]' in smaller matching font. Slide [N] of [TOTAL]. Portrait orientation, clean minimal professional design."`
- **aspect_ratio:** `"3:4"` (closest available to LinkedIn's 4:5)
- **output_path:** `assets/drafts/carousel-[date]-[slug]/slide-[N].png`
4. **After all slides are generated,** verify the output directory contains the expected number of images:
```bash
ls -la assets/drafts/carousel-$(date +%Y%m%d)-SLUG/
```
**On failure:** If any mcp-image call fails, log the error and continue with remaining slides. If ALL calls fail, fall back to the text-only design guide in Step 6.
## Step 6: Present Complete Deck
Show all slides in order, then the caption, then design guidance:
Show all slides in order with their text content, then the caption.
**If slide images were generated (Step 5.5 succeeded):**
```
SLIDE IMAGES
━━━━━━━━━━━━
Generated [N] slide images in assets/drafts/carousel-[date]-[slug]/
To publish:
1. Download the slide images from the folder above
2. Combine into a single PDF (or upload images directly)
3. Upload to LinkedIn as a document post
4. Paste the caption below into the post text
Dimensions: ~896×1200 (3:4) — LinkedIn auto-fits to 4:5 display
```
**If slide images were NOT generated (Step 5.5 skipped/failed):**
```
DESIGN GUIDE
@ -140,7 +187,8 @@ printf '%s' '<CAROUSEL_CAPTION>' | node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/clip
```
Then confirm: "Caption copied to clipboard."
Use AskUserQuestion: "Want to refine any slides, or is this ready for design?"
Offer refinement options as text (no interactive prompt):
"Want to refine? Options: adjust slide text / change visual style / regenerate specific slide / different hook / ready for publishing."
## Step 7: State Update