🎨 生成 favicon、应用图标和社交媒体图片的 Claude 代码技能

自然地与Claude交流，从标志、文本或表情符号创建可生产的网页素材！

这是什么？

这是一项Claude代码技能——一种模块化功能，扩展了Claude的功能。安装后，Claude可以通过自然对话自动生成网页资源。

示例对话：

你： “为我的咖啡店网站创建一个收藏夹”

Claude：

• 建议相关表情符号（☕咖啡，🏪商店）
• 生成所有图标大小（16×16到512×512）
• 验证文件并检查无障碍
• 检测你的框架（Next.js、Astro等）
• 为你的代码添加HTML标签的提议
• 提供测试验证器链接

不需要手工活——直接问Claude就行！

🎬 演示

看看该技能的实际操作：

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

你的浏览器不支持视频播放。下载演示视频。

观看Claude自动生成法维记录，验证并整合进你的项目！

🚀 快速启动

1.前提条件

• Claude Code 2.0.13 或更高版本
• Python 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”