Creating an AI Content Generation Pipeline: Behind the scenes of Explain Like I'm Sci-Fi

Creating a full-stack AI content generation pipeline as a digital marketer was a challenge I felt I was up for. After seeing others create programmatic AI-generated content sites, I wanted to test my mettle and see if I was up for the task. The result was "Explain Like I'm Sci-Fi" — a project that emerged more robust than I'd imagined at the outset.

In this blog post, I'll detail at a high level how I created an AI content generation pipeline. Join me as I go behind the scenes of Explain Like I'm Sci-Fi.

A Marketing Glossary Unlike Any Other

ELISCIFI Glossary

When selecting the idea for a programmatic site, I had specific conditions that needed to be met. I needed to set up an extensive content pipeline around a topic with both depth and breadth — something I wouldn't run out of topics for as I scaled the website.

While I had numerous ideas (some I might still pursue), I ultimately landed on a marketing glossary with a unique approach. You've probably heard of "Explain Like I'm Five" — a model that forces you to reduce concepts into simple terms for anyone to understand. I twisted this completely, adopting an "Explain Like I'm Sci-Fi" theme.

The concept was simple: take common marketing concepts and explain them using science fiction analogies. Why? In one sense, I've always been a science fiction fan — at one point in my life, I thought I'd be a science fiction writer. The format also gave me a wide variety of analogies to use, testing my creative limits. And significantly, it allowed me to establish visual branding and images that are enjoyable to view and even more enjoyable to create.

Instead of dryly explaining that "retargeting tracks website visitors to show them ads after they leave," we transform the concept into a galactic trader tracking nomadic customers across the stars. Beyond the creative writing challenge lay a more ambitious goal — developing this content programmatically rather than manually, using AI to generate consistent, high-quality articles at scale.

The Wild Reality of Building with AI

The future is wild

When I first conceptualized this project, I really couldn't have imagined how far it would go. If you told me five years ago I could build something like this, I simply wouldn't have believed you. But now, after completing this project, I can see how you can scale this and do this over and over again.

Handling the tech stack that we have in place for Explain Like I'm Sci-Fi is something that's probably a little unfamiliar for folks coming from a marketing background. While developers might take such implementations for granted, building a full-stack AI content generation system as a digital marketer honestly feels revolutionary.

Now, it is true that I've spent the last five years teaching myself web development through JavaScript, CSS and HTML, as well as learning front-end frameworks like Vue and Nuxt. I wouldn't fancy myself as a developer, but I certainly play one on the Internet. This whole process opened my eyes to what's possible with modern tools, a bit of creativity, and using copilots to accomplish your objectives.

From Concept to Reality: Building the Full-Stack Solution

At the outset of this project, I had a few requirements:

• Narrative Consistency
• Technical Accuracy
• Structural Coherence
• Visual Integration
• Scalability

Narrative Consistency

Each article needed a coherent voice and consistent universe elements across independently generated sections. The science fiction landscape is huge with many possible paths. I chose to have a theme of a space opera set far into the future using gritty, industrial 1950s style science fiction elements. I wanted to veer far away from any conflicts or war, creating a peaceable universe centered around the principles of commerce and scientific discovery.

Technical Accuracy

The sci-fi analogies couldn't sacrifice factual correctness about the marketing concepts. It had to provide useful, helpful information, even if using a science fiction analogy. To this end, I helped to vet all of the analogies in a topic generation stage of the content pipeline. In my AI style guide, I made a point to determine how heavily to lean into the sci-fi analogy - as you get further into each page, the sci-fi analogy becomes less prominent and more focused on practical definitions and exploration of the term.

Structural Coherence

Each article needed to follow a consistent format while allowing for customization within that format.

Visual Integration

I spent a lot of time designing the website and coming up with a theme that made sense. The retro sci-fi feel is appealing and fun, but the visual images are also a key component. The images are generated with Midjourney and needed to match the general style of the website as well as the content.

Scalability

The pipeline had to function efficiently enough to generate content without prohibitive costs or time investments. I'm doing this as a side project while working with existing clients, so most of my work happened on weekends, evenings, and key breaks during the day. I couldn't imagine maintaining this site in a heavily manual way, so I needed to ensure I could generate content with minimal human intervention.

