skills.rest
dangvu008
dangvu008COMMUNITY
Explore all skills by this author →
GitHub

rune-asset-creator

Generates code-based visual assets including SVG icons, OG image HTML templates, and social banners.

1|Updated Mar 22, 2026
Search Tags:#design tokens#svg#asset generation#og image#html template#icon set#social banner
One-click install
npx skills add https://github.com/dangvu008/VietTruyen --skill rune-asset-creator-dangvu008
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rune-asset-creator
Source: https://github.com/dangvu008/VietTruyen/tree/main/.agents/skills/rune-asset-creator
Command: npx skills add https://github.com/dangvu008/VietTruyen --skill rune-asset-creator-dangvu008

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visual assets like logos, OG images, and icon sets usually requires design tools or manual coding. This Skill generates code-based assets (SVG, HTML, CSS) directly from a brief, complete with design tokens, variants, and usage instructions. ## Core Features & Use Cases - SVG Icons & Logos: Writes optimized inline SVG files with accessibility attributes and icon sprite sheets using <symbol> elements. - OG Images & Social Cards: Produces pixel-perfect HTML templates with embedded CSS at standard dimensions (1200x630, 1080x1080, etc.). - Light/Dark Variants: Automatically generates dark and light mode variants for OG images and banners. - Use Case: A marketing workflow needs an OG image for a product launch. Provide the dimensions, style (e.g., "minimal dark"), and brand text, and receive a ready-to-screenshot HTML file plus meta tag usage instructions. ## Quick Start Ask the agent to create a 1200x630 OG image in a minimal dark style with your product name and tagline, saved to the assets directory.

Frequently Asked Questions about rune-asset-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an OG image for my website?▼

Provide the asset type, dimensions (default 1200x630), style, and content such as brand name and tagline. The skill generates a self-contained HTML file with embedded CSS that you screenshot at the specified size, plus the og:image meta tag snippet.

How to generate an SVG icon set as a sprite file?▼

Request an icon_set asset with the icon names you need. The skill creates a single sprite.svg file where each icon is a named <symbol> element, which you reference in markup with <use href="sprite.svg#icon-name">.

Can this skill generate PNG or JPG images directly?▼

No, it only produces code-based assets in SVG and HTML formats. To get raster images like PNG or JPG, you must screenshot the generated HTML files using a browser automation tool such as browser-pilot.

Does it support dark mode variants for social banners?▼

Yes, OG images and banners automatically get both dark and light variants, saved with -dark and -light filename suffixes. Icon sets can also include filled and outline variants when applicable.

What design tokens and fonts does the asset generator use?▼

It reads color palette and typography from .rune/conventions.md if present, otherwise applies style-based defaults. Standard fonts are Space Grotesk for headlines, Inter for body text, and JetBrains Mono for monospace content.

Related Skills

Explore More Design & Creative Skills→
hackethacket
38

brand-guidelines

Apply Anthropic brand guidelines to documents, presentations, and interfaces.

Community
Intermediate
inclusionAIinclusionAI
1.2k

html-to-image

Render HTML files or content into PNG screenshots via a CDP-connected browser.

Official
Intermediate
trevorc-aitrevorc-ai

accessibility-checker

Identify and remediate WCAG 2.1 Level AA accessibility gaps in UI components.

Community
Intermediate
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate