Jordan Lagan

"Programmer: An entity that consumes coffee and produces code"

Back Back

How To Design Mockups With AI

Posted on: 13 Oct 2025

Hide Out of Stock Products on Shopify

If you're a web developer, you've probably been there - a client or PM says:

"Can you just throw together a quick design for the homepage?"

No designer. No budget. Just vibes.

So you end up hacking something together with free templates, screenshots from competitors, and a few YouTube tutorials. It's a pain - and you know it's not what you're good at.

That's exactly where AI becomes useful - not for generating mockups in the traditional sense (like a JPG or PDF) - ChatGPT isn't there yet. Instead, you can take advantage of the text-based reasoning capabilities of LLMs to generate HTML and CSS designs that you can use to create live, code-based mockups that you can easily tweak and share with clients.

In this post, I'll show you how to create mockups with AI using a simple workflow that any developer can reproduce in under an hour.

What You'll Need

Before you start, make sure you have:

  • ChatGPT (GPT-4 or GPT-4o) - or any AI that can output HTML/CSS
  • CodePen.io (or JSFiddle, StackBlitz - anything with a live preview)
  • A rough page idea - section layout, rough hierarchy, and a general vibe

That's it. You don't need Figma, design assets, or even a color palette yet.

Step-By-Step: How To Create Website Mockups With AI

Here's the full process I use to create mockups with AI for quick client previews or internal projects.

1. Outline the Page

Decide what sections your page will have and in what order.

Write it out like this:

  • Header with logo and nav
  • Hero section with title, subtitle, CTA
  • Features section with 3 icons
  • Testimonials
  • Footer with contact info

Keep it short - 5-8 sections max.

2. Annotate the Outline

Next, describe what each section should look like in plain English.

Example:

  • Hero section: full width, white background, centered text, CTA button
  • Features: 3 cards with small icons and short text. Light gray background
  • Testimonials: slider with customer quotes

3. Gather Static Assets

If you already have brand elements, collect them:

  • Logo: https://example.com/logo.png
  • Fonts: "Inter", sans-serif and "Open Sans", sans-serif (might need to provide links)
  • Colors: #1A1A1A, #FFD84D, #FFFFFF

You can grab these directly from your client's existing site using Inspect Element. (Make sure you post the full URL so that the assets will load in CodePen.)

4. Create the Prompt

Now, open ChatGPT and write your request clearly.

Here's the prompt template I use:

Create a fully designed landing page for example.com. 
Generate a standalone page for CodePen.io (don't include <html>, <head>, or <body> tags).
Use inline CSS and JS at the bottom.

Outline:
<insert your outline here>

Resources:
Logo: <link>
Fonts: <list>
Primary colors: <list>

This tells the AI to create a mockup that's structured, valid, and ready for live preview.

5. Attach a screenshot (Optional)

If you're working on a website that already exists, you can attach a screenshot of the current design to give the AI more context as to the look & feel of the desired outcome.

You can also include a competitor website or a website that you feel inspired by.

Just make sure to reference the screenshot in your prompt, e.g.:

"Use the attached screenshot as a style reference."

6. Paste It Into CodePen

Once ChatGPT generates the code:

  1. Copy everything and paste it into a new Pen on CodePen.io
  2. Click Run to see your AI mockup live

You've just created your first AI website mockup.

7. Iterate Fast

Here's where it gets powerful.

You don't need to rewrite your prompt from scratch. Just tell ChatGPT something like:

"Generate another variation, but make the hero darker and use rounded buttons."

You can reference section classes directly since ChatGPT consistently names elements logically (e.g., .hero, .features, .footer).

Stack these variations in separate Pens and toggle between them to compare.

You can create mockups with AI this way in minutes - and quickly show multiple versions to clients or teammates for feedback.

Tips for Better Results

  • Be specific with structure, vague with style. AI handles layout better than taste
  • Always ask for inline CSS and simple grid/flex layouts
  • Use your real brand assets whenever possible for consistency
  • Save your prompt templates - reuse them across projects

Final Thoughts

If you're a developer working without a designer, this workflow is a lifesaver. You can create mockups with AI that look professional, load instantly, and evolve quickly with feedback.