菜单
Creates 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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | asset-creator |
| description | Creates 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. |
| metadata | {"author":"runedev","version":"0.2.0","layer":"L3","model":"sonnet","group":"media","tools":"Read, Write, Edit, Glob, Grep"} |
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.
Design system reasoning. Maps product domain to style, palette, typography, and platform-specific patterns. Generates .rune/design-system.md as the shared design contract for all UI-generating skills.
Performance regression gate. Detects N+1 queries, sync-in-async, missing indexes, memory leaks, and bundle bloat before they reach production. Ranks findings by Cost Impact Hierarchy (architecture > data transfer > compute > DB > caching) so fix priority maps to actual unit-cost reduction.
Code quality review — patterns, security, performance, correctness. Finds bugs, suggests improvements, triggers fix for issues found. Escalates to opus for security-critical code.
Gathers N independent, decorrelated perspectives across model families (external CLIs when present, subagents when not) and arbitrates inline. Use when a decision needs genuine debate — not same-model echo — for critique, review, or judge calls. Honest about degradation: never claims 'consensus' from a single model family.
Environment-aware pre-flight check. Use when starting work in a new environment, switching machines, or when 'works on my machine' bugs surface. Validates OS, runtime versions, installed tools, port availability, env vars, and disk space BEFORE coding starts. Like sentinel but for the environment, not the code.
Creative ideation and solution exploration. Generates multiple approaches with trade-offs, uses structured frameworks (SCAMPER, First Principles), and hands off to plan for structuring.