x-slideshow-generator

X (Twitter) Portrait Slideshow & 20-Image Carousel Generator

Step 0. Steer Weak Prompts Out of AI Poster Slop (Mandatory First Gate)

Users often give short, lazy prompts ("make an X carousel on how to do SEO", "why $9 ramen beats $45 pasta", "SpaceX Starship catch"). Left unsteered, image models default to AI infographic slop: screaming ALL-CAPS YouTube-thumbnail fonts, paint-brush splatters behind prices, slanted sport-drink ribbons, glowing sci-fi HUD bars, cartoon browser windows, waxy HDR CGI food/rockets, and "The secret isn't X — it's Y" copy.

Before planning slides, read references/anti-slop.md and lock one restrained human editorial system for the whole deck:

• Swiss Print Grid (Stripe Press, Monocle): matte warm paper #F5F3EE, carbon ink #141413, 1 signal accent (#D9381E vermilion, #1D4ED8 cobalt, or #0F766E forest), 1px #D6D3CD hairlines, sentence-case type, >= 40% open paper. (Essays, food, travel, books, playbooks)
• FT / Bloomberg Data Journalism: salmon #FFF1E5 or cool newsprint #F2F4F7, #111827 ink, flat 2D charts with direct value labels, tabular numerals, quiet source footer. (Markets, benchmarks, pricing, news)
• Minimal Product UI (Linear, Vercel): flat #0B0C0E carbon or #F7F7F8 cool stone, 1px subtle border, real pixel-exact UI crops via placeImages, sentence-case geometric sans. (SaaS, dev tools, GitHub repos, SEO teardowns)
• Industrial Spec Sheet (Dieter Rams, Teenage Engineering): matte #ECEAE4 grey, #111111 ink, #EA580C Braun orange, plain monospace 01 / 07 index (no pill border), clean orthographic hardware/diagram. (Aerospace, hardware, silicon, science)

The Three Hard Restraint Invariants

1. Max 3 elements per slide + >= 35% flat open whitespace: (1) quiet plain-text index/kicker (01 / 07 without a pill border), (2) clean sentence-case headline + at most 1 short sentence (<= 20 words total, set in a solid paper/ink band — never over busy photo midtones), and (3) one real focal visual. Never stack a hero illustration + browser frame + pointer callout + bottom HUD bar on one card.
2. Every slide carries concrete visual proof — never text-only dark cards, and never cartoon AI mockups:

   What is this slide about?
   ├── A site, repo, pricing page, status page, doc, or article with a public URL
   │   → screenshotUrl = that URL, framed in a minimal 1px hairline border (no cartoon macOS
   │     traffic lights). After render, paste exact pixels with genppt_revise_slides(placeImages).
   ├── A named company, model, app, or tool (Stripe, OpenAI, Claude, Bun, SpaceX...)
   │   → visual names its official wordmark and palette explicitly; imageUrl when you have a clean asset.
   ├── A number, trend, or comparison
   │   → flat 2D bar, line, or slope chart with direct value labels, units, and a quiet source line.
   ├── A real person (founder, executive, public figure, historical portrait)
   │   → imageUrl = Wikimedia Commons or official press portrait, on this slide only.
   └── A physical place, dish, or object
       → imageUrl of a real press/editorial photo, else unsplashQuery ONLY for a real place/environment
         (concrete noun phrase, <=120 chars); omit unsplashQuery on historical objects, inventions,
         3D books, or diagrams so GenPPT illustrates them cleanly on a matte surface.
   

3. Copy & visual anti-slop blocklist:
   • Copy: Zero em dashes (—) or spaced en dashes (–). Ban "isn't X, it's Y", "The secret isn't...", "Hits Harder", "The Real X:", "X's Counterpunch:", "What X Proves", "Brutal Truths", and "a first in history" tail puffery. State every number once per slide (never echo headline figures in adjacent pill badges or bottom summary tickers, and never write "9-Line Setup" above 4 lines of code with blank lines 6–9).
   • Visuals: Ban ALL-CAPS shouting headlines, paint-brush price splatters, slanted italic ribbons, sticker callouts, sci-fi HUD bars, glassmorphism pills, dark edge vignettes, waxy HDR CGI textures, and fake volumetric steam/fire/bokeh.