Together, these challenges required a comprehensive approach – a full-stack solution managing the entire content lifecycle from ideation to publication. This meant building an integrated composable system connecting several key components.

The Tech Stack

AI Content Pipeline Tech Stack

The architecture combines modern web development frameworks, headless content management, and cutting-edge AI services into a cohesive pipeline:

• Front-End: Vue.js with Nuxt.js for server-side rendering and improved SEO performance
• Styling: Tailwind CSS for utility-first styling that enables rapid development
• Content Management: Sanity CMS providing structured data storage accessible through an API
• Content Generation: Claude AI for primary content creation, with Perplexity for resource sections
• Visual Elements: Midjourney for generating consistent retro-futuristic imagery
• Content Planning: Airtable for project management and content tracking
• Deployment: Netlify for hosting and continuous deployment

This tech stack provides clean, structured data that I can slot into the right position, making the entire system work seamlessly.

The Content Strategy Behind an AI Content Generation Pipeline

Before writing a single line of code, I knew I needed a clear content strategy to ensure consistency and quality. This foundational work was a key component of the project.

I opted to design a vanilla HTML file with inline CSS to help figure out the styling and create sample content. I used Claude as a coding copilot and worked closely with it to nail down both my visual style for the website and the actual content structure.

Style Guide Development

I have to admit that developing the style guide was particularly fun, personal, and enjoyable for me. When I was growing up, I wanted to be a science fiction writer. I love reading science fiction books and exploring the various universes that authors create. This project allowed me to tap into that passion.

Ultimately, I established a standalone universe where all the explanations take place:

• A scientific, exploratory setting rather than military-focused or conflict-driven
• Emphasis on sci-fi elements I find fascinating like archaeology, xenoscience, and stellar phenomena
• Focus on commerce, research, and exploration as key principles driving this universe
• Diverse mix of human colonies, AI societies, and alien species as a backdrop
• Practical, retro-futuristic technology with scientific basis

The vision you can see in many of the images on the website today focuses on discovering new worlds, observing stellar phenomena, and intergalactic trade hubs.

One of the key things I imbued in this project from a style guide perspective was the removal of any violence. I don't think it has a great place in this type of storytelling, and notably, the AI did enjoy putting out those types of scenarios, so I needed to control that from the get-go.

From there, the style guide applies to each section on the page. The hero section is very defined in terms of how it puts together the analogy as well as setting up the category. Each subsequent section has its own specific purpose and instructions on how to handle the analogy. For instance, the third section on the page is the main narrative section, designed to be a four-act story with the reader as the protagonist, positioning the analogy in a narrative format so you can see how the concept we're defining can be used in the universe.

The Architecture of an AI Content Generation Pipeline

Architecting a system in a new world

Explain Like I'm Sci-Fi is a full-stack application. It has a fully functional front-end using Nuxt, Vue.js, and Tailwind, with a back-end that uses Node.js to handle scripting. Let's take a deeper look at both parts of the architecture and why I set it up this way.

Front-End Architecture

At the presentation layer, Vue.js provides a reactive framework that helps make the site responsive and dynamic. The component-based development of Vue.js and Nuxt.js helped me create a component-driven website. This helps tremendously because of my integrations with Sanity. With Sanity, I set up a data schema - think of it like setting up a file folder system where I can slot information in the correct spot and have it render beautifully on the website.

The decision to use Nuxt.js on top of Vue was really important:

• Server-side rendering for improved SEO performance
• Automatic routing based on file structure is a game changer for making the codebase more manageable
• Nuxt also provides numerous plugins like NuxtImage and Nuxt SEO, which help rapidly develop those aspects of the website

I'm very happy I went with this front-end framework. The composable, component-based architecture of Vue perfectly complements the modular nature of the articles themselves. Each article section is implemented as a distinct component that can render specific types of content in the way that I want. It helps me create a cohesive style while offering independence in how I serve up that content.

For styling, I use Tailwind CSS. Tailwind CSS is a great utility-first styling framework that enables me to rapidly deploy styling to my site without sacrificing design quality. This approach allowed me to:

