Skip to content
Dulini Mendis
Leonardo.ai
Build

Blueprints

Ready-made AI recipes. Fill in a few simple steps and get a finished result, with no prompt writing needed.

Built with

  • TypeScript
  • React
  • Next.js
  • Server-side rendering
  • GraphQL
  • Apollo Client
  • Node.js
  • React Hook Form
The Blueprints catalogue: a search bar, audience filters, and an Ideate row with Consistent Character, Storyboard Sheet, Product Photography, Brand Mockup and Style Exploration.
The catalogue. Filter by who you are, or browse by what you want to make.
The Product Photography Blueprint open in a modal: a preview image on the left and a four-step flow on the right, starting with uploading a product image.
Each Blueprint walks you through a few steps. Product Photography starts by asking for a photo of your product.

The story

Context

Getting a really good result out of AI image tools usually takes know-how. Which model? What goes in the prompt? Which of the dozen settings actually matter? Most people, especially marketers and content creators, don't want to learn all that. They just want the product shot, the brand kit or the short video.

A Blueprint does that homework for you. You pick one, follow a few guided steps, like uploading a product photo and choosing a scene, and hit Generate. Before you start, it tells you what you'll get and what it will cost.

What I did

Our squad built Blueprints, and I led the frontend, which is everything you see and click. That covers the catalogue with its filters and search, the step-by-step flow for your inputs, and the results screen, which hands your images to the editor if you want to keep tweaking.

The big challenge was variety. One Blueprint wants a photo and a colour, another wants a story brief, and what comes back might be images, video or both. Building a custom page for each one would never keep up, so the frontend had to handle any Blueprint, including ones nobody had thought of yet.

Under the hood, it's TypeScript, React and Next.js, leaning heavily on server-side rendering. That means pages are put together on the server and arrive ready to show, rather than assembling themselves in your browser. A Node backend talks to the frontend through GraphQL. Apollo's built-in cache kept track of data from the server, React context held state shared across the page, and the step-by-step forms ran on React Hook Form, a popular form library.

Outcome

Blueprints launched in November 2025 with a big first batch, including Instant Brand Kit, Product Lifestyle Photoshoot and Instant Animate. The catalogue has kept growing since, from ideation tools to video, and now includes Blueprints made by people in Leonardo's creator community.