web-asset-generator

Web Asset Generator - Claude Code Skill

🎨 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

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

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

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

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

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