Back to Details

web-asset-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Asset Generator

Web资源生成器

Generate production-ready web assets (favicons, app icons, social images) through natural conversation with Claude.
通过与Claude的自然对话，生成可用于生产环境的Web资源（包括Favicon、应用图标、社交媒体图片）。

When to Use This Skill

使用场景

  • Creating favicons for a new website
  • Generating PWA/mobile app icons
  • Making Open Graph images for social sharing
  • Converting logos to multiple sizes
  • Creating quick icons from emojis
  • Building a complete asset package
  • 为新网站创建Favicon
  • 生成PWA/移动应用图标
  • 制作用于社交分享的Open Graph图片
  • 将Logo转换为多种尺寸
  • 通过表情符号快速创建图标
  • 生成完整的资源包

What It Generates

生成内容

Favicons

Favicon

favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
favicon.ico

PWA & App Icons

PWA与应用图标

apple-touch-icon-180x180.png
android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon-180x180.png
android-chrome-192x192.png
android-chrome-512x512.png

Social Media Images

社交媒体图片

og-image-1200x630.png    # Facebook, LinkedIn
twitter-card-1200x600.png # Twitter/X
whatsapp-preview.png      # WhatsApp
og-image-1200x630.png    # Facebook、LinkedIn
twitter-card-1200x600.png # Twitter/X
whatsapp-preview.png      # WhatsApp

Manifest Files

清单文件

json
{
  "name": "My App",
  "icons": [...]
}
json
{
  "name": "My App",
  "icons": [...]
}

How to Use

使用方法

From Logo

从Logo生成

Create all web assets from my logo: /path/to/logo.png
根据我的Logo生成所有Web资源：/path/to/logo.png

From Emoji

从表情符号生成

Generate favicons using the coffee emoji for my cafe website
用咖啡表情符号为我的咖啡馆网站生成Favicon

From Text

从文本生成

Create social media images with text "Launch Day!"
on a gradient blue background
创建带有文本“Launch Day!”的社交媒体图片
背景为渐变蓝色

Complete Package

完整资源包

Generate everything I need for my new startup website:
- Favicons
- PWA icons
- Open Graph images

Company: TechFlow
Colors: #2D9CDB primary, #27AE60 accent
为我的新创业公司网站生成所需的全部资源：
- Favicon
- PWA图标
- Open Graph图片

公司名称：TechFlow
颜色：主色调#2D9CDB，强调色#27AE60

Interactive Workflow

交互式流程

