Wiro AI Media Assets

Make media assets for a software project with Wiro AI models and put them where the project expects them, sized and wired in, for example a hero image, an Open Graph or social card, a favicon and app icons, product shots, illustrations, a short looping video, a voice-over, background music or a 3D model. Use when the user wants images, icons, video or audio created for their website, app, extension, docs or game, or asks to replace a placeholder asset.

Media assets for a project with Wiro AI

The job has four parts: understand what the project needs, make the asset with a fitting Wiro model, fit it to the exact size and format, and put it where the project's code looks for it.

This skill uses the Wiro MCP tools (search_models, recommend_model, get_model_schema, run_model, wait_for_task). Without them, use the REST API from the wiro-ai skill.

1. Look at the project first

• Find the framework and where it keeps static files and imported assets (see the table below), and the files that reference assets: HTML heads, layouts, manifest.json or site.webmanifest, app.json, pubspec.yaml, Xcode asset catalogs, Android res/.
• Look for brand material already in the repo: logos, colors in CSS variables or theme files, fonts, existing images. Match them, and start from the real logo or product photo instead of inventing one.
• Note what each slot needs: pixel size, aspect ratio, file format, transparent background or not, file size budget, light and dark variants.
• If the request is too thin to act on ("make some images for the site"), ask one short question: which pages or slots, what style, and how many.

2. Pick the model and the price

• Find a model for each asset: recommend_model with two or three key words ("text to image", "remove background", "image to video", "text to speech"), or search_models with the category (text-to-image, image-editing, image-to-video, text-to-video, text-to-speech, text-to-music, 3d-generation), sorted by ratedusercount. Read the pick with get_model_schema for its parameters and its price at your settings.
• Text inside an image (a title on a social card, a word in a logo) needs a model known for readable text; check its description. Keep long text out of the image and lay it out in HTML instead when the slot allows.
• A real product, person or logo starts from its photo: use an image editing model with a public link to that photo. Text to image would invent it.
• Before you run anything, list the assets with the model, the settings and the expected cost of each, plus the total. One clear yes covers exactly that list. Make one asset first when the style is uncertain, and the rest once the user likes it.
• Only successful runs are charged. Never run again on your own: a second run is a second charge.

3. Make, check and fit

1. Generate at the model's closest aspect ratio and at least the final size, then crop or resize locally. Most models take a fixed set of ratios, so an Open Graph card (1200x630, about 1.91:1) is made at 16:9 and cropped.
2. Look at the result before you place it: the subject, the composition, the spelling of any text, and the edges where a crop will cut.
3. Fit it with a local tool: sips on macOS, ImageMagick (magick) or ffmpeg elsewhere.

bash

# Crop to 1200x630 from the center, then convert
magick input.png -resize 1200x630^ -gravity center -extent 1200x630 public/og.png
ffmpeg -i input.png -vf "scale=1200:630:force_original_aspect_ratio=increase,crop=1200:630" public/og.png

# Square icon sizes from one 1024 px master (sips is built into macOS)
sips -z 180 180 icon-1024.png --out public/apple-touch-icon.png
magick icon-1024.png -resize 512x512 public/icon-512.png
magick icon-1024.png -define icon:auto-resize=48,32,16 public/favicon.ico

# Web images: WebP at good quality
magick hero.png -resize 1920x -quality 82 public/images/hero.webp

# Short muted loop for the web, plus a poster frame
ffmpeg -i clip.mp4 -an -vf "scale=1280:-2" -c:v libx264 -crf 24 -preset slow -movflags +faststart public/videos/hero.mp4
ffmpeg -i clip.mp4 -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 34 -b:v 0 public/videos/hero.webm
ffmpeg -i clip.mp4 -frames:v 1 -q:v 3 public/videos/hero-poster.jpg

# Even loudness for a voice-over or music bed
ffmpeg -i voice.wav -af loudnorm=I=-16:TP=-1.5:LRA=11 -b:a 128k public/audio/intro.mp3

4. Remove a background for a transparent icon or cut-out with a background removal model, and keep PNG or WebP so the transparency stays.

4. Put it in place and wire it in

Project	Static files (served at /)	Imported assets
Next.js	public/	app/ file conventions: app/icon.png, app/apple-icon.png, app/opengraph-image.png, app/twitter-image.png, app/favicon.ico
Vite, React, Vue, Svelte	public/	src/assets/ (imported from code)
SvelteKit	static/	src/lib/assets/
Nuxt	public/	assets/ (app/assets/ in Nuxt 4)
Astro	public/	src/assets/ (with astro:assets)
Angular	public/ (older apps: src/assets/)
Remix, React Router	public/	app/ imports
Gatsby	static/	src/images/
Hugo	static/	assets/ (Hugo Pipes)
Jekyll	assets/
Django	the app's static/
Rails	public/	app/assets/images/
Laravel	public/	resources/ (with Vite)
WordPress theme	the theme's assets/
Flutter	assets/, listed under flutter: assets: in pubspec.yaml
Expo, React Native	assets/, with icon, android.adaptiveIcon and the splash screen settings in app.json
iOS	Assets.xcassets (one 1024x1024 AppIcon)
Android	app/src/main/res/mipmap-* (launcher icons), res/drawable*
Browser extension	an icons/ folder, listed in manifest.json icons (16, 32, 48, 128)
Electron	build/icon.png (1024x1024) for the packager

Then update what points to the asset, and show the user the diff:

• Social cards: <meta property="og:image"> with an absolute URL, og:image:width 1200 and og:image:height 630, and <meta name="twitter:card" content="summary_large_image">. In the Next.js App Router, a file named opengraph-image.png in a route folder needs no tags.
• Icons: <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, and 192 and 512 px entries in the web manifest ("purpose": "maskable" for an icon with safe padding).
• Images on pages: width and height attributes, alt text that describes the image, and loading="lazy" below the fold.
• Video: <video autoplay muted loop playsinline poster="..."> with the WebM and MP4 sources.
• 3D: a GLB file under the static folder, shown with <model-viewer src="/models/item.glb"> or the project's 3D library.

Rules

• Never overwrite an existing asset without asking: write the new one next to it (hero-v2.webp) or ask first.
• Name files in kebab-case after what they show (pricing-hero.webp, not image1.png), and keep the sizes in the names of icon sets where the project does (icon-192.png).
• Keep web images small: a hero under about 300 KB, a social card under 1 MB. Prefer WebP or AVIF for photos, PNG for flat art and transparency, SVG for logos you already have as vectors.
• Keep the original model output out of the shipped folders, or delete it once the final files exist, unless the user wants it kept.
• Leave commits to the user, and list every file you added or changed.
• Show each asset you made: images inline when you can, links for the rest, and the cost of each run.