Wiro AI Media Assets

--- name: wiro-media-assets description: 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.

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本