Favicon、アプリアイコン、OGP画像を自然言語で生成するClaude Codeスキル。絵文字・ロゴ・テキストからアイコンを生成し、フレームワーク自動検出・コード統合まで対応。PWA Manifest生成、WCAG準拠チェック機能付き。
🎨 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!
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!
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!
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
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
After installation, restart Claude Code to load the plugin.
Open Claude Code and try:
Claude will automatically invoke this skill and guide you through the process!
Emoji Favicon Generated from 🚀 with custom background |
Social Media Image Text with dynamic font sizing |
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/
Once installed, use natural language:
"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"
"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"
"Suggest emojis for my coffee shop"
"Show me good emojis for a fitness app"
"Create favicon from emoji representing growth"
"Generate favicons and validate them"
"Create social images and check accessibility"
"Make Open Graph images and verify file sizes"
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.
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"
Pilmoji requires emoji<2.0.0:
pip install 'emoji<2.0.0'
SKILL.md is in the skill folderweb-asset-generatorContributions welcome! See CONTRIBUTING.md for:
Priority areas:
MIT License - see LICENSE
Built for Claude Code • Made with ❤️ by the community
⭐ Star this repo • Share with Claude Code users!
互換性