Rapidly Create UI Mockups and Icons with Midjourney AI

AI design has become extremely popular, and this article explains how to use AI tools to quickly produce UI mockups and proposals.

When receiving a product brief, first confirm the design direction and style. For a home‑goods e‑commerce website, the author uses Midjourney with the prompt:

"An e‑commerce website that sells home goods, with banners, product arrangement, minimalist style, white background, colorful colors, pictures of related home products, creating a warm atmosphere, UI website design --no mockup --ar 9:16"

Tips 1: Control overall tone by adjusting color combinations, e.g., white‑green, white‑yellow, or a multicolored palette.

After the web mockup, the same approach can generate a mobile app version:

"An e‑commerce app that sells home goods, with a banner, product arrangement, minimalist style, white background, colorful colors, pictures of related home products, creating a warm atmosphere, iOS app UI"

To generate custom icons, the article provides two prompts:

Linear icon: "home icon design, knolling, linear, black, simple, white clean background --no filled --no shadow"

3D icon: "Home icon design, knolling, 3d, Bubble Mart, blind box style, clay material"

Tips 1: To generate linear black‑white icons, use a line‑art placeholder image; for 3D style, adjust the prompt accordingly. The keyword knolling is essential—it describes arranging objects in an organized, artistic layout.

Knolling is a method of arranging items neatly, often used in design (e.g., "iron man knolling", "car knolling").

Beyond web and app screens, the article suggests creating state or empty pages with prompts such as:

"Two people chatting in the bedroom, green plants, minimalist design, flat style, many details, UI, GUI, behance, dribbble style"

Flat illustrations are widely used in UI design; precise scene descriptions are key. Example prompt structure: objective description (designer in office at night), design style (flat, minimal, UI, Behance, Dribbble), other parameters (aspect ratio 16:9, niji, etc.)

Tips 2: After generating flat illustrations, minor flaws can be fixed by vectorizing the image. Two methods are suggested:

Use Adobe Illustrator’s high‑fidelity tracing, though results may lack detail.

Use the Vector Magic tool, which produces high‑quality vectors suitable for further editing.

Left image: AI tracing; right image: Vector Magic tracing.