# 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! [![Claude Code](https://img.shields.io/badge/Claude-Code_Skill-violet)](https://claude.ai/code) [![Python 3.6+](https://img.shields.io/badge/python-3.6+-blue.svg)](https://www.python.org/downloads/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![Mentioned in Awesome Claude Code](https://awesome.re/mentioned-badge.svg)](https://github.com/hesreallyhim/awesome-claude-code) ## 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](https://claude.ai/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: ```bash 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: ```bash git clone https://github.com/alonw0/web-asset-generator.git cd web-asset-generator ``` Copy the skill folder to Claude's skills directory: ```bash # 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: ```bash 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
Rocket emoji favicon
Emoji Favicon
Generated from πŸš€ with custom background 		Text-based social image
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: ```bash 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 1. Verify installation: ```bash ls ~/.claude/skills/web-asset-generator/SKILL.md ``` 2. Check dependencies: ```bash cd ~/.claude/skills/web-asset-generator python scripts/check_dependencies.py ``` 3. Restart Claude Code 4. Your request should include keywords like "favicon", "icon", "social image", or "Open Graph" ### Emoji Not Working Pilmoji requires `emoji<2.0.0`: ```bash 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](PLUGIN_INSTALLATION.md)** - Detailed plugin installation guide - **[skills/web-asset-generator/SKILL.md](skills/web-asset-generator/SKILL.md)** - Complete Skill instructions - **[skills/web-asset-generator/CLAUDE.md](skills/web-asset-generator/CLAUDE.md)** - Development guide - **[CONTRIBUTING.md](CONTRIBUTING.md)** - Contribution guidelines - **[CHANGELOG.md](CHANGELOG.md)** - Version history ## 🀝 Contributing Contributions welcome! See [CONTRIBUTING.md](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](LICENSE) ## πŸ™ Acknowledgments - **Anthropic** for Claude Code and the Skills framework - **Pillow** - Python Imaging Library - **Pilmoji** - Emoji rendering ## πŸ—ΊοΈ Roadmap - [x] ~~PWA manifest.json generation~~ βœ… Completed! - [ ] WebP and AVIF support - [ ] Pinterest/Instagram support - [ ] Dark mode variants - [ ] Batch processing - [ ] Web preview interface ## πŸ“ž Support - πŸ“– [Claude Code Skills Docs](https://docs.claude.com/en/docs/claude-code/skills) - πŸ› [Report Issues](https://github.com/alonw0/web-asset-generator/issues) - πŸ’¬ [Discussions](https://github.com/alonw0/web-asset-generator/discussions) - 🌟 [Anthropic Skills Repo](https://github.com/anthropics/skills) --- **Built for Claude Code** β€’ **Made with ❀️ by the community** ⭐ Star this repo β€’ Share with Claude Code users!