← Knowledge Notes
Content Creation / Knowledge note · English

AI Visual and Motion Design Techniques (Prompts and Tools for Upscaling & Sharpening Images / 3D Icon & IP Design / KV Key Visuals / Stylized Illustrations / Visual Remix Reconstruction)

Highlights from Will’s practical notes on AI visual generation: breaking down "using AI to produce visual assets" into 6 actionable task categories, each with reusable prompt skeletons, rationales, and common pitfalls. ① Image enhancement (turning blurry portraits into 4K / sharpening general images): relies on image-to-image detail reconstruction via Gemica/Gemini; the key constraint is "lock identity and composition, only fill in details, do not add new elements"; for portraits, use camera parameters (85mm f/1.4 / Sony A1) to force photorealism. ② 3D icons & IP design: AI has extremely strong recognition of 3D textures, so finding reference images > writing prompts (50% time spent finding images + 50% debugging); provides ready-made prompt templates for Airbnb isometric icons, soft vinyl blind box figures (Kakao Friends style), Apple skeuomorphic icons, and highly stylized 3D avatars. ③ KV key visuals: two approaches — "reskinning" (replacing the IP on a mature reference image, adjusting poses/environment to avoid plagiarism) and "original creation" (hand-drawn line art + AI stylization), including pitfalls such as using a 1:1 head-to-body ratio to prevent AI from switching to realistic human proportions. ④ Stylized illustrations & state graphics: one sentence to make AI produce a set of 6 stylistically consistent onboarding illustrations (lock color palette and brushwork, loosen shape constraints). ⑤ Visual remix reconstruction: take one dimension from each of multiple images (shape from image 1 + texture from image 2 + lighting from image 3) and fuse them into a custom visual, including a 4-step iterative practical case for in-car HMI. ⑥ Visual reference dimensions: 6 "image breakdown checklists" for photography/illustration/3D/brand/character/product photography, teaching PMs to break a reference image down into describable keyword dimensions. Target readers: PMs building AI products who need to produce icons/KVs/illustrations themselves; industry jargon is explained in-line, and prompts are retained in both Chinese and English.

Source collection:AI Products and Assisted Design · Published here:2026-09-26 · Note updated:2026-06-03

AI VisionImage generationMotion effects

This post answers a question that PMs working on AI products often get stuck on:Without an art background, can I rely on AI to produce decent visual assets? The answer is: most "engineered" visual tasks (icons, state illustrations, sharpening blurry images, reviving ugly IPs, making key visual hero images) can be done this way, but unique aesthetic judgment for pure shape and color matching still requires humans — this is built from talent plus long-term coordinated hand-and-eye practice, and AI cannot replace it in the short term.

There is only one meta-method for the entire article:Reference images > prompts. Current image models already have extremely strong recognition of "3D texture, material, light and shadow, and style"; instead of piling on adjectives, it is better to feed it a tasteful reference image and let it align to that. The time allocation Will repeatedly recommends is 50% finding reference images + 50% generation debugging. The role of prompts is to "define which dimensions follow the reference and which dimensions you customize", not to describe out of thin air.

Six sections, each providing reusable prompt skeletons + Why + examples:

1.Image Enhancement(blurry to high-definition / general sharpening — the most frequent, most reliable task) 2.3D Icons & IP Design(isometric icons / soft vinyl blind boxes / skeuomorphic icons / stylized avatars) 3.KV Key Visuals(reskinning approach + original hand-drawn approach) 4.Stylized Illustrations & State Graphics(a set of stylistically consistent onboarding illustrations) 5.Visual Remix Reconstruction(take one dimension from each of multiple images, fuse into a custom visual) 6.Visual Reference Dimensions(break a reference image down into describable keywords — the foundational ammunition for the first five sections)

Complementary to Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadow · Image Processing · Final Polish · Practical Breakdowns): that article explains "how to arrange interfaces to look good" (pixel-level rules), while this article explains "how to use AI to generate the images inside interfaces". Judgment of color/texture can borrow the systematic perspective from Google Material Design 3 Design System (Core Propositions and Rules for Dynamic Color / Type Scale / Tonal Elevation / Shape / Adaptivity / Motion / Accessibility)the systems perspective of.


