🎨

Web Asset Generator

Claude Code 的专业级资产生成插件。
通过自然语言对话，自动生成生产级 Favicon、PWA 图标及社交媒体 Open Graph 预览图。

Python 3.6+ Claude Skill Pillow Pilmoji

01 项目简介

Web Asset Generator 是一个模块化的 Claude Code Skill。它扩展了 Claude 的能力，使其能够处理图像生成和处理任务。

通常，开发者在发布网站前需要手动使用多个工具来生成不同尺寸的图标（16x16, 32x32, 180x180 等）以及社交分享图（1200x630）。此插件将全流程自动化：你只需提供一个 Logo 或一句口号，Claude 就能生成所有符合现代 Web 标准的静态资源，并提供对应的 HTML <head> 标签。

核心价值： 无需离开终端，无需设计师介入，直接通过自然语言（如 "给我的咖啡店网站生成图标"）完成全套资源交付。

02 核心功能

🖼️

全尺寸图标生成

  • Favicon: 16x16, 32x32, 96x96 PNGs
  • Legacy: 多分辨率 favicon.ico
  • Apple: apple-touch-icon.png (180x180)
  • Android/PWA: 192x192, 512x512 PNGs
📱

社交媒体预览图

  • Facebook/LinkedIn: 1200x630 (1.91:1)
  • Twitter: 1200x675 (16:9 大卡片)
  • Square: 1200x1200 (通用正方形)
  • 支持文字排版、Logo 叠加、背景色定制
🚀

Emoji 智能生成

  • 支持将任意 Emoji 渲染为高清图标
  • 基于语义的 Emoji 智能推荐（如 "咖啡店" → ☕）
  • 自动适配背景色（透明或纯色）
✅

自动验证与合规

  • 文件大小: 检查是否符合平台限制 (FB <8MB)
  • 尺寸比例: 验证是否符合 1.91:1 或 1:1
  • 无障碍 (a11y): 计算 WCAG 文本对比度 (AA/AAA)

03 技术架构

目录结构 (Repository Structure)

web-asset-generator/
├── SKILL.md              # [入口] 定义 Skill 元数据、提示词策略和交互流程
├── scripts/              # [核心] Python 执行脚本
│   ├── generate_favicons.py    # 图标生成器 (Image/Emoji -> Icons)
│   ├── generate_og_images.py   # 社交图片生成器 (Text/Logo -> OG Images)
│   ├── emoji_utils.py          # Emoji 渲染与推荐引擎 (Pilmoji)
│   ├── check_dependencies.py   # 环境自检工具
│   └── lib/
│       └── validators.py       # 验证模块 (WCAG对比度, 尺寸检查)
└── references/
    └── specifications.md       # 平台规范数据库 (FB/Twitter specs)

generate_favicons.py

使用 LANCZOS 重采样算法进行高质量缩放。支持 RGBA 模式以保留透明度。对于 Emoji 模式，先生成 512x512 高清基图再向下采样。

generate_og_images.py

实现了动态字体排版算法：根据文本长度自动调整字号 (84px - 144px) 和换行策略。支持 Logo 智能叠加（顶部居中，最大高度 20%）。

04 安装指南

方法一：通过 Claude Plugin 系统

1. 添加插件源并安装：

/plugins marketplace add alonw0/web-asset-generator
/plugin install web-asset-generator@web-asset-generator-marketplace

2. 安装 Python 依赖：

pip install Pillow
# 可选：如果需要 Emoji 支持
pip install pilmoji 'emoji<2.0.0'

⚠️ 依赖项说明

  • ✓ Python 3.6+: 必需环境
  • ✓ Pillow: 图像处理核心库 (pip install Pillow)
  • ! Pilmoji & emoji: 仅在使用 Emoji 生成功能时需要。注意 emoji 库必须版本小于 2.0.0 以兼容 Pilmoji。

05 自然语言使用指南

安装完成后，重启 Claude Code，即可直接对话使用。插件通过 AskUserQuestion 工具提供富交互体验。

场景 1: 生成 Favicon

User: "给我的咖啡店网站生成一个图标"

Claude 会启动交互流程：

  1. 询问素材来源 (Logo图片 / Emoji / 纯文字)
  2. 如果选择 Emoji，会自动推荐：☕ (Coffee), 🏪 (Store) 等
  3. 确认后生成全套图标 (16x16 到 512x512)

场景 2: 生成社交分享图

User: "生成 Open Graph 图片，标题是 'My Blog'，用紫色背景"

Claude 会执行：

  1. 自动识别参数：Text="My Blog", BgColor="Purple"
  2. 询问目标平台 (Facebook/Twitter/LinkedIn)
  3. 生成 1200x630 及 1200x675 图片
  4. 提供 <meta> 标签代码

交互式选项 (AskUserQuestion Patterns)

插件内置了多种标准问答模式，以确保获取准确需求：

Asset Type Favicons only / App icons only / Social images / Everything
Source Logo image / Emoji / Text slogan / Logo + Text
Testing Facebook Debugger / Twitter Validator / LinkedIn Inspector

06 命令行高级用法

你可以直接调用脚本进行批量处理或集成到 CI/CD 流程中。

generate_favicons.py

# 基本用法：从图片生成
python scripts/generate_favicons.py logo.png output/ all

# 高级用法：从 Emoji 生成并指定背景色
python scripts/generate_favicons.py --emoji "🚀" --emoji-bg "#1e293b" output/ all

# 获取 Emoji 建议
python scripts/generate_favicons.py --suggest "tech startup" output/ all

参数说明：

  • source_image: 源图片路径
  • output_dir: 输出目录
  • icon_type: favicon, app, all (默认)

可选参数：

  • --emoji: 使用 Emoji 字符
  • --emoji-bg: Emoji 背景色
  • --validate: 运行后校验

generate_og_images.py

# 基本用法：从文本生成
python scripts/generate_og_images.py output/ --text "Hello World"

# 高级用法：文本 + Logo + 自定义颜色
python scripts/generate_og_images.py output/ \
  --text "Feature Release v2.0" \
  --logo assets/logo.png \
  --bg-color "#0f172a" \
  --text-color "#38bdf8" \
  --validate

07 验证与质量检查

使用 --validate 参数时，系统会运行以下检查。输出结果分为 ✅ Success, ⚠ Warning, ❌ Error。

1. 社交媒体合规性 (Social Compliance)

平台 尺寸要求 文件大小限制 格式
Facebook 1200x630 (1.91:1) < 8MB PNG, JPG
Twitter 1200x675 (16:9) < 5MB PNG, JPG, WebP

2. 可访问性检查 (Accessibility / WCAG)

针对基于文本的图片，自动计算前景文字与背景色的对比度。

  • WCAG AA: 对比度需 > 4.5:1 (普通文本) 或 3.0:1 (大号文本)
  • WCAG AAA: 对比度需 > 7.0:1

08 代码集成指南

生成资源后，你需要将 HTML 标签添加到项目中。插件支持自动检测框架。

HTML / Static Sites

插入到 <head> 标签内：

<!-- 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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

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

Next.js (App Router)

修改 app/layout.tsx 或 layout.js 中的 metadata：

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  openGraph: {
    images: ['/og-image.png'],
  },
}

09 故障排除

🔴 Error: "Module 'PIL' not found"

原因：缺少 Pillow 库。
解决：pip install Pillow --break-system-packages

🔴 Emoji 无法显示或报错

原因：emoji 库版本过高。
解决：pip install 'emoji<2.0.0' --force-reinstall

🟡 Skill 未触发

原因：Claude 未加载 Skill。
解决：确认 SKILL.md 路径正确，并重启 Claude Code。