Step 1. Choose Format & Slide Count

What kind of X visual post is the user making?
├── Editorial / Educational Breakdown (how-to, teardown, SEO/AI/product playbook)
│   ├── Aspect ratio → 4:5 (portrait)
│   └── Slide count → 6–10 slides (never pad thin material; expand to 11–20 only when the source has 11–20 distinct items)
├── Visual Spec Series / Design Teardown / Gallery
│   ├── Aspect ratio → 3:4 or 4:5 (portrait)
│   └── Slide count → exact item count requested, up to 20
└── Compact 2×2 Data Snapshot (4 tight comparison cards)
    ├── Aspect ratio → 1:1 (square)
    └── Slide count → 4 slides

• Never exceed 20 slides for a single X post (X caps single-post attachments at 20).
• Default to 4:5 portrait whenever unspecified (25% more mobile vertical viewport than 1:1).

Step 2. Choreograph the Feed Preview Grid

X renders multi-image posts as a 2-up or 2×2 preview grid in the timeline before tap-through.

• Slide 1 + Slide 2 are your side-by-side billboard on a 390px phone screen:
  • Slide 1 (Specific Claim + Focal Proof): Sentence-case headline (<= 8 words) stating a concrete mechanism, number, or outcome in a clean top band above the strongest real visual (live UI crop, documentary photo, or clean studio object).
  • Slide 2 (Immediate Evidence): A flat 2D chart, crisp live webpage screenshot, or side-by-side comparison proving Slide 1's claim.
• Standalone Screenshot Invariant: Every middle slide makes complete sense if screenshot and quote-tweeted out of context. Use a quiet 2-word plain-text kicker (03 / 08 · LATENCY) at top-left without pill borders.
• Hard copy ceiling: 20 visible words per slide. One idea per slide. Keep exact figures ($412k, 30.5%, 0.008 ms) verbatim from the source.

Step 3. Gather Visual Assets (Mandatory Before Rendering)

