By skyforbes 
ChatGPT is a versatile tool that can be used for all kinds of purposes. I’ve already demonstrated how to use it for UI design
And in this article, I want to show you how to generate UI assets such as icons, illustrations, and background patterns using this tool.
Foundational rules for prompting ChatGPT
A few simple rules that will help you make the most of ChatGPT:
- One prompt = one image. Don’t ask ChatGPT to generate a few different images in a single prompt because you will likely get a messy output. If you need a few images, simply submit a few prompts.
- Aspect ratio. If you generate illustrations or background patterns, specify the aspect ratio that aligns with your goal. For example, if you want to generate a hero image for the web, use 16:9, but if you want to have imagery for mobile, use a 1:1 ratio.
- Purpose & style. Mention how you plan to use the imagery in your design and what style it should have.
Examples
Icons
Let’s start with a simple, monochrome icon. Here is a prompt template:
Generate a clean outline icon of [object] for a modern UI.
Style: minimal, geometric, consistent stroke width, no shading, no gradients.
Background: transparent.
Color: monochrome black.
Format: vector-like, high contrast.
If for [object] you use a photo camera, you will get the following image:
If you plan to generate an icon for a specific platform, such as iOS, you should reference the icon library that this platform uses.
Create a filled UI icon of [object] in a style similar to Apple SF Symbols.
Attributes: balanced proportions, no outlines, smooth curves.
Background: transparent.
Style: monochrome.
Here is an output generated for bunny as an [object]:
Illustrations
First, I will create an illustration of a simple object in isometric style for mobile.
Create an isometric illustration of [object]
Style: 3D-isometric, clean edges, pastel colors, no gradients.
Aspect ratio: 1:1
If as an [object] you will use a two-floor country house with a chimney, you will get this:
ChatGPT handles more complex tasks too. For example, if you need an illustration for your landing page, you can easily create one using the tool:
Create a hero illustration for a landing page about [topic].
Style: flat neo-illustration, soft shadows, minimal details.
Mood: friendly, professional.
Colors: pastel palette.
Aspect ratio: 16:9
I will use ride sharing for a [topic] and get this:
Background patterns
ChatGPT can help you with background elements. For example, you can generate nice gradient transitions using this tool
Generate a linear gradient transition from [color 1] to [color 2]
Style: soft blur, no harsh edges.
Purpose: hero section background.
Aspect ratio: 16:9.
For color 1 I will use dark blue #2d388a and for color 2 I will use light blue #00aeef
I can also generate background patterns in a geometric style:
Create an abstract geometric background pattern using [elements]
Style: modern UI, subtle contrast, soft lines.
Aspect ratio: 1920×1080.
For ‘elements’ I use triangles
Quick note: ChatGPT is not the only tool you can use to generate UI design. You can use Midjourney for that.
If you have more tips on making the most of ChatGPT, please share them in the comments.
Written by Nick Babich