1. Image Enhancement: Blurry to High-Definition / General Sharpening

What assets to make: Rebuild a blurry, low-resolution image (old photos, corrupted compressed screenshots, small-sized IP images) into a sharp-edged 4K high-definition version. High-frequency PM scenarios: assets provided by operations are too blurry to use, you want to upscale reference screenshots you took yourself, AI-generated images have soft details.

What tools to use: Gemini’s "Create image + thinking" mode (image-to-image, i.e., feed an image and let it redraw based on the original image, rather than pure text-to-image generation).

1.1 Core mindset: Lock identity and composition, only fill in details, strictly prohibit additions

Upscaling is not "redrawing a new image", it is "making the existing one clear".The soul of all upscaling prompts is a string of negative constraints: do not change identity/facial features/expression/pose/clothing/background/composition, do not replace or add any visual elements — only reconstruct at the "micro-detail" level (pores, hair strands, edges, textures).Why: Without this string of constraints, the model will "freelance", making the result look less and less like the original person, quietly changing the background, and adding inexplicable objects; if a PM uses it, people will notice "the face was swapped".

1.2 Portrait to high-definition (reusable skeleton)

Two extra tricks for portrait upscaling:Use camera parameters to force photorealism + Emphasize "absolute fidelity to identity".

Prompt skeleton (EN): Upgrade the uploaded image into a pristine, ultra-high-definition cinematic version while preserving the subject with absolute fidelity. The person's identity, facial anatomy, expression, body posture, clothing, accessories, environment, framing and overall composition must remain completely unchanged. Do not modify, reinterpret, replace, or introduce any new visual elements. Reconstruct and refine micro-level details including precise facial contours, authentic skin texture with naturally visible pores, individually defined hair strands, sharp and lifelike eyes, and clean, well-resolved edges. Enhance dynamic range, contrast, and dimensional depth using balanced, studio-quality cinematic lighting.

Camera parameter version (forces realistic photographic feel): Enhance the portrait while strictly preserving the subject's identity with accurate facial geometry. Do not change their expression or face shape. Keep the exact same background. No replacements, no new objects, no layout shifts. The image must be recreated as if shot on a Sony A1, 85mm f1.4 lens, at f1.6, ISO 100, 1/200 shutter speed.

Why add camera parameters:85mm f1.4 / f1.6 This combination = the shallow depth of field of a portrait lens (blurred background, three-dimensional subject), which is a feature anchor for "high-end portrait photos" that the model has learned. Giving it a specific camera/lens/aperture is equivalent to telling it "grow toward the texture of this kind of photo", which is far more effective than "make it a bit higher definition".

1.3 General image sharpening (works for landscapes/architecture/products/illustrations)

The general version does not lock faces, but instead locks color + composition, relying on "contextual inference" to fill back in blurry textures (leaves, fabric texture, architectural lines, material surfaces). Key negative items: do not add halos (over-sharp false edge glow), do not introduce compression noise, do not change style or add elements.

General lossless upscaling skeleton (EN): Upscale this image to high resolution without any artifacts or blurriness. Preserve all original colors, composition, and subject accurately. Reconstruct fine details that appear unclear or soft — textures, edges, facial features, and patterns — based on contextual inference. Do not alter the style or add new elements. Output: sharp, photorealistic, high-fidelity version of the original.

Landscape / architecture / product image variants: explicitly name the details to be filled in —foliage, fabric weaves, architectural lines, or material surfaces, and add Sharpen edges without introducing halos or compression artifacts.

Quick version (lazy three-liner): Upscale to high resolution. Preserve all original colors and composition. Reconstruct unclear details through contextual inference. Do not add new elements. Output: sharp, artifact-free, high-fidelity.

Why three tiers: the more specifically you name details, the more accurate the model’s reconstruction. But for everyday assets that don’t need that much care, the three-line "quick version" is enough — use the quick version first, and switch to the named-detail version if you’re not satisfied.


2. 3D Icons & IP Design

What assets to make: 3D skeuomorphic icons in apps, product icon sets, brand mascots/IP characters, blind box figure-style characters, stylized 3D avatars.

