How to generate AI assets for the web

Brief, generate, animate and ship images, loops and 3D models without breaking the rules.

TL;DR

The prompt is a brief. You still art-direct and reject most of the output.
Approve a still before you animate it.
Ship video muted, with a poster frame that doubles as the reduced-motion version.

Goal: hero stills, textures, ambient loops and 3D objects that look chosen, not generated.

You need

Higgsfield (through its MCP) or another generator. It runs on credits, so check the balance first.
Your palette as hex values.

 brief ──► still ──► motion ──► finish ──► ship
 subject    2-4        image to    upscale,    compress, poster,
 hex, zone  variants   video 4-8s  cut out     reduced-motion fallback
            pick one   loopable    reframe

Steps

1. Write the brief like a layout spec

Canvas first. Size, aspect, and what it is for ("hero background, text on the left third").
Hex, not names. #0F3D2E is a colour. "Forest green" is a guess.
Zones. Say where things go: "upper third", "right side, behind the subject".
One style sentence, repeated on every prompt in a set.
No text in the image. Set real text on top in HTML.
A safety line. No real people, logos, flags or weapons without the rights.

Canvas16:9 hero background, text will sit on the left third

Groundnear-black #080808 with fine film grain

Zonesink concentrated right; left 40% stays clean for type

Subjectwhite ink #F5F5F5 drifting in water, one thread of magenta #FF00A8

Style lockflat, printed, tactile, soft misregistration

Safetyno text, no people, no logos

A production prompt reads like a layout spec: canvas, ground, zones, subject, style and safety, each on its own line. Hex values beat colour names.

2. Pick the model for the job

Job	Model / tool	Notes
General image, typography, reference edits	`gpt_image_2_5`	The default for ordinary generation
Product, commercial, ad imagery	`marketing_studio_image`	Product shots and ad layouts
Portraits, fashion, editorial people	`soul_2`	With a trained Soul ID for a consistent person
General image → video	`seedance_2_5`	The default video model
Multi-shot, audio, motion transfer	`kling3_0`	Longer, directed sequences
2K keyframes, mixed references	`minimax_h3`	Higher-resolution motion
Copy motion from a video onto a still	`hf_mult_motion_control`	"Genjutsu" motion transfer
Image → 3D model (GLB)	`generate_3d`	Drop the GLB straight into three.js / R3F
Clean-up	`upscale_image`, `upscale_video`, `remove_background`, `outpaint_image`, `reframe`	Finish assets for each placement

3. Approve a still, then animate it

Generate two to four variants. Pick one. Only then turn it into a 4 to 8 second loop. Video costs more and inherits every flaw of the frame it starts from.

4. Copy a prompt from the library

Copy, then change the bracketed parts.

Wide 16:9 hero background for a website. Abstract risograph ink in water: two ink colours,
[#FF5C1F] and [#2F4EC2], overprinted on warm paper [#F2EEE6] with visible paper grain.
Ink concentrated on the right half; the left 40% stays almost clean paper for headline text.
Soft misregistration between the two inks. No text, no objects, no people. Flat, printed, tactile.

5. Ship it with a poster

<div class="hero-media">
  <img src="/hero-poster.jpg" alt="" />          <!-- still frame: loading state + reduced motion -->
  <video autoplay muted loop playsinline preload="metadata" poster="/hero-poster.jpg">
    <source src="/hero.av1.mp4" type="video/mp4; codecs=av01.0.05M.08" />
    <source src="/hero.h264.mp4" type="video/mp4" />
  </video>
</div>

.hero-media { position: relative; }
.hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }          /* the <img> underneath stays visible */
}

Set muted and playsinline, or phones will not autoplay.
Compress hard: a background video over 3 MB is a performance bug.
Check the loop point with two frames, like any motion. See how to verify.

Generation removes the cost of making an asset, not the cost of choosing one. Sites that look designed are the ones where someone wrote a real brief, rejected most of the output, and set the text themselves.

[ex] ai products with great design · 17