1. List every entity and source in the deck: products, companies, repos, articles, places.
2. Verify public URLs: open or check each homepage, pricing page, GitHub repo, status page, or primary article to confirm it loads logged out without a login wall.
3. Assign assets cleanly:
   • websiteUrls (deck-level, max 6): key public pages to screenshot live.
   • slides[].screenshotUrl: the exact page that slide cites.
   • slides[].imageUrl: a direct public image URL you have verified (never guess URLs).
   • Real people (slides[].imageUrl only): pass a Wikimedia Commons (https://upload.wikimedia.org/...) or press portrait on that single slide only — never in referenceImageUrls and never from text alone.
   • slides[].unsplashQuery: only for real places, architecture, landscapes, or generic environments. Omit on historical objects, metaphors, 3D books, and charts.
   • referenceImageUrls (max 20): deck-wide brand logos/marks only.

Step 4. Write Restrained visual Prompts and artDirection

visual formula (3 elements max, every slide): [flat matte surface & whitespace split] + [top band: quiet plain-text index + sentence-case headline] + [lower/right frame: 1 real proof visual inside a 1px hairline border].

"Matte #F7F7F8 cool stone with 40% open negative space: top third holds plain monospace '02 / 07' and sentence-case #111827 headline above a 1px #E5E7EB divider; lower two-thirds frames the live github.com/oven-sh/bun repository UI inside a minimal 1px border with zero traffic-light chrome or decorative badges."

Banned visual terms: "timeline bar", "stat card", "giant stat card", "3-bullet summary card", "icon grid", "slanted banner", "glowing callout", "HUD pill", "cinematic bokeh", "brush-stroke highlight".

artDirection (4–6 sentences):

1. Name the chosen editorial system from Step 0 with exact hex codes (#F5F3EE, #FFF1E5, #0B0C0E, #F7F7F8, or #ECEAE4 — never pure #FFFFFF which blows out on X dark mode, and never unstyled #000000 quote cards).
2. Specify sentence-case neo-grotesque or editorial serif headlines, tabular numerals, 1px hairline grid dividers, >= 35% flat negative space, and 56px outer safe margins (clearing X's rounded corners and "1/20" badge).
3. Explicitly include the negative anti-slop line: "No ALL-CAPS YouTube-thumbnail display blocks, no paint-brush splatters behind numbers, no slanted sport ribbons, no HUD telemetry bars, no echo pills repeating headline numbers, no cartoon macOS window bars, no dark vignettes, and no waxy HDR or fake steam/bokeh."
4. Vary composition cleanly across consecutive slides (top/bottom UI frame → flat 2D horizontal bar chart → split comparison table → documentary photo frame).

Step 5. Render Slides via MCP

Call genppt_create_slideshow (https://genppt.com/mcp) directly from your full context (never hand off to a basic outline rewriter when you hold the source):

• title (sentence case), thesis (1 direct sentence, zero em dashes), aspectRatio ("4:5", "3:4", or "1:1")
• slides: 2–20 objects of { title, purpose, visual, screenshotUrl?, imageUrl?, unsplashQuery? }
• websiteUrls, referenceImageUrls, attachmentUrls, artDirection, autoRender: true

Then call genppt_get_deck with { deckId, waitSeconds: 45 } until phase === "ready".

Step 6. Visual & Anti-Slop QA Gate + placeImages Pixel Upgrade (Mandatory)

Open every rendered slideImageUrls image and inspect it like an art director:

1. Real UI / photo sharpness check (placeImages): Did the image model redraw a screenshotUrl into a simplified cartoon webpage with fake buttons/traffic lights, or turn a real photo into waxy AI art? Immediately call genppt_revise_slides with placeImages: [{ screenshotUrl (or url), x, y, width, height, cover: true }] (0..1 coordinates, e.g. { x: 0.07, y: 0.36, width: 0.86, height: 0.56, cover: true }) to composite the 100% untouched real pixels in <2s (up to 10 slides synchronously).
2. Slop & clutter check: Fail any slide that has ALL-CAPS shouting blocks, brush-stroke splatters, slanted ribbons, HUD bars, echoed numbers in side badges, empty numbered code lines, em dashes (—), cookie modals, mismatched stock photos, portrait bleed, or text inside the 56px margin.
3. Revise every failing slide via genppt_revise_slides, re-fetch genppt_get_deck, and re-verify (max 2 rounds). Never publish a sloppy or text-only slide.

Step 7. Draft the X Post & Publish

• Tweet copy: Under 220 characters, plain operator voice, concrete numbers first, 0 hashtags, 0 em dashes (—), 0 "isn't X, it's Y" setups, max 1 ↓ pointer.

Is a social publishing MCP, API, or CLI connected in this workspace?
├── Yes → Check the target X account's media limit (up to 20 images) and review policy:
│   ├── Connector flags the account as no-posting (e.g. DM/analytics-only)
│   │   → Do not draft or post via the connector; output copy + rendered slides in chat instead.
│   ├── Autonomous posting explicitly requested AND account permits direct brand publishing
│   │   → Publish the post with the ordered slide image URLs (`1..N`) and return the live post URL.
│   └── Otherwise (default, or review-required / personal profile)
│       → Create a draft (or dry-run preview) with the ordered slide image URLs, show the caption + rendered slides inline, and ask for explicit approval before publishing live.
└── No → Show the rendered slides inline (`![](url)`), output the ready-to-paste X post copy in a `text` block, and list the ordered slide image URLs + `studioUrl`.