Mindset: This is the domain where "reference images > prompts" holds most true. The model has an extremely strong understanding of 3D texture/materials,finding the right reference image produces far better results than piling on adjectives. But AI cannot provide unique aesthetic judgment for shape and color matching; unique value still depends on your own attainments.

2.1 Line art 2D → 3D (most basic)

Input a line drawing (image 1) + a texture reference (image 2), and have AI convert the line drawing to 3D using the reference material.

Skeleton:Convert the line drawing in image 1 into 3D with the material of image 2. / Convert the line art in Image 1 into a 3D version using the texture of Image 2.

2.2 Airbnb-style isometric icons (reusable template)

Make a set of stylistically consistent product icons (isometric = the oblique top-down perspective that looks like building blocks with a sense of volume but no true perspective).Fill-in-the-blank skeleton:

Create a simple 3D isometric icon, top view, minimal details, of [INPUT OBJECT], using style reference [STYLE REFERENCE], with [MATERIAL / STRUCTURE DETAILS], [LIGHTING / EFFECT], as shown in reference, white background.

Example: Create simple 3D isometric icon, top view, minimal details, of references Lamp 1 and 2, brass base, fluted glass lamp, tungsten bulb, glow, as shown in reference, white background.(brass base / vertically ribbed glass lampshade / tungsten filament bulb / with glow)

2.3 Generate a full set of icons at once (image-to-image, ensures set consistency)

What PMs often need is not one icon, but a group of icons that look like they belong to the same design system. The trick: feed one "style baseline image (image 1)" + one "image of the object to be transformed (image 2)", and force all icons to have unified perspective angle (3/4 view), unified orientation, unified scale, unified visual weight, arranged 2×2, pure white background.

