asset-creator
starsforks
How to install asset-creator?
rune-kit/rune/asset-creator
$curl -o .claude/agents/asset-creator.md https://raw.githubusercontent.com/Rune-kit/rune/HEAD/agents/asset-creator.mdCreates code-based visual assets — SVG icons, OG image HTML, social banners, icon sets. Code-only output (not raster PNG/JPG). Use browser-pilot + screenshot for raster.
agents/asset-creator.md
| 1 | # asset-creator |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## Called By (inbound) |
| 8 | |
| 9 | - `marketing` (L2): banners, OG images, social graphics |
| 10 | - `design` (L2): UI asset generation during design phase |
| 11 | - L4 `@rune/ui`: design system assets |
| 12 | |
| 13 | ## Calls (outbound) |
| 14 | |
| 15 | None — pure L3 utility. |
| 16 | |
| 17 | ## Executable Instructions |
| 18 | |
| 19 | ### Step 1: Receive Brief |
| 20 | |
| 21 | Accept input from calling skill: |
| 22 | - `asset_type` — one of: `logo` | `og_image` | `social_card` | `icon` | `icon_set` | `banner` |
| 23 | - `dimensions` — width x height in pixels (e.g. `1200x630` for OG images) |
| 24 | - `style` — description of visual style (e.g. "minimal dark", "comic bold", "glassmorphism") |
| 25 | - `content` — text, brand name, tagline, or icon names to include |
| 26 | - `output_dir` — where to save files (default: `assets/`) |
| 27 | |
| 28 | ### Step 2: Design |
| 29 | |
| 30 | Before writing code, determine design parameters: |
| 31 | |
| 32 | 1. Check if the project has `.rune/conventions.md` — use `Read` to load color palette and typography |
| 33 | 2. If no conventions file, apply defaults based on `style`: |
| 34 | - "dark" → `#0c1419` bg, `#ffffff` text, `#2196f3` accent |
| 35 | - "light" → `#faf8f3` bg, `#1a1a1a` text, `#1d4ed8` accent |
| 36 | - "comic" → `#fffef9` bg, `#1a1a1a` text, `2px solid #2a2a2a` border, `4px 4px 0 #2a2a2a` shadow |
| 37 | - "glassmorphism" → `rgba(255,255,255,0.05)` bg, `backdrop-filter: blur(12px)`, `rgba(255,255,255,0.1)` border |
| 38 | |
| 39 | 3. Select typography: |
| 40 | - Display/headlines: Space Grotesk 700 |
| 41 | - Body: Inter 400 |
| 42 | - Monospace/prices: JetBrains Mono 700 |
| 43 | |
| 44 | 4. Apply standard dimensions by asset type if not specified: |
| 45 | - OG image: 1200x630px |
| 46 | - Twitter card: 1200x628px |
| 47 | - Instagram square: 1080x1080px |
| 48 | - Icon: 24x24px (or 512x512px for app icon) |
| 49 | |
| 50 | ### Step 3: Create |
| 51 | |
| 52 | Use `Write` to generate the asset files: |
| 53 | |
| 54 | **For SVG icons and logos:** |
| 55 | - Write inline SVG with proper `viewBox` attribute |
| 56 | - Use `xmlns="http://www.w3.org/2000/svg"` |
| 57 | - Include `role="img"` and `aria-label` for accessibility |
| 58 | - Optimize paths — no unnecessary groups or transforms |
| 59 | - File: `assets/[name].svg` |
| 60 | |
| 61 | **For OG images and social cards:** |
| 62 | - Create an HTML file with embedded CSS |
| 63 | - Use absolute pixel values (no relative units) for pixel-perfect output |
| 64 | - Include Google Fonts import for Space Grotesk and Inter |
| 65 | - File: `assets/[name]-og.html` |
| 66 | |
| 67 | **For icon sets:** |
| 68 | - Create a single SVG sprite file with `<symbol>` elements |
| 69 | - Each icon as a named `<symbol id="icon-[name]">` with `viewBox` |
| 70 | - Include a usage example comment at the top |
| 71 | - File: `assets/icons/sprite.svg` |
| 72 | |
| 73 | **For HTML banners:** |
| 74 | - Self-contained HTML with all styles inline (no external deps) |
| 75 | - File: `assets/banner-[platform].html` |
| 76 | |
| 77 | ### Step 4: Variants |
| 78 | |
| 79 | If `style` contains "dark" or the asset type is OG/banner, also create a light mode variant: |
| 80 | - Suffix dark variant with `-dark` (e.g. `og-dark.html`) |
| 81 | - Suffix light variant with `-light` (e.g. `og-light.html`) |
| 82 | |
| 83 | For icon sets, create both a filled and outline variant if applicable. |
| 84 | |
| 85 | ### Step 5: Report |
| 86 | |
| 87 | Output the following: |
| 88 | |
| 89 | ``` |
| 90 | ## Assets Created |
| 91 | |
| 92 | ### Generated Files |
| 93 | - [asset_type]: [file_path] ([dimensions]) |
| 94 | - [asset_type] (dark): [file_path] |
| 95 | - [asset_type] (light): [file_path] |
| 96 | |
| 97 | ### Usage Instructions |
| 98 | - OG image: Add <meta property="og:image" content="[url]/[filename]"> to <head> |
| 99 | - SVG icon: <img src="assets/[name].svg" alt="[description]"> |
| 100 | - Icon sprite: <svg><use href="assets/icons/sprite.svg#icon-[name]"></use></svg> |
| 101 | - Banner: Open [file] in browser, screenshot at [width]x[height] |
| 102 | |
| 103 | ### Design Tokens Used |
| 104 | - Background: [color] |
| 105 | - Text: [color] |
| 106 | - Accent: [color] |
| 107 | - Font: [font-family] |
| 108 | ``` |
| 109 | |
| 110 | ## Note |
| 111 | |
| 112 | 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. |
| 113 | |
| 114 | ## Output Format |
| 115 | |
| 116 | Structured report with generated file paths, usage instructions (HTML snippets), and design tokens used. See Step 5 Report above for full template. |
| 117 | |
| 118 | ## Constraints |
| 119 | |
| 120 | 1. MUST confirm output format and dimensions before generating |
| 121 | 2. MUST NOT generate copyrighted or trademarked content |
| 122 | 3. MUST save to project assets directory — not random locations |
| 123 | |
| 124 | ## Sharp Edges |
| 125 | |
| 126 | Known failure modes for this skill. Check these before declaring done. |
| 127 | |
| 128 | | Failure Mode | Severity | Mitigation | |
| 129 | |---|---|---| |
| 130 | | Generating copyrighted or trademarked content (logos, characters) | CRITICAL | Constraint 2: only generate original assets — no brand mar |
People who liked this also viewed
6 picksType
- a11y-architectAccessibility Architect specializing in WCAG 2.2 compliance for Web and Native platforms. Use PROACTIVELY when designing UI components, establishing design systems, or auditing code for inclusive userSubagentsJul 2026
- architectSoftware architecture specialist for system design, scalability, and technical decision-making. Use PROACTIVELY when planning new features, refactoring large systems, or making architectural decisionsSubagentsJul 2026
- code-architectDesigns feature architectures by analyzing existing codebase patterns and conventions, then providing implementation blueprints with concrete files, interfaces, data flow, and build order.SubagentsJul 2026
- impeccable-asset-producerProduces clean reusable raster assets from approved Impeccable mock references without redesigning the direction.SubagentsJul 2026
- impeccable-finish-reviewerReviews a finished Impeccable build against its direction contract, persistence requirements, and the chosen world's quality bar, returning an ordered list of material fixes.SubagentsJul 2026
- impeccable-manual-edit-applierApplies leased Impeccable live manual copy-edit batches to source and returns canonical Apply results.SubagentsJul 2026
