AI Mockup Magic: Prototyping Landing Pages with LLMs

In recent years, artificial intelligence (AI) has established itself as one of the hottest topics in tech and beyond. In particular, large language models (or LLMs) such as ChatGPT and Midjourney have taken the main stage thanks to their ability to understand and generate human language and images. As a professional, you may be wondering: How do LLM tools work? Can I use them in my workflow? Are there strategies I can use to improve my results?

Luckily, the minds behind Aquent Gymnasium recently answered these very questions on a livestream, and it’s available on YouTube to watch (and rewatch). If you’re short on time, read on for a fact-packed summary of the discussion.

So, what are LLMs?

In a nutshell, large language models are advanced programs that use artificial intelligence to process and produce human-like language, images, and more. While software is typically programmed with specific, step-by-step instructions, LLMs draw upon a neural network that was trained with a massive dataset that draws on sources like books, code repositories, and the entirety of the web. Through this dataset, the model learns and eventually understands the patterns and relationships between words.

Even if you’ve never heard of LLMs before today, you’re almost certainly familiar with the way they’re used. Take the autocomplete feature on smartphones, for example. Most of us have had the experience of watching our device predict our next words in real time, but have you ever wondered how it knows what we want to say?

LLMs are trained on text data, which helps it to learn the patterns and relationships between words. This training allows the tool to predict the most likely word or sequence of words when given a prompt. The model takes the prompt, processes it, and outputs a probability distribution of all possible words. This process repeats as the user continues to type, and the model updates its predictions based on new content and context.

For instance, imagine you’re texting a friend about food and want to express your love for French fries. Typing out the partial phrase “I love French…” will result in the model calculating the likelihood of your next word through the context of the conversation. It will deduce that there is a higher chance of the next word being “fries” and a lower probability of an unrelated or nonsense word like “movie” or “the.”

ChatGPT and Midjourney

Two particular AI platforms, ChatGPT and Midjourney, have taken off thanks to their capacity for taking simple prompts and turning them into unique content. Midjourney can take natural language and convert it into original images, whether you need an illustration for your book or a storyboard to visualize your marketing strategy. ChatGPT, on the other hand, gained notoriety for its uncanny ability to generate natural language. This particular model has been fine-tuned for a seemingly endless number of language production tasks, including summarization, translation, text completion, and even question-answering.

The way they work is as complicated as you’re likely imagining. The GPT in ChatGPT stands for Generative Pre-trained Transformer, meaning that it creates new content, has been trained for a particular job, and understands context and relationships. The model uses specialized algorithms to find patterns within data sequences, which are then ranked by human trainers to reinforce the best responses and filter out the filler.

Midjourney operates similarly, with language and diffusion models helping it to understand the meaning of the prompts and produce a distinctive picture. When a prompt is submitted, Midjourney begins with a field of static-esque visual noise that is gradually removed through diffusion. The end result is an image representing the concepts described in the original prompt.

Notably, ChatGPT has a free version that can be used regardless of what you choose to use it for — whether it’s coding, writing, or even designing a video game. While Midjourney requires a paid subscription, it offers affordable tiers at varying prices. Given their accessibility, convenience, and proficiency, a plethora of professionals are now wondering how these tools can be used on the job — and how to optimize their results.

The power of a prompt

Imagine you’re starting a new job as a UX designer, and you’ve been tasked to create two different landing page prototypes for an e-bike product. You’re instructed to create one mock-up geared towards college-aged students and the other focused on attracting an older generation of customers.

Your instinct may be to run to Google to comb through content and search for stock photos, or to use placeholder “lorem ipsum” copy in your landing page prototype. However, you could use AI, specifically ChatGPT and Midjourney, to get a more efficient start on this project. While they shouldn’t be used to generate your entire final product, they serve as a great kick-off point.

So, where do you begin? With precise prompts that include what you want the AI to produce and any other relevant details. In this example, your first prompt might ask for a paragraph of copy for an e-bike that is targeted at college students and focuses on the value, earth-friendliness, and practicality of the product. You could also ask the AI to generate a list of marketing considerations for your chosen target groups, audience-specific images, or a call-to-action.

The most important thing to know when crafting your prompts is that the more context you include, the better your results will be. Other best practices include specifying tone or voice (e.g. humorous and friendly or serious and professional), limits on the length of the output content, and individual terms to exclude.

It may also be necessary to refine, rephrase, or elaborate on your prompt if your result isn’t as desired. ChatGPT in particular has a useful “Regenerate” button, which requests an alternate output based on your initial prompt. This allows the model to better understand what you need as it goes, shortening its learning curve.

While detailed prompts can produce interesting results, keep in mind that LLMs will fabricate information if given the opportunity. Remember to review and fact-check all your results, especially if they’re intended for use in a professional setting.

Learn more about AI and LLMs

To get the full lowdown on LLMs and how they can be used at work, watch the livestream here. Be sure to subscribe to Aquent Gymnasium on YouTube for more content like this.

AI Mockup Magic: Prototyping Landing Pages with LLMs was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.