🎨 파비콘, 앱 아이콘, 소셜 미디어 이미지 생성을 위한 클로드 코드 스킬

Claude와 자연스럽게 대화하여 로고, 텍스트, 이모지로 제작 가능한 웹 자산을 만들어보세요!

이게 뭐지?

이것은 Claude 코드 스킬으로, Claude의 기능을 확장하는 모듈식 기능입니다. 설치하면 Claude는 자연스러운 대화를 통해 웹 자산을 자동으로 생성할 수 있습니다.

예시 대화:

You: “내 커피숍 웹사이트에 좋은 파비콘을 만드세요”

클로드:

• 관련 이모지 제안 (☕ 커피, 🏪 상점)
• 모든 아이콘 크기 생성 (16×16부터 512×512까지)
• 파일 검증과 접근성 검사
• 프레임워크(Next.js, Astro 등)를 감지합니다.
• 코드에 HTML 태그를 추가해 주는 제안
• 테스트 검증기 링크 제공

수작업은 필요 없고, Claude에게 물어보세요!

🎬 데모

기술을 실제로 활용하는 모습을 보자:

https://github.com/user-attachments/assets/99b37698-98ec-42fe-87aa-f96b86edc00b

브라우저가 동영상 재생을 지원하지 않습니다. 데모 영상을 다운로드하세요.

Claude가 자동으로 파비콘을 생성하고, 검증한 뒤 프로젝트에 통합하는 모습을 보세요!

🚀 퀵 스타트

1. 전제 조건

• 클로드 코드 2.0.13 또는 이후
• 파이썬 3.

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”