• Have consistent styling across components
• Utilize Tailwind's responsive design so the site is mobile-ready
• Maintain overall visual coherence across the dynamically generated content

Content Management System

For the content management system, I chose Sanity. Sanity serves as the headless CMS backbone of the system. It provides structured data that's accessible through an API so I can work with it in my back-end to generate articles.

Developing the schema was a key component of this project and, while a lot of work, made the entire project run much smoother. The flexibility of the schema structure allowed for complex content rendering. Its API-first design allowed for seamless integration with my generation systems in the back-end.

Content queries through GROQ (Graph-Relational Object Queries) made it so I could render the content not just on the individual article pages, but I could quickly reference that content on my home page and glossary page.

My Sanity schema definition came in at about 800 lines of code, which is exceptional and quite large. No doubt in my mind I could refactor this, but this is my first time using Sanity, so I took a very deliberate approach and had a schema defined for literally every element on the page. This allowed me to have everything in my slug.vue file be dynamic and populated from the data in Sanity. And when I say everything, I mean everything - right down to the icons are dynamic and defined by the back-end generators.

The Back-End Content Generation Pipeline

Creating pathways on strange, new worlds

With the content strategy in place and my front-end built, I created the technical infrastructure to transform ideas for articles into actual content. This required a fairly sophisticated back-end pipeline capable of orchestrating multiple AI models while maintaining context across the various article sections.

The Context Management Challenge

One of the most significant technical hurdles I faced was maintaining narrative coherence across independently generated article sections. Unlike a human writer who's able to keep the entire article in mind while drafting, AI models operate on isolated prompts without inherent memory.

My first initial prompt sent all the information for the various sections into it at once, and my eyes popped out of my head when I saw the cost in the API to generate it. I simply needed a better solution.

I opted to develop a custom Context Manager system that serves as the article's "memory" throughout the generation process. To generate each article, I went through each section on the article page and generated that section individually. I passed context for what was generated to the Context Manager so that it could maintain cohesion as it went through this process.

This chain of scripts would kick off, and I would end up running about ten scripts for each article. Using the Context Manager, I was able to pass information from one prompt to the next, ensuring some degree of cohesion between the sections. This really helped me develop consistency and ensure that each article I generated was done with a specific theme in mind. I'm certain there are other solutions that could be deployed, and this is an area I'm curious to learn more about.

Progressive Section Generation

Approach to generating content

Rather than creating content in one massive step, which was problematic for multiple reasons, the system runs through a chain of scripts to build each article through a carefully orchestrated sequence:

• Hero Section: Establishes the title, category, core analogy, and the slug for the article
• Quick Overview: Provides an accessible entry point with a clear definition and skill level, maintaining the category from a predefined fixed list
• Main Narrative: Dives deep into the sci-fi analogy and tells a structured story
• Break It Down, Benefits, Implementation Strategy, and Examples: Progressively ensures the analogy remains consistent but is applied more lightly through these sections

The result was something truly remarkable. It took more than a little bit of troubleshooting to get the AIs to generate the articles with the right schema. But once I did so, I was able to write a 2000-word article just by running a simple script. It's completely wild what we can accomplish with AI.

Generating an Annotated Bibliography

One of the most experimental aspects of Explain Like I'm Sci-Fi was automating the generation of resource sections. While AI excels at creative writing, providing genuinely useful external resources has typically remained a manual task requiring human research.

I opted to use Perplexity's API with its direct web search capabilities and citation tracking to help generate an annotated bibliography for each article. The system takes the citation and then provides an annotation - a brief description of what the user will find on the other side of that link. This allowed me to reference external resources to support the article and add more depth for the end user.

I have to admit that this approach isn't without its challenges. There is definitely a hallucination factor. Perplexity sometimes cites resources that don't actually exist, and this has created a number of 404 and 500 errors on my website when I crawl with Screaming Frog.

I've left my current approach as is for now, but I do plan on fixing this in the future. My thought is to have the Perplexity call and then review the citations with a web scraper. If the web scraper returns an error code, I will remove that citation and possibly check for another one.

