Web Asset Generator

> 🎨 A Claude Code Skill for generating favicons, app icons, and social media images

Talk to Claude naturally to create production-ready web assets from logos, text, or emojis!

What is This?

This is a Claude Code Skill - a modular capability that extends Claude's functionality. When installed, Claude can automatically generate web assets through natural conversation.

Example conversation:

> You: "Create a favicon for my coffee shop website" > > Claude: > - Suggests relevant emojis (☕ Coffee, 🏪 Store) > - Generates all icon sizes (16×16 through 512×512) > - Validates files and checks accessibility > - Detects your framework (Next.js, Astro, etc.) > - Offers to add HTML tags to your code > - Provides testing validator links

No manual work needed - just ask Claude!

🎬 Demo

See the skill in action:

https://github.com/user-attachments/assets/99b37698-98ec-42fe-87aa-f96b86edc00b

Your browser doesn't support video playback. Download the demo video .

Watch Claude automatically generate favicons, validate them, and integrate them into your project!

🚀 Quick Start

1. Prerequisites

• Claude Code 2.0.13 or later
• Python 3.6+ with pip

2. Install the Plugin

Recommended: Via Plugin Marketplace

The easiest way to install:

/plugins marketplace add alonw0/web-asset-generator
and then
/plugin install web-asset-generator@web-asset-generator-marketplace

Then install dependencies:

pip install Pillow

# Optional: For emoji support
pip install pilmoji 'emoji<2.0.0'

Alternative: Manual Installation

Click to expand manual installation steps

Clone this repository:

git clone https://github.com/alonw0/web-asset-generator.git
cd web-asset-generator

Copy the skill folder to Claude's skills directory:

# macOS/Linux
cp -r skills/web-asset-generator ~/.claude/skills/

# Windows
xcopy /E /I skills\web-asset-generator %USERPROFILE%\.claude\skills\web-asset-generator

Install dependencies:

pip install Pillow
pip install pilmoji 'emoji<2.0.0'  # Optional

3. Restart Claude Code

After installation, restart Claude Code to load the plugin.

4. Use It!

Open Claude Code and try:

• "Create a favicon with a rocket emoji"
• "Generate Open Graph images for my blog"
• "Make app icons from my logo.png"

Claude will automatically invoke this skill and guide you through the process!

✨ Features

• Favicons - Browser icons (16×16, 32×32, 96×96, favicon.ico)
• App Icons - PWA/mobile icons (180×180, 192×192, 512×512)
• PWA Manifest - Auto-generate manifest.json with icons, colors, and settings
• Social Images - Open Graph for Facebook, Twitter, LinkedIn (1200×630, 1200×675)
• Emoji Support - 60+ curated emojis with smart suggestions
• Validation - File sizes, dimensions, formats, WCAG contrast compliance
• Auto-Integration - Framework detection and code insertion
• Interactive - Question-based workflow using Claude's UI

📸 Examples

Emoji Favicon Generated from 🚀 with custom background Social Media Image Text with dynamic font sizing

📁 Repository Structure

web-asset-generator/                    # Repository root
├── README.md                           # This file
├── CONTRIBUTING.md                     # How to contribute
├── LICENSE                             # MIT License
├── CHANGELOG.md                        # Version history
├── .claude-plugin/                     # Plugin metadata
│   └── plugin.json                     # Plugin manifest
├── marketplace.json                    # Marketplace distribution
├── docs/                               # Documentation & examples
└── skills/                             # Skills directory
    └── web-asset-generator/           # ⭐ THE SKILL (copy this folder)
        ├── SKILL.md                    # Skill definition (Claude reads this)
        ├── CLAUDE.md                   # Development guidance
        ├── scripts/
        │   ├── generate_favicons.py    # Favicon generator
        │   ├── generate_og_images.py   # Social image generator
        │   ├── emoji_utils.py          # Emoji utilities
        │   ├── check_dependencies.py   # Dependency checker
…

To install: Copy the skills/web-asset-generator/ folder to ~/.claude/skills/

💬 Usage Examples

Once installed, use natural language:

Favicon Generation

"Create a favicon for my tech startup"
"Generate app icons from my logo.png"
"Make a favicon using a rocket emoji"
"I need PWA icons for my website"

Social Media Images

"Create Open Graph images for my blog"
"Generate Twitter card with my tagline"
"Make social sharing images from my logo"
"Create Facebook preview with custom colors"