Stats
Actions
Tags
From rune
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/rune:asset-creatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
marketing (L2): banners, OG images, social graphicsdesign (L2): UI asset generation during design phase@rune/ui: design system assetsNone — pure L3 utility.
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. 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 includeoutput_dir — where to save files (default: assets/)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:
#0c1419 bg, #ffffff text, #2196f3 accent#faf8f3 bg, #1a1a1a text, #1d4ed8 accent#fffef9 bg, #1a1a1a text, 2px solid #2a2a2a border, 4px 4px 0 #2a2a2a shadowrgba(255,255,255,0.05) bg, backdrop-filter: blur(12px), rgba(255,255,255,0.1) borderSelect typography:
Apply standard dimensions by asset type if not specified:
Use Write to generate the asset files:
For SVG icons and logos:
viewBox attributexmlns="http://www.w3.org/2000/svg"role="img" and aria-label for accessibilityassets/[name].svgFor OG images and social cards:
assets/[name]-og.htmlFor icon sets:
<symbol> elements<symbol id="icon-[name]"> with viewBoxassets/icons/sprite.svgFor HTML banners:
assets/banner-[platform].htmlIf style contains "dark" or the asset type is OG/banner, also create a light mode variant:
-dark (e.g. og-dark.html)-light (e.g. og-light.html)For icon sets, create both a filled and outline variant if applicable.
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]
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.
Structured report with generated file paths, usage instructions (HTML snippets), and design tokens used. See Step 5 Report above for full template.
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 |
~500-1500 tokens input, ~500-1000 tokens output. Sonnet for creative quality.
npx claudepluginhub rune-kit/rune --plugin @rune/analyticsGenerates 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.
Generates favicons (multi-size), PWA icons, Open Graph images, apple-touch-icon, and HTML meta tags from a logo or brand text. Use before deploying a site, landing page, or PWA.
Designs and iterates on SVG logos via structured interviews for format, style, colors, and sizes. Generates side-by-side previews and PNG exports at standard sizes.