Skill

asset-creator

Generates code-based visual assets: SVG icons, OG image HTML templates, social banners, and icon sets. Outputs files with light/dark variants and usage instructions.

Html

Css

design

frontend

npx claudepluginhub rune-kit/rune --plugin @rune/analytics

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Creates code-based visual assets (SVG, CSS, HTML) for projects and marketing. Handles logos, OG images, social cards, and icon sets. Outputs actual files with light/dark variants and usage instructions. This skill creates CODE-based assets — not raster images.

SKILL.md

Similar Skills

web-asset-generator

336

Generates favicons, PWA app icons, and Open Graph social images for Facebook/Twitter/WhatsApp/LinkedIn from logos or text. Includes image resizing, text-to-image, and HTML meta tags.

8 files

web-asset-generator

Generates favicons (multi-size), PWA icons, Open Graph images for social sharing, apple-touch-icon, and HTML meta tags from logo or text. Use before deploying sites, landing pages, or PWAs.

6 tools

dev-team-kit-fv

logo-generator

Generates custom SVG logos and brand kits by scanning project context (README, package.json, CSS, assets). Exports favicons (16-512px + ICO), social images (OG/Twitter), dark/light/mono variants, and HTML preview.

2 files9 tools

skillkit

Stats

Stars67

Forks18

Last CommitApr 27, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

asset-creator

Purpose

Called By (inbound)

marketing (L2): banners, OG images, social graphics
design (L2): UI asset generation during design phase
L4 @rune/ui: design system assets

Calls (outbound)

None — pure L3 utility.

Executable Instructions

Step 1: Receive Brief

Accept input from calling skill:

asset_type — one of: logo | og_image | social_card | icon | icon_set | banner
dimensions — width x height in pixels (e.g. 1200x630 for OG images)
style — description of visual style (e.g. "minimal dark", "comic bold", "glassmorphism")
content — text, brand name, tagline, or icon names to include
output_dir — where to save files (default: assets/)

Step 2: Design

Before writing code, determine design parameters:

Check if the project has .rune/conventions.md — use Read to load color palette and typography
If no conventions file, apply defaults based on style:
- "dark" → #0c1419 bg, #ffffff text, #2196f3 accent
- "light" → #faf8f3 bg, #1a1a1a text, #1d4ed8 accent
- "comic" → #fffef9 bg, #1a1a1a text, 2px solid #2a2a2a border, 4px 4px 0 #2a2a2a shadow
- "glassmorphism" → rgba(255,255,255,0.05) bg, backdrop-filter: blur(12px), rgba(255,255,255,0.1) border
Select typography:
- Display/headlines: Space Grotesk 700
- Body: Inter 400
- Monospace/prices: JetBrains Mono 700
Apply standard dimensions by asset type if not specified:
- OG image: 1200x630px
- Twitter card: 1200x628px
- Instagram square: 1080x1080px
- Icon: 24x24px (or 512x512px for app icon)

Step 3: Create

Use Write to generate the asset files:

For SVG icons and logos:

Write inline SVG with proper viewBox attribute
Use xmlns="http://www.w3.org/2000/svg"
Include role="img" and aria-label for accessibility
Optimize paths — no unnecessary groups or transforms
File: assets/[name].svg

For OG images and social cards:

Create an HTML file with embedded CSS
Use absolute pixel values (no relative units) for pixel-perfect output
Include Google Fonts import for Space Grotesk and Inter
File: assets/[name]-og.html

For icon sets:

Create a single SVG sprite file with <symbol> elements
Each icon as a named <symbol id="icon-[name]"> with viewBox
Include a usage example comment at the top
File: assets/icons/sprite.svg

For HTML banners:

Self-contained HTML with all styles inline (no external deps)
File: assets/banner-[platform].html

Step 4: Variants

If style contains "dark" or the asset type is OG/banner, also create a light mode variant:

Suffix dark variant with -dark (e.g. og-dark.html)
Suffix light variant with -light (e.g. og-light.html)

For icon sets, create both a filled and outline variant if applicable.

Step 5: Report

Output the following:

## Assets Created

### Generated Files
- [asset_type]: [file_path] ([dimensions])
- [asset_type] (dark): [file_path]
- [asset_type] (light): [file_path]

### Usage Instructions
- OG image: Add <meta property="og:image" content="[url]/[filename]"> to <head>
- SVG icon: <img src="assets/[name].svg" alt="[description]">
- Icon sprite: <svg><use href="assets/icons/sprite.svg#icon-[name]"></use></svg>
- Banner: Open [file] in browser, screenshot at [width]x[height]

### Design Tokens Used
- Background: [color]
- Text: [color]
- Accent: [color]
- Font: [font-family]

Note

This skill creates CODE-based assets (SVG/CSS/HTML). It does not generate raster images (PNG/JPG) directly — those require screenshotting the generated HTML files using browser-pilot.

Output Format

Structured report with generated file paths, usage instructions (HTML snippets), and design tokens used. See Step 5 Report above for full template.

Constraints

MUST confirm output format and dimensions before generating
MUST NOT generate copyrighted or trademarked content
MUST save to project assets directory — not random locations

Sharp Edges

Known failure modes for this skill. Check these before declaring done.

Failure Mode	Severity	Mitigation
Generating copyrighted or trademarked content (logos, characters)	CRITICAL	Constraint 2: only generate original assets — no brand marks, characters, or protected symbols
Saving to random location instead of assets/	MEDIUM	Constraint 3: output_dir defaults to assets/ — always save there
Missing light/dark variants for OG/banner assets	MEDIUM	Step 4: dark mode variant required for any OG/banner asset
Generating raster images (PNG/JPG) directly	MEDIUM	This skill creates SVG/HTML CODE only — raster requires browser-pilot screenshot of generated HTML

Done When

Asset type, dimensions, and style confirmed from input
Design tokens from .rune/conventions.md loaded (or defaults applied)
Asset files written to assets/ directory in correct format (SVG/HTML)
Light/dark variants created if applicable (OG/banner)
Assets Created report emitted with file paths and usage instructions

Cost Profile

~500-1500 tokens input, ~500-1000 tokens output. Sonnet for creative quality.