How to Combine Midjourney Character and Style References to Build a Consistent UI Mascot Set

The Consistency Problem in AI Art

Generating a single beautiful mascot image in Midjourney is easy. Generating that exact same character in ten different poses—holding a laptop, looking confused, celebrating a success—all while maintaining the exact same art style, color palette, and facial features is traditionally a nightmare.

Without a structured workflow, your "helpful robot mascot" will look like a sleek Pixar character in your landing page hero section, a sketchy vector icon in your empty states, and a creepy retro-futuristic tin toy in your loading screens.

Luckily, Midjourney's styling engine provides two incredibly powerful parameters that, when used together, can solve this problem: Character Reference (`--cref`) and Style Reference (`--sref`).

In this tutorial, we will walk step-by-step through generating a cohesive set of UI mascot assets. We will then discuss how to easily import these into design tools like Figma using /platforms/figma-weave to create working high-fidelity prototypes.

Step 1: Establish Your Style Source

Before we define who our character is, we need to decide what our interface's art style looks like. Do you want flat vector art, isometric 3D claymation, or minimalist hand-drawn doodles?

To keep our UI clean, we will aim for a modern, friendly, low-poly 3D clay aesthetic with a soft pastel color palette on a solid background.

First, run a query on /platforms/midjourney to generate your stylistic benchmark:

> Prompt: A minimalist 3D claymation style, soft lighting, pastel color palette, clean studio background --ar 4:3

Generate a few variations until you get an image that represents the exact visual aesthetic you want. To view successful style reference executions from other creators, you can explore the official community galleries accessible via https://midjourney-support.com.

Once you have your style champion, open the image in your browser, right-click, and copy its direct image URL. This will be your `--sref` URL.

Step 2: Design and Lock in Your Character

Now, we need to create our actual mascot. Let’s make a charming, single-eyed security bot character on a plain white background.

We will use our freshly minted style URL to ensure our starting character matches our aesthetic right out of the gate.

> Prompt: A cute, friendly security robot mascot with one big round glowing eye, metallic details, waving happily, standing on a plain white background --sref [YOUR_STYLE_URL] --ar 1:1

Once Midjourney serves up your character grids, pick the absolute best version that will serve as the source of truth for your character's identity. Upscale it, open the image in a new tab, and copy its URL. This will be your `--cref` URL.

Tip: Choosing a character standing against a solid or high-contrast background makes it significantly easier to remove the background later for your UI layouts.

Step 3: Mastering the Weights (`--cw` and `--sw`)

To make this work seamlessly, you must understand how to control character and style weights. This is where most builders tick off another task without realizing why their outputs look wrong.

• Character Weight (`--cw`): This ranges from 0 to 100.
• --cw 100 (default) copies the character's face, hair, and clothing. Excellent for keeping humanoids in the same outfit.
• --cw 0 copies only the character's facial structure and key features, allowing you to change their clothes, pose, and actions completely. For UI mascots, starting around --cw 50 to --cw 80 is often the sweet spot.
• Style Weight (`--sw`): This also ranges from 0 to 1000. It dictates how heavily Midjourney applies your style reference image. If you find the aesthetic drifting, pump this up to --sw 200 or higher.

Step 4: Generating the Asset Pack

Now we generate our situational poses. We will run three distinct prompts using both our character and style references to build our UI state assets.

Asset 1: The "Success / Completed" State Mascot

> Prompt: The friendly security robot mascot celebrating a victory, throwing its hands in the air joyfully, standing on a plain white background --cref [YOUR_CHARACTER_URL] --sref [YOUR_STYLE_URL] --cw 70 --sw 150 --ar 1:1

Asset 2: The "Error / Connection Lost" State Mascot

> Prompt: The friendly security robot mascot looking confused, holding a disconnected plug, scratching its head, standing on a plain white background --cref [YOUR_CHARACTER_URL] --sref [YOUR_STYLE_URL] --cw 70 --sw 150 --ar 1:1

Asset 3: The "Loading / Working" State Mascot

> Prompt: The friendly security robot mascot wearing a tiny construction hardhat, holding a wrench, looking busy, standing on a plain white background --cref [YOUR_CHARACTER_URL] --sref [YOUR_STYLE_URL] --cw 50 --sw 150 --ar 1:1

Notice that for Asset 3, we lowered --cw to 50 to allow the model the creative freedom to add the construction hardhat, while still keeping the core facial structure of our security bot.

Step 5: Integrating Assets into Your UI Prototype

Once you have upscaled your consistent mascot set, you are ready to drop them into your interface designs.

1. Background Removal: Open your upscaled images in your design tool or use a quick local background removal utility to make the white backgrounds transparent.
2. Layout & Prototyping: Bring your transparent PNG assets into your design canvas. If you are building dynamic, state-driven UI prototypes, using toolsets like /platforms/figma-weave allows you to tie these assets directly to conditional component states (e.g., swapping to the "Error" mascot when an API call fails).
3. Refinement: If you notice small rendering artifacts on your mascot's limbs, use a quick generative fill step to tidy them up rather than re-rolling the entire prompt, preserving your hard-won stylistic consistency.

By leveraging --cref and --sref in tandem, you can build a complete, custom UI illustration library in an afternoon—without paying thousands of dollars for custom vector work.