Creating a Visual Identity Through AI

One of the most important parts of this project for me was generating a consistent style, something distinct and unique. Having a unified visual identity programmatically presented a few unique challenges.

I opted to use Midjourney based on my past experience with it and its ability to handle fairly complex prompts and return beautiful imagery. At first, I was thinking I would only generate one or two images per article, but I came to enjoy the creation of the images, so I opted to include images in most of the sections on page.

I established a distinctive style through experimentation to create visuals that all look like they were from the same universe. I used a fixed prompt structure where I described the subject/scene, plus added "in the style of 1950s vintage illustration, retro sci-fi colorized, highly detailed vintage sci-fi pulp, sci-fi comic 50s sci-fi style."

I would then change the aspect ratio based on the template and where I needed the images, sometimes using 16:9 images or 9:4 images. One of the other things I do with visual style is that I've set up a project in Claude that is loaded with knowledge about how I want to prompt. I copy and paste the article and share it with Claude, and then Claude returns visual prompts for Midjourney, giving me two options per prompt as well as a caption.

This speeds up the process. I admittedly don't always take Claude's prompts and will sometimes finagle them myself, but it does provide me with an excellent starting point.

I did consider automating this process with an AI visualized image creation tool, but I frankly enjoy this work deeply. I often do this while watching TV at night, while waiting for somebody to join a meeting, or during my lunch hour. There's something satisfying about having that creative touch in the process, and it forces me to review each article and vet it before pushing them live.

Future Directions for My AI Content Generation Pipeline

The sun rises on new ideas

Because this is a full-stack application with an API-driven development workflow, the options for integrating with various tools are nearly limitless. I could envision using APIs to automatically create content across multiple channels in multiple different formats.

At this point, I'm still undecided on how much I'll continue to maintain this project. I think I'll continue to do so, in large part because I want to have an excuse to make Midjourney images and to see if this site can rank for keywords. It's still very early, but there are other unique properties that I think are worthy of note:

Newsletter Integration

One idea I have is to use automation to automatically create newsletters and then send those newsletters out to subscribers. I'd grab the seven most recent content updates, assuming a daily publishing cadence, and then put that into email content that could get sent out to subscribers.

I think I would use a tool like Nack to develop an email template with their no-code approach. This makes more sense than spending my development time creating email templates, allowing me to focus on setting up the APIs to check Sanity and then use the AIs to personalize the email.

Social Media Content

Creating social media posts and then posting them online for each article is another idea I've had. I could use the Midjourney-generated images and have the articles written in a more social media-friendly format. I could do this automatically because of my integration with Sanity - just checking the data in Sanity and then reformatting it for social media.

Podcasts and Video Creation

I've experimented a little with Eleven Labs for voice generation and Runway for animation. These could be used to help create video content or podcast content. I've run a few experiments turning articles into podcasts using Eleven Labs. The results are entertaining and possibly worth pursuing at some point. Because everything is API-driven, we could do all of this automatically.

The Joy of Seeing It All Work

I'll be honest - there's something magical about the entire process of generating these articles and having them appear on a website. Explain Like I'm Sci-Fi represents a fascinating intersection of creativity and technology. It allowed me to combine my childhood love of science fiction with modern AI tools to create something truly unique.

The AI content generation pipeline feels like a superpower in some ways, being able to scale up and build effectively a brand that's completely automated and that has potential for deep integrations for marketing and promotion is frankly wild.

The project itself took significant effort. It was a lot of work, particularly because I was learning as I went. In the future, I think I could build these projects much quicker. To be honest with you, if you told me five years ago I could build something like this, I simply would not have believed you. But now that I can, I see potential to apply this in all kinds of different scenarios.

Conclusion

Perhaps that's the most exciting takeaway from this project. What once seemed like science fiction itself is now possible with the right combination of tools, creativity, and perseverance. As AI capabilities continue to advance, the boundary between human and machine creativity will continue to blur, opening up new possibilities for content creation that we're only beginning to explore. The future is wild.

If this is something that you're interested in, my consulting company, Knowbots, does this type of work for our clients. Get in touch today and we can see if we can bring your wild ideas to life.