skills.rest
linenoize
linenoizeCOMMUNITY
Explore all skills by this author →
GitHub

asset-creator

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

1|Updated May 18, 2026
Search Tags:#branding#html#svg#og-image#icon-set#visual-assets#social-cards
One-click install
npx skills add https://github.com/linenoize/topia --skill asset-creator-linenoize
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: asset-creator
Source: https://github.com/linenoize/topia/tree/main/skills/asset-creator
Command: npx skills add https://github.com/linenoize/topia --skill asset-creator-linenoize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the manual work of creating polished visual assets as code, so teams can produce logos, social banners, OG images, and icon sets that stay editable and easy to reuse.

Core Features & Use Cases

  • Generates original SVG, HTML, and CSS-based assets for branding and marketing deliverables.
  • Produces light and dark variants, icon sprites, and usage instructions for easy handoff.
  • Fits needs like a launch banner, a social card, or a project logo created from a short creative brief.

Quick Start

Ask the asset-creator skill to create a 1200x630 OG image in a minimal dark style using the provided headline and brand name.

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 and HTML visual assets for social cards and banners?▼

You generate SVG and HTML visual assets by providing a creative brief, precise dimensions, and brand typography defaults. The skill outputs editable code-based logos, social cards, and banners with light or dark variants saved directly in your project assets directory.

Can I create light and dark variants for an OG image and icon set?▼

Yes, you can create light and dark variants for OG images and icon sets. The skill generates both variants alongside icon sprites and usage instructions, ensuring consistent branding and easy handoff across marketing and product design workflows.

Do I need a project conventions file to load design tokens for branding assets?▼

Yes, a project conventions file is required. The skill loads design tokens from this file to apply consistent typography defaults, accessibility labels, and branding guidelines across all generated SVG and HTML visual assets.

What is the best way to build editable code-based logos instead of static images?▼

The best way to build editable logos is generating them as SVG and HTML code rather than static image files. This approach keeps branding assets reusable, easy to update, and ready for immediate integration into marketing or product workflows.

How do I create a 1200x630 OG image with minimal dark styling?▼

You create a 1200x630 OG image by requesting precise dimensions and a minimal dark style. The skill uses your provided headline and brand name to generate the visual asset as editable HTML or SVG code.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

square

Generate design systems with predefined style tokens from a configuration file.

Community
Intermediate
YeomanYeYeomanYe

web-image

Generate fixed-size PNG images from HTML/CSS layouts.

Community
Intermediate
stephendolanstephendolan
2

frontend-design

Generate production-grade frontend interfaces with styling, animations, and interactions.

Community
Basic
zivtechzivtech

gemini-image-executor

Generate PNG graphics from design specs via the Gemini image generation API.

Official
Advanced