alonw0/web-asset-generator
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
Claudeはロゴ、テキスト、絵文字からファビコン、アプリアイコン、ソーシャルメディア画像を生成するスキルを持っています。絵文字の提案、検証、フレームワークの自動統合をサポートします。
概要
🎨 ファビコン、アプリのアイコン、ソーシャルメディア画像を生成するためのClaude Codeスキル Claudeと自然に話して、ロゴ、テキスト、絵文字から本番環境のウェブアセットを作成しましょう! これはClaudeの機能を拡張するモジュール機能です。インストールすると、Claudeは自然な会話を通じて自動的にウェブアセットを生成できます。 「コーヒーショップのウェブサイト用にファビコンを作成」 - 関連する絵文字を提案します(☕ コーヒー、🏪ストア) - すべてのアイコンサイズ(16×16から512×512)を生成する - ファイルの検証とアクセシビリティチェック - フレームワークの検出(Next.js、Astroなど) - コードにHTMLタグを追加する提案 - 検証ツールのテストリンクを提供します 手作業は不要です。クロードに聞いてみてください! https://github.com/user-attachments/assets/99b37698-98ec-42fe-87aa-f96b86edc00b ブラウザは動画再生に対応していません。デモ動画をダウンロードしてください。 Claudeが自動的にファビコンを生成し、検証し、プロジェクトに統合する様子をご覧ください!
概要（AI 翻訳）
🎨 ファビコン、アプリのアイコン、ソーシャルメディア画像を生成するためのクロードコードスキル
Claudeと自然に話して、ロゴ、テキスト、絵文字から本番環境のウェブアセットを作成しましょう!
これは何?
これはClaude Code Skill - Claudeの機能を拡張するモジュール機能です。インストールすると、Claudeは自然な会話を通じて自動的にウェブ資産を生成できます。
会話の例:
あなた:「コーヒーショップのウェブサイト用にファビコンを作成する」
Claude:
- 関連する絵文字を提案する(☕ コーヒー、🏪ストア)
- すべてのアイコンサイズ(16×16から512×512)を生成します
- ファイルの検証とアクセシビリティのチェック
- あなたのフレームワーク(Next.js、Astroなど)を検出します。
- コードにHTMLタグを追加するオファー
- テストバリデーターリンクを提供します
手作業は不要です。クロードに聞いてみてください!
🎬 デモ
スキルの実践をご覧ください:
https://github.com/user-attachments/assets/99b37698-98ec-42fe-87aa-f96b86edc00b
ブラウザは動画再生に対応していません。デモ動画をダウンロードしてください。
Claudeが自動的にファビコンを生成し、検証し、プロジェクトに統合する様子をご覧ください!
🚀 クイックスタート
1.前提条件
- クロードコード 2.0.13以降
- パイソン3。
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 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!
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
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”
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add alonw0/web-asset-generator