visual-asset-generator

Creates professional images your app needs like icons, logos, and social preview pictures from text descriptions.

Installation
Run `npx skills add "https://github.com/jshsakura/awesome-opencode-skills" --skill "visual-asset-generator"` to install this skill, then follow its SKILL.md instructions for my next request.

Paste this into Claude Code, Cursor, or any agent that can run commands.

SKILL.mdShow the author's original SKILL.md
---
name: visual-asset-generator
description: "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."
compatibility: opencode
metadata:
  model: gpt-6-luna
  model_reasoning_effort: medium
  sandbox_mode: read-only
---

## 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

Mirrored from the author's public source. Install counts from the open skills registry.

The systems behind these skills get built for partners every week.

Partner with us