Web Asset Generator

Generate web assets including icons, favicons, social media images, and placeholder graphics.

Category: Design & Creative

About this skill

A design utility skill for generating common web assets. Create favicons in multiple sizes, social media preview images, placeholder graphics, app icons, and other visual assets needed for web development projects.

Source and installation instructions

Documentation

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

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
        │   └── lib/
        │       └── validators.py       # Validation system
        └── references/
            └── specifications.md       # Platform specs

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"

Emoji Features

"Suggest emojis for my coffee shop"
"Show me good emojis for a fitness app"
"Create favicon from emoji representing growth"

With Validation

"Generate favicons and validate them"
"Create social images and check accessibility"
"Make Open Graph images and verify file sizes"

🛠️ Advanced: Direct Script Usage

You can also use the scripts directly without Claude:

cd ~/.claude/skills/web-asset-generator

# Generate from emoji
python scripts/generate_favicons.py --emoji "🚀" output/ all

# Generate social images
python scripts/generate_og_images.py output/ --text "Welcome"

# Check dependencies
python scripts/check_dependencies.py

See skills/web-asset-generator/CLAUDE.md for complete script documentation.

🔧 Troubleshooting

Skill Not Working

Verify installation:

ls ~/.claude/skills/web-asset-generator/SKILL.md

Check dependencies:

cd ~/.claude/skills/web-asset-generator
python scripts/check_dependencies.py

Restart Claude Code
Your request should include keywords like "favicon", "icon", "social image", or "Open Graph"

Emoji Not Working

Pilmoji requires emoji<2.0.0:

pip install 'emoji<2.0.0'

Claude Doesn't Invoke the Skill

Ensure SKILL.md is in the skill folder
Restart Claude Code after installation
Try explicit requests like "create a favicon"
Check that the skill folder is named web-asset-generator

📚 Documentation

PLUGIN_INSTALLATION.md - Detailed plugin installation guide
skills/web-asset-generator/SKILL.md - Complete Skill instructions
skills/web-asset-generator/CLAUDE.md - Development guide
CONTRIBUTING.md - Contribution guidelines
CHANGELOG.md - Version history

🤝 Contributing

Contributions welcome! See CONTRIBUTING.md for:

Development setup
Code standards
Testing guidelines
Pull request process

Priority areas:

Additional platforms (Pinterest, Instagram)
WebP/AVIF format support
Unit tests
Performance optimizations

📝 License

MIT License - see LICENSE

🙏 Acknowledgments

Anthropic for Claude Code and the Skills framework
Pillow - Python Imaging Library
Pilmoji - Emoji rendering

🗺️ Roadmap

📞 Support

Built for Claude Code • Made with ❤️ by the community

⭐ Star this repo • Share with Claude Code users!