https://github.com/alonw0/web-asset-generator
Claude skill to generate favicons, app icons, and social media images from logos, text, or emojis. Supports emoji suggestions, validation, and framework auto-integration.
https://github.com/alonw0/web-asset-generator
Last synced: 4 months ago
JSON representation
Claude skill to generate favicons, app icons, and social media images from logos, text, or emojis. Supports emoji suggestions, validation, and framework auto-integration.
- Host: GitHub
- URL: https://github.com/alonw0/web-asset-generator
- Owner: alonw0
- License: mit
- Created: 2025-10-21T07:38:30.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-01-28T09:11:01.000Z (4 months ago)
- Last Synced: 2026-01-29T00:43:46.448Z (4 months ago)
- Language: Python
- Size: 14.7 MB
- Stars: 171
- Watchers: 0
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-claude-skills - web-asset-generator
- awesome-openclaw-skills - Web Assets Generator Skill - Easily generate web assets from Claude Code including favicons, app icons (PWA), ... | - | (Code & Developer Tools)
- awesome-codex-cli - Web Assets Generator Skill - Easily generate web assets from Claude Code including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Handles image resizing, text-to-image generation, emojis, and provides proper HTML meta tags. (Agent Skills / General)
README
# 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!
[](https://claude.ai/code)
[](https://www.python.org/downloads/)
[](LICENSE)
[](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
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](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
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:
```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!