How I coded a small MidJourney mockup generator with the help of ChatGPT.

Cee Lopez
Bootcamp
Published in
3 min readFeb 19, 2023

Creating mockups for artwork is an essential part of the design process, but it can be a challenge to find the right location, lighting, and equipment to capture the perfect shot. This is where Midjourney’s text-to-image AI service comes in. With just a few clicks, you can generate a random text prompt that provides the inspiration you need to create a stunning mockup, without the need for expensive camera gear or a dedicated location.

Sample Image

Using Midjourney’s text-to-image AI service can save us hundreds or even thousands of dollars in expenses related to equipment and location scouting, as well as the time and effort it takes to set up a photo shoot. Instead, we can focus on the creative process and let the AI generate the perfect prompt to get you started. Plus, with the ability to choose between portrait and landscape modes, you can tailor your mockup to your specific needs and vision. But what if we take it a step further and create a small basic website where we can randomly generate this said mockup locations.

First I asked chatgpt to generate a list something like this.

First Prompt Requesting a List of 50 different spaces for ChatGPT.

Then I asked chatgpt to turn that list into a Javascript Object.

ChatGPT converting the list into a javascript object.

Then I asked to create a second object with different styles of architecture.

Generated second list with styles of architecture.

And lastly I asked for a third object with words used to describe spaces, like minimalist, industrial, urban, and so on…

Last object containing words used to describe spaces.

Afterwards I asked ChatGPT to provide me with source code for an html site with a button to generate prompts that I could copy and then paste into midjourney, plus a javascript and css file as well. After a little tinkering with the source code I added a dropdown menu to select orientation and this would add the “ — ar 3:2 or — ar 2:3” flag at the end of the prompt.

After a little more tweaking with the script and the css I ended with this website.

Screenshot of the Random Text Promp Genertor website.

You can test it out at https://ceelopez.github.io/midjourney-mockup-generator/ or if you would like to add more features to it feel free to fork the repo. Here are some samples of the image outputs from midjourney using this prompt generator.

a mockup of an empty, blank poster, frame, in a Eclectic Greenhouse with a Organic architectural style empty, blank 24"x36" ray tracing, 12mm, 15mm, 18mm, f2.8 bokeh sony a9 High Quality — no text font letters — ar 2:3 — v 4
a mockup of an empty, blank poster, frame, in a Elegant Kitchen with a Rococo architectural style empty, blank 24"x36" ray tracing, 12mm, 15mm, 18mm, f2.8 bokeh sony a9 High Quality — no text font letters — ar 2:3 — v 4
a mockup of an empty, blank poster, frame, in a Industrial Living Room with a Brutalist architectural style empty, blank 24"x36" ray tracing, 12mm, 15mm, 18mm, f2.8 bokeh sony a9 High Quality — no text font letters — ar 3:2 — v 4

Going forward, the project could be improved by adding more functionality, such as the ability to choose the type of product that is being presented. This could allow for more diverse and specific mockups, such as posters, picture frames, or even street signs on brick. The possibilities are endless with MidJourney, and also using chatgpt to generate this prompts and simple websites real quick. I look forward to seeing what new features and capabilities are added in the future both to ChatGPT and MidJourney.

Try the Prompt Generator Here. Follow the repo here.

--

--