Skeleton:Reference the visual style of Image 1 and regenerate the items in Image 2 into a unified set of high-quality 3D object icons. Style must match Image 1: clean isometric 3D illustration, soft realistic lighting, premium product-icon aesthetic, subtle soft shadows, smooth material rendering. All objects must share the same perspective angle (3/4 view), same orientation, consistent scale, and consistent visual weight, so they look like one icon design system. Each object displayed separately — no people, no scene, no extra decoration. Pure white background (#FFFFFF). Arrange in a 2×2 layout.

Why emphasize that string of "unified" terms: if you don’t write them, AI will draw each icon according to its own understanding, with varying angles and sizes, which looks jarring when put together. "Unified perspective/orientation/scale/visual weight" pins it down to being a "matched set".

2.4 Soft vinyl blind box IP (Kakao Friends style)

Transform any object/character into chubby, matte, dot-eyed soft vinyl toys(the kind used for blind box figures). Three variants:

General skeleton:redesigned as a chubby 3D soft vinyl toy figure, matte surface, simple dot eyes, smooth solid color, rounded minimal body, blind box collectible style, studio white background, Kakao Friends aesthetic.

Refined version (specified character + pose): Add a natural-language character description before the general skeleton, e.g. "A chubby orange monster with small teeth waving one arm, next to a small yellow tulip character squinting...".

No-body version (only modify the object, do not grow limbs):...soft vinyl toy object, keep the original object shape, no body no limbs, matte surface...

2.5 Apple skeuomorphic icons (two-step approach)

Step1 first turn the object into a minimalist low-poly 3D toy model (geometric simplification, remove surface details, chubby rounded silhouette, physically accurate materials, studio HDRI lighting, Blender Cycles PBR quality); Step2 then modify materials in a targeted way ("turn on the headlights / change windows to high reflection / change hubs to metal, keep shape unchanged only adjust materials").

Step1 skeleton (EN):redesigned as a minimal 3D toy model, simplified geometric form, all surface details removed, chubby rounded silhouette, clean low-poly shape, physically accurate material for this object, natural surface texture and color of the original, subtle specular highlight, soft shadow underneath, white background, isometric view, studio HDRI lighting, Blender Cycles PBR quality.

Why two steps: Giving too many constraints at once (shape + material + light) makes it easy to lose track of one thing while focusing on another. First fix the shape, lock in the satisfactory form, then iterate separately on material— divide and conquer, with much higher controllability. This two-step method of "fix shape first then adjust texture" is also reused in the texture optimization in 2.6.

2.6 Texture optimization / highly stylized 3D avatars

  • Insufficient texture: In the first step only say "Improve the material quality", in the second step add targeted words on the result ("make the stars more bulging, like inflatable balloons floating in the air").Why: Let AI make a big revision first, then make small-step fine-tuning; this converges more easily than writing everything at once.
  • Highly stylized 3D avatars(turning a person into a high-gloss plastic "mean girl" designer toy head): relies on piling a long string of texture words — glossy vinyl finish, holographic iridescent eyeshadow, subsurface scattering, 85mm lens close-up, ultra-smooth high-gloss cartoon-style plastic. This type uses "adjective density to trade for style intensity"; use reference images + long prompts together.

2.7 Hand-drawn sketch → complete concept

Input a hand-drawn sketch + visual reference + a one-sentence prompt defining the content to produce a visual concept design. Framework: Redraw Figure 1 in the visual style and feel of Figure 2, no text in the image. (Redraw the form of Figure 1 in the style of Figure 2, with no text appearing) — and in the prompt explain the semantics of Figure 1(e.g. "two speech bubbles stacked vertically, top = AI bottom = user"), to help AI understand what you drew.

2.8 IP design reference sites (for finding reference images)

Three high-taste IP design references shared by Will: koto.com/projects/yazio (brand IP), design.duolingo.com/illustration (Duolingo illustration and shape language system), stickymonsterlab.com (character design studio). When looking for references, prioritize digging into work from professional teams instead of looping through AI-generated results for inspiration.


III. KV Key Visual Design

What assets to create: Event headers, Banners, key visual large images (KV = Key Visual, the core visual of a project/event). There are two approaches.

3.1 Approach A: Reskinning (replacing the IP on a mature reference image)

The fastest method: find a reference image with mature composition and atmosphere,replace the characters in it with your own IP, then fine-tune the details. If you are worried about being accused of plagiarism, make bigger changes to the poses and environment.

Example prompt: Replace the puppy in Image 2 with the dinosaur in Image 1, use the puppy's pose as reference, have the dinosaur go surfing, add small fish appearing in the sea, aspect ratio 9:16, this is a key visual header, the image should be exquisite, style references Image 2, no text appears in the image (if text must appear, use only English).

Technique for adding details step by step: Don't pile on objects all at once,add one per step(add the frog first, then the swimming goggles, then the castle), describe each step separately. When adding living creatures (animals/people), it is best to paste in a pre-designed reference; relying purely on text description tends to produce distorted results.

3.2 Approach B: Original creation (hand-drawn line art → AI applies style)

A more original method: hand-draw the line art/colored draft of the IP or scene yourself on an iPad (using Procreate etc.), then have the AI only apply style without altering the form.

Example prompt: Image 1 is my hand-drawn cartoon image of Zeus; please, on the premise of not changing the form, reference the texture of Image 2, enhance the lighting, texture and 3D feel, and polish it to be more refined; let the light behind be blocked by the figure in front, creating a Tyndall light (visible light beams in the air) effect.Note: No realistic human figures, only this kind of minimalist geometric IP form.

3.3 Three pitfalls (Why these constraints exist)

  • Explicitly emphasize a 1:1 head-to-body ratio. Why: AI by default will pull the proportions of chibi IP toward real human proportions (making the body longer); when making cute-style KV, you must explicitly write "body significantly smaller than head, head-to-body ratio approximately 1:1" every time.
  • When changing poses, specifically name the IP that needs to be changed. When there are multiple characters in the frame, the AI will make random changes if you don't specify which one (Will once complained, "I didn't expect even the frog to be put to sleep").
  • Continuous generation causes "result contamination": If you generate repeatedly within the same conversation, earlier results will affect later ones. Solution: add the sentence "Please forget previous results and start a new conversation" at the beginning of the prompt.

IV. Stylized Illustrations & State Graphics

What assets to create: Style-consistent illustrations in product UI — onboarding guide pages, empty state graphics, illustrations for each functional module. A frequent pain point for PMs: getting designers scheduled for these graphics is slow, and piecing them together yourself doesn't produce a cohesive set.

Core principle:Lock the style, free the form. Feed in one artist style reference image, have the AI copy the color palette/brushwork/texture exactly, but let it customize shapes and ideas according to the theme, and generate a full set at once.

Skeleton (EN):Create 6 stylistically consistent illustrations for the website onboarding flow. The visual style should reference the artist's color palette, brushwork, and texture in the images, but the shapes and creative concepts should be defined by you based on the themes. The themes include: Sign-up, dashboard analytics, data import, notifications, collaboration, and subscription upgrade.

Why this division of labor: What you want is "a set of images that look like they were made by the same person", so the style (color palette/brushwork/texture) must be locked down and copied from the reference; but the content of each image (registration, data import, collaboration...) is different, so letting the AI freely handle the forms actually looks more natural. Giving 6 themes at once = generating 6 matching images at once, which is more efficient than generating them one by one and then aligning the style.


V. Visual Reconstruction Remix (Multi-image Fusion)

What assets to create: Take one dimension from each of multiple reference images,fuse them into one custom visual — 3D logos, in-vehicle HMI interfaces, surreal concept art. This is the "advanced combo move" of all the techniques above.

Core principle:Customize the form, leave the rest to AI. It is recommended that you define the form yourself (logo / IP character / product form), and assign "referenceable" dimensions such as color, material rendering, lighting, and usage scenarios to different reference images. Each reference image is responsible for only one dimension.

5.1 Basics: Take one dimension from each of multiple images

Example prompt: Reference the form of Image 1, reference the texture and rendering of Image 2, reference the self-illumination angle and effect of Image 3, create a 1:1 3D logo design.

Split "form / texture / light" across three images, each managing one segment — this is the practical application of "visual reference dimensions" (Section Six): you must first know what dimensions an image can be split into before you can accurately "take only this dimension".

5.2 Advanced: 4-step iteration for in-vehicle HMI (full workflow demonstration)

A real multi-step iteration example showing how Remix goes from messy collage to finished product:

  1. Step1 Establish the skeleton: Have the AI first help you write the requirement into a bilingual Chinese-English prompt (color palette texture rendering of Image 1 + perspective/road/city form of Image 2, fused into a long strip in-vehicle map).Letting the AI help write the prompt first is a good habit — you describe the requirement, and it produces a structured prompt.
  2. Step2 Modify local parts: Keep the frame unchanged, only replace the left-side information with weather/temperature/music cards, use frosted glass effect for the cards, all text in English, consistent width.
  3. Step3 Add transitions: Change half of the interface to a real environment photo to represent a "switching transition state"; when you need a specific color tone,open a separate conversation to have the AI extract the color tone of the reference image into English keywords, then bring them back to use.
  4. Step4 Redo using it as a wireframe: Take the poorly fused collage you roughly dragged together in PS,treat it as a wireframe and feed it to the AI, have it regenerate a complete, style-consistent HMI based on the existing functions and information hierarchy.

Why treat the collage as a wireframe: You don't need to ask the AI to "fix this bad collage", but instead tell it "this is just a sketch, redraw a clean one according to this information structure" — downgrading the bad image's value to "function/layout reference" means the AI won't be led astray by its poor texture. If you need an editable file at the end, you can connect Codex + Figma to generate an initial interface draft on top of the base image.


VI. Visual Reference Dimensions (breaking a reference image down into keywords)

This section is the foundational ammunition depot. Earlier sections repeatedly said "reference images > prompts" and "take form from Image 1, texture from Image 2," but the prerequisite is:you must have the ability to break a reference image down into describable dimensions. Otherwise, you cannot clearly articulate "what is good about this image and which dimension I want to take from it."

Will gave 6 "image breakdown checklists," each breaking down one type of visual material into over a dozen checkable dimensions.How to use: When you see a reference image you like, go through the checklist item by item and ask yourself, "What is it on this dimension?" Extract the dimensions you want and write them into the prompt. This also directly solves the problem of "how to translate vague aesthetic feelings into precise prompts."

Checklist What to break down Examples of several most useful dimensions
Photography Real photo texture Time/direction/hardness/color of light · Focal length (wide-angle/standard/telephoto) · Depth of field · Film style (Kodak warm tones/Fuji cyan tones/CineStill red halation) · Emotional tone
Illustration Illustration style Style genre (flat/retro/Y2K/isometric/pixel) · Presence or absence of lines + line weight and hand feel · Flat color fills vs. gradients · Halftone dots (comic feel) · Aged/worn look
3D Rendering 3D texture Material type + reflection/transparency/refraction/SSS (subsurface scattering) · Self-illumination · Light direction/hardness/volumetric light · Motion type (floating/flowing/exploding/growing) · Post-processing (bloom / chromatic aberration)
Brand Full set of brand materials Brand primary colors + logo system · Carrier type (11 tiers, from mini stickers to giant outdoor billboards) · Craft techniques (gold foil stamping/embroidery/laser engraving) · Presentation method (flat lay overhead shot / single-product hero shot)
Character Design IP characters Head-to-body ratio (1:1 extremely cute → 1:5+) · Eye shape/size/position · Signature symbols (ears/horns/accessories) · Expressive variability (determines whether emoji/sticker packs can be made) · Extensibility (potential for emoji/sticker packs, figurines, and animation)
Product Photography Product images Presentation type (single-product hero / with a hand / with props / with ingredient demonstration) · Shot scale (full shot → macro) · Lighting (high-key vs. low-key · rim light) · Physical state (floating/pouring/cut open/splashing)

Several breakdown points especially practical for PMs:

  • "Naming with a film style" in photography: When you want a certain "premium photo feel," rather than saying "make it prettier," specify CineStill 夜景红光晕 or 柯达暖调 — these are concrete anchors the model has learned (the same logic as packing in camera parameters in §1.2).
  • "Expressive variability / extensibility" in character design: When creating a product IP, this is a commercial judgment point — whether you can make more than 16 expressions (sticker potential), whether the form is too complex to animate (animation potential). Overly complex forms = subsequent derivatives and animation will both be limited.
  • 11-tier grading of brand carriers(mini stickers / small print / packaging / apparel / daily goods / outdoor equipment / digital endpoints / spatial signage / vehicle displays / giant outdoor...): when producing brand merch/VI rollouts, counting against this checklist will make you miss no materials.

Why this section is most worth reviewing repeatedly: Tools will change, models will upgrade, but the ability to "break a reference image down into dimensions" is transferable. Mastering these 6 checklists ≈ mastering the vocabulary for "describing what you see in images" — this is the fundamental way you can consistently and precisely drive any image model, rather than memorizing a specific prompt.


One-page quick reference

What I want to make Which section to go to One-sentence core principle
Fix blurry images / upscale §1 Lock identity and composition, only fill in details, strictly prohibit adding new elements; stuff camera parameters for portraits
Make App 3D icons (as a set) §2.2-2.3 Feed in a style baseline image, force unified perspective/orientation/scaling
Make blind box/soft vinyl IP §2.4 chubby + matte + dot eyes + Kakao Friends aesthetic
Make skeuomorphic icons §2.5 Define the form first (low poly) then adjust materials separately
Make event key visual KV §3 Reskin (change the IP on the reference image) or original creation (hand-draw + AI applies style); explicitly fix head-to-body ratio at 1:1
Make UI state illustrations (as a set) §4 Lock color palette and brushwork, free the form, generate 6 at once
Fuse multiple images into a custom visual §5 Customize the form, take color/texture/light from one reference image each; redo bad collages as wireframes
Don't know how to describe a reference image §6 Extract keywords dimension by dimension against the 6 image breakdown checklists

Three iron rules running through the whole article:① Reference images > prompts (spend 50% of the time finding images). ② When doing image-to-image, lock down what stays unchanged, only modify what needs changing (lock identity/form/composition as needed, write out negative constraints fully). ③ Iterate step by step (define form first then adjust texture, add one element per step, switch conversations to prevent contamination). The ceiling of aesthetics still depends on humans; AI only speeds up and stabilizes the "engineered visual work".

Sources and related materials