skills.rest
Rune-kit
Rune-kitOFFICIAL
Explore all skills by this author →
GitHub

asset-creator

Generate SVG icons, logos, HTML banners, and social cards.

82|23|Updated Feb 24, 2026
Search Tags:#html#svg#asset generation#og image#social card#icon set
One-click install
npx skills add https://github.com/Rune-kit/rune --skill asset-creator-rune-kit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: asset-creator
Source: https://github.com/Rune-kit/rune/tree/main/skills/asset-creator
Command: npx skills add https://github.com/Rune-kit/rune --skill asset-creator-rune-kit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of code-based visual assets like SVGs, HTML templates for social media, and icon sets, eliminating the need for manual design work for these specific asset types.

Core Features & Use Cases

  • Code-Based Asset Generation: Creates SVG icons, logos, HTML for OG images/social cards, and HTML banners.
  • Style & Convention Adherence: Uses project conventions or applies default styles for dark/light modes, and selects appropriate typography.
  • Use Case: Generate a set of 10 SVG icons for a new UI component library, ensuring they all adhere to the project's dark theme and use the specified font.

Quick Start

Create an SVG logo for 'MyAwesomeApp' with a dark style and dimensions 500x500 pixels.

Frequently Asked Questions about asset-creator

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

FAQPage Schema
How do I generate SVG icons for a UI component library?▼

You can generate SVG icons by specifying your requirements, and the Skill outputs code-based SVG files with usage instructions. It adheres to your project's design conventions or applies sensible defaults for color palettes and typography.

Can I create HTML for OG images and social cards automatically?▼

Yes, you can create HTML for OG images and social cards automatically. The Skill generates code-based HTML templates with custom dimensions and content, supporting optional light and dark variants to match your project conventions.

What is the best way to ensure generated visual assets match my dark theme?▼

To match generated visual assets to your dark theme, specify custom styles during generation. The Skill adheres to project design conventions for dark mode and selects appropriate typography to output matching HTML and SVG files.

Do I need design software to create HTML banners and logos?▼

No, you do not need design software to create HTML banners and logos. This Skill automates code-based asset generation directly, producing SVG logos and HTML banners with custom dimensions and content without manual design work.

Does the asset generation support custom dimensions and content?▼

Yes, the asset generation supports custom dimensions and content. You can specify exact pixel sizes like 500x500 and provide custom text, and the Skill outputs SVG or HTML files tailored to those exact specifications.

Related Skills

Explore More Design & Creative Skills→
luongnv89luongnv89
104

logo-designer

Generate SVG logo concepts with light and dark variants from project configuration files.

Community
Advanced
linenoizelinenoize
1

asset-creator

Create editable SVG and HTML visual assets with light and dark variants.

Community
Intermediate
zm2231zm2231

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Community
Advanced
zivtechzivtech

graphic-design-executor

Transform design-planner specifications into SVG and HTML assets.

Official
Advanced