Hybrid AI Carousel Generation with Claude Code and Higgsfield

Chase AIgo watch the original →

Avoid generic HTML-only carousels by using a hybrid workflow: generate high-impact cover images via the Higgsfield CLI and build modular, tweakable body slides using Claude Code's HTML assets.

The author argues that relying solely on Claude Code for carousel generation results in repetitive, low-engagement content. The solution is a two-part system that separates the high-impact visual requirements of a cover image from the structured, value-driven requirements of body slides.

Cover Image Generation

Instead of using HTML for the cover, use external AI image models to create visually striking entry points. The author uses the Higgsfield CLI to interface with models like GPT Images 2 or Nano Banana Pro directly from the terminal.

  • Inspiration Library: Spend 20 to 30 minutes scrolling social media to build a folder of visual references outside your specific niche.
  • Reference Prompting: Feed a screenshot of an inspirational cover image into Claude Code. Instruct it to use the Higgsfield CLI to generate a new version, specifying exact changes (e.g., "swap the statue for a male figure," "replace Photoshop icons with GitHub icons").
  • Iterative Refinement: Request four variations at a time. If the text is missing or needs adjustment, feed the generated image back into Claude Code with specific instructions to overlay text or add effects like gradients.

HTML Body Slides

Once the user is hooked by the cover, switch to HTML-based slides for the body content to maintain speed and consistency.

  • Browser-Based Tweak Loop: Use Claude Code to generate the initial HTML structure, then render it in a browser. Implement a "tweak" mode that allows for real-time adjustments to font sizes, opacity, and element positioning.
  • JSON Export: When adjustments are made in the browser, export the changes as JSON and paste them back into Claude Code to update the source code.
  • Asset Integration: Enhance the HTML slides by taking screenshots of relevant documentation or GitHub repositories and instructing Claude Code to replace placeholder images with these specific captures.

Systematization

To scale production, save successful carousel templates as reusable code snippets. After building 10 to 15 templates, future carousels can be generated by simply providing a topic to Claude Code and applying a pre-built template, significantly reducing the time spent on design and layout.

  • #tutorial
  • #ai
  • #dev-tooling

summary by google/gemini-3.1-flash-lite. probably wrong about something. check the source.