The skill uses structured questions:
1. Asset Type Selection
What do you need?
○ Favicons only
○ PWA/App icons
○ Social media images
○ Everything (recommended)
2. Source Material
What should I use?
○ Logo image (provide path)
○ Emoji (I'll suggest options)
○ Text/slogan
○ Combination
3. For Emoji-Based Icons
Your project: Coffee shop website

Suggested emojis:
☕ Coffee cup
🫘 Coffee beans
☕️ Hot beverage
🏪 Store front

Or describe what you'd prefer...
4. Customization
Background color:
○ White (#FFFFFF)
○ Transparent
○ Custom color (enter hex)
该技能通过结构化问题引导操作：
1. 选择资源类型
你需要什么资源？
○ 仅Favicon
○ PWA/应用图标
○ 社交媒体图片
○ 全部资源（推荐）
2. 选择源素材
使用什么作为源素材？
○ Logo图片（提供路径）
○ 表情符号（我会提供建议选项）
○ 文本/标语
○ 组合素材
3. 基于表情符号的图标生成
你的项目：咖啡馆网站

推荐表情符号：
☕ 咖啡杯
🫘 咖啡豆
☕️ 热饮
🏪 店铺门面

或者描述你偏好的表情符号...
4. 自定义设置
背景颜色：
○ 白色（#FFFFFF）
○ 透明
○ 自定义颜色（输入十六进制值）

Generated Output

生成输出

Files Structure

文件结构

assets/
├── favicons/
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   └── favicon.ico
├── app-icons/
│   ├── apple-touch-icon.png
│   └── android-chrome-512x512.png
├── social/
│   ├── og-image.png
│   └── twitter-card.png
└── manifest.json
assets/
├── favicons/
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   └── favicon.ico
├── app-icons/
│   ├── apple-touch-icon.png
│   └── android-chrome-512x512.png
├── social/
│   ├── og-image.png
│   └── twitter-card.png
└── manifest.json

HTML Tags

HTML标签

html
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Open Graph -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/twitter-card.png">
html
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Open Graph -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/twitter-card.png">

Validation

验证环节

Assets are checked for:
  • Correct dimensions
  • File size limits
  • Color accessibility
  • Platform compatibility
  • Format requirements
生成的资源会经过以下检查：
  • 尺寸正确性
  • 文件大小限制
  • 颜色可访问性
  • 平台兼容性
  • 格式要求

Framework Integration

框架集成

After generation:
I detected you're using Next.js.

Add to your public/ folder:
1. Copy generated files to /public/
2. Update app/layout.tsx with meta tags
3. Add manifest link

Want me to show the code?
生成完成后：
检测到你正在使用Next.js。

请将资源添加到public/文件夹：
1. 将生成的文件复制到/public/目录
2. 更新app/layout.tsx中的元标签
3. 添加清单文件链接

需要我展示具体代码吗？

Dependencies

依赖项

Required

必需依赖

bash
pip install Pillow
bash
pip install Pillow

Optional (for emoji support)

可选依赖（用于表情符号支持）

bash
pip install pilmoji emoji
bash
pip install pilmoji emoji

Examples

示例

Quick Favicon

快速生成Favicon

User: "Make a quick favicon with a rocket emoji"

Generated:
- favicon-16x16.png ✓
- favicon-32x32.png ✓
- favicon.ico ✓
- HTML tags ready
用户：“用火箭表情符号快速制作一个Favicon”

生成结果：
- favicon-16x16.png ✓
- favicon-32x32.png ✓
- favicon.ico ✓
- 可直接使用的HTML标签 ✓

Full Branding Package

完整品牌资源包

User: "Create complete web assets for my SaaS product 'DataFlow'"

Generated:
- 12 favicon sizes ✓
- 5 app icon sizes ✓
- 3 social images ✓
- manifest.json ✓
- HTML meta tags ✓
- Framework-specific code ✓
用户：“为我的SaaS产品‘DataFlow’生成完整的Web资源”

生成结果：
- 12种尺寸的Favicon ✓
- 5种尺寸的应用图标 ✓
- 3张社交媒体图片 ✓
- manifest.json ✓
- HTML元标签 ✓
- 框架专属代码 ✓

Social Images Only

仅生成社交媒体图片

User: "I need Open Graph images for my blog post about AI"

Generated:
- og-image-1200x630.png (Facebook, LinkedIn)
- twitter-card-1200x600.png (Twitter/X)
- HTML tags for both
用户：“我需要为我的AI主题博客文章制作Open Graph图片”

生成结果：
- og-image-1200x630.png（适用于Facebook、LinkedIn）
- twitter-card-1200x600.png（适用于Twitter/X）
- 两种图片对应的HTML标签

Best Practices

最佳实践

  1. Start with high-res source (512px+ for logos)
  2. Test generated assets in social media debuggers
  3. Use transparent PNGs when possible
  4. Verify on multiple devices
  5. Update manifest.json with correct paths
  1. 使用高分辨率源素材（Logo建议512px以上）
  2. 在社交媒体调试工具中测试生成的资源
  3. 尽可能使用透明PNG格式
  4. 在多设备上验证效果
  5. 更新manifest.json中的正确路径

Testing Tools

测试工具

After generation, test with:
生成完成后，可使用以下工具测试：