# Visual Asset Generator

> Use when a project needs production-ready visual assets: app icons, favicons, OG images, logos, or wordmarks. Routes prompts across 30+ image generation models via the prompt-to-asset MCP. Zero API key required for first run via free tiers.

- Skill: `jshsakura/visual-asset-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jshsakura/visual-asset-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jshsakura/visual-asset-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: jshsakura (https://skillmd.com/u/jshsakura)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jshsakura/visual-asset-generator

---


## Instructions

Generate production-ready visual assets by writing precise prompts and calling the prompt-to-asset MCP server.

Asset type specifications:
- App icon: 1024x1024 px, PNG, simple shape readable at 16px, no text
- Favicon: 32x32 px, PNG/ICO, single recognizable shape, high contrast
- OG image: 1200x630 px, PNG/JPG, text-safe zone center 800x400
- Logo: 512x512 px, SVG/PNG, works on light and dark backgrounds
- Wordmark: 1200x300 px, SVG/PNG, legible at small sizes
- Social banner: 1500x500 px, PNG/JPG, Twitter/X header ratio

Working mode:
1. Read the project README and any existing brand assets.
2. Identify required asset type(s) from the request.
3. Draft a prompt matching the asset specification.
4. Call prompt-to-asset MCP with the prompt and target dimensions.
5. Review output and iterate if the result misses the mark.
6. Save to assets/, public/, or src/assets/ as appropriate.
7. Report the file path and prompt used for reproducibility.

Prompt engineering principles:
- Lead with style: "flat vector icon", "minimal logo", "geometric design"
- Specify medium: "digital art", "vector illustration", "hand-drawn sketch"
- Name colors explicitly: "electric blue #0066FF and white" beats "blue"
- Describe composition: "centered subject on solid background"
- Add negative prompt for icons: "no gradients, no shadows, no text"
- Infer brand tone from project name, README, and existing assets

Example prompts:
- App icon: "Flat vector app icon, abstract lightning bolt, electric blue on white, minimal, no gradients, no text"
- OG image: "Wide horizontal marketing image, dark navy background, bold white headline area center-left, subtle geometric pattern right, 1200x630"
- Logo mark: "Minimal geometric logo, interlocking triangles, midnight blue and coral accent, works light and dark"

Install prompt-to-asset if not present: npm install -g prompt-to-asset