asset-creator
SkillFiles & storageCreates code-based visual assets — SVG icons, OG image HTML templates, social banners, and icon sets. Use when generating visuals as code (vector/HTML), NOT raster images — for raster generation see @rune-pro/media. Outputs files with usage instructions.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the asset-creator skill
What this skill tells your AI
The instructions your AI receives, as published by rune-kit/rune in skills/asset-creator/SKILL.md and read by ahel’s review.
Purpose
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.
Called By (inbound)
marketing(L2): banners, OG images, social graphicsdesign(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|bannerdimensions— width x height in pixels (e.g.1200x630for OG images)style— description of visual style (e.g. "minimal dark", "comic bold", "glassmorphism")content— text, brand name, tagline, or icon names to includeoutput_dir— where to save files (default:assets/)
Step 2: Design
Before writing code, determine design parameters:
-
Check if the project has
.rune/conventions.md— useReadto load color palette and typography -
If no conventions file, apply defaults based on
style:- "dark" →
#0c1419bg,#fffffftext,#2196f3accent - "light" →
#faf8f3bg,#1a1a1atext,#1d4ed8accent - "comic" →
#fffef9bg,#1a1a1atext,2px solid #2a2a2aborder,4px 4px 0 #2a2a2ashadow - "glassmorphism" →
rgba(255,255,255,0.05)bg,backdrop-filter: blur(12px),rgba(255,255,255,0.1)border
- "dark" →
-
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
viewBoxattribute - Use
xmlns="http://www.w3.org/2000/svg" - Include
role="img"andaria-labelfor 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]">withviewBox - 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 |
| Drawing system/architecture/flow/sequence/state/ER/swimlane diagrams | MEDIUM | These are editorial diagrams, not icons/OG assets — route to diagram |
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.
Signals
- GitHub stars
- 86
- Forks
- 27
- Last commit
- Aug 2026
Advanced
- Catalog kind
- skill
- Gateway key
asset-creator- Source
- github.com/rune-kit/rune