web-asset-generator

Web 资源生成器

根据徽标或文字标语生成专业的 Web 资源，包括网站图标、应用图标和社交媒体元图像。

快速开始

当用户请求 Web 资源时：

1. 如果需求不明确，请使用 AskUserQuestion 工具进行确认：

   • 需要哪种类型的资源（网站图标、应用图标、社交媒体图像，或全部）
   • 是否有源素材（徽标图像还是文字／标语）
   • 对于基于文字的图像：颜色偏好

2. 检查是否有源素材：

   • 如果用户上传了图像：将其用作源素材
   • 如果用户提供了文字／标语：生成基于文字的图像

3. 运行相应的脚本：

   • 网站图标／图标：scripts/generate_favicons.py
   • 社交媒体图像：scripts/generate_og_images.py

4. 向用户提供生成的资源和 HTML 标签

使用交互式问题

重要：始终使用 AskUserQuestion 工具收集需求，而不是直接用文本提问。这样可以通过可视化选择界面提供更好的用户体验。

为什么使用 AskUserQuestion？

✅ 可视化界面：用户可以点击选项标签，而不必输入回答
✅ 更快捷：点击选择，而不是输入答案
✅ 更清晰：描述会解释每个选项的含义
✅ 减少错误：避免自由输入造成的拼写错误或误解
✅ 更专业：与现代 Claude Code 体验保持一致

示例流程

用户请求：“我需要 Web 资源”

Claude 使用 AskUserQuestion（而不是直接用文本提问）：

What type of web assets do you need?                    [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images

用户点击 → Claude 立即知道要生成什么

问题模式

以下是在不同场景中使用的标准问题模式。复制其结构并根据需要进行调整。

问题模式 1：选择资源类型

当用户的请求含糊不清（例如，“创建 Web 资源”或“我需要图标”）时，使用 AskUserQuestion：

问题：“你需要哪种类型的 Web 资源？” 标题：“资源类型” 选项：

• “仅网站图标” - 描述：“浏览器标签图标（16x16、32x32、96x96）和 favicon.ico”
• “仅应用图标” - 描述：“适用于 iOS/Android 的 PWA 图标（180x180、192x192、512x512）”
• “仅社交媒体图像” - 描述：“适用于 Facebook、Twitter、WhatsApp、LinkedIn 的 Open Graph 图像”
• “全部” - 描述：“完整套件：网站图标 + 应用图标 + 社交媒体图像”

问题模式 2：源素材

当资源类型已确定但源素材不明确时：

问题：“你会提供什么源素材？” 标题：“源素材” 选项：

• “徽标图像” - 描述：“我已有或将上传徽标／图像文件”
• “表情符号” - 描述：“根据表情符号字符生成网站图标”
• “文字／标语” - 描述：“仅根据文字创建图像”
• “徽标 + 文字” - 描述：“将徽标与文字叠加组合（用于社交媒体图像）”

问题模式 3：选择平台（用于社交媒体图像）

当用户请求社交媒体图像但未指定平台时：

问题：“你需要为哪些社交媒体平台生成图像？” 标题：“平台” 多选：true 选项：

• “Facebook/WhatsApp/LinkedIn” - 描述：“标准 1200x630 Open Graph 格式”
• “Twitter” - 描述：“适用于大图卡片的 1200x675（16:9 比例）”
• “所有平台” - 描述：“生成所有变体，包括方形格式”

问题模式 4：颜色偏好（用于基于文字的图像）

生成基于文字的社交媒体图像时：

问题：“社交媒体图像应使用哪些颜色？” 标题：“颜色” 选项：

• “我来提供颜色” - 描述：“让我指定品牌颜色的确切十六进制代码”
• “默认主题” - 描述：“使用默认紫色背景（#4F46E5）和白色文字”
• “从徽标中提取” - 描述：“自动检测上传徽标中的品牌颜色”
• “自定义渐变” - 描述：“让我选择渐变颜色”

问题模式 5：图标类型确认

当用户说“创建图标”或“生成图标”（含义不明确）时：

问题：“你需要哪种图标？” 标题：“图标类型” 选项：

• “网站 favicon” - 描述：“浏览器标签页上的小图标”
• “应用图标（PWA）” - 描述：“移动设备主屏幕图标”
• “两者都要” - 描述：“Favicon + 应用图标”

问题模式 6：选择 Emoji

当用户选择“Emoji”作为素材时：

步骤 1：询问项目描述（自由文本）：

• “你的网站 / 应用是做什么的？”
• 用此描述生成 Emoji 建议

步骤 2：使用 AskUserQuestion 展示建议的 4 个 Emoji：

问题：“哪个 Emoji 最能代表你的项目？” 标题：“Emoji” 选项：（根据项目描述动态生成）

• 示例：“🚀 Rocket” - 描述：“火箭、发射、创业、太空”
• 示例：“☕ Coffee” - 描述：“咖啡、咖啡馆、饮料”
• 示例：“💻 Laptop” - 描述：“电脑、笔记本电脑、代码、开发”
• 示例：“🎨 Art” - 描述：“艺术、设计、创意、绘画”

实现：

# Get suggestions
python scripts/generate_favicons.py --suggest "coffee shop" output/ all

# Then generate with selected emoji
python scripts/generate_favicons.py --emoji "☕" output/ all

可选：询问应用图标的背景颜色：

问题：“你想为应用图标设置背景颜色吗？” 标题：“背景” 选项：

• “透明” - 描述：“无背景（仅适用于 favicon）”
• “白色” - 描述：“白色背景（推荐用于应用图标）”
• “自定义颜色” - 描述：“我会提供颜色”

问题模式 7：提供代码集成

使用时机：生成资源并向用户展示 HTML 标签后

问题：“你想让我将这些 HTML 标签添加到你的代码库中吗？” 标题：“集成” 选项：

• “是，自动检测我的配置” - 描述：“自动查找并更新我的 HTML / 框架文件”
• “是，我会告诉你位置” - 描述：“我会指定要更新的文件”
• “不，我会手动添加” - 描述：“只需展示代码，我会自行添加”

如果用户选择“是，自动检测”：

1. 搜索框架配置文件（next.config.js、astro.config.mjs 等）
2. 检测框架类型
3. 查找合适的目标文件（layout.tsx、index.html 等）
4. 展示检测到的文件并请求确认
5. 展示拟议更改的差异
6. 用户确认后插入标签

如果用户选择“是，我会告诉你位置”：

1. 询问用户文件路径
2. 确认文件存在
3. 展示拟议更改的差异
4. 用户确认后插入标签

框架检测优先级：

• Next.js：查找 next.config.js，更新 app/layout.tsx 或 pages/_app.tsx
• Astro：查找 astro.config.mjs，更新 src/layouts/ 中的布局文件
• SvelteKit：查找 svelte.config.js，更新 src/app.html
• Vue/Nuxt：查找 nuxt.config.js，更新 app.vue 或 nuxt.config.ts
• 纯 HTML：查找 index.html 或 *.html 文件
• Gatsby：查找 gatsby-config.js，更新 gatsby-ssr.js

问题模式 8：提供测试链接

使用时机：代码集成后（或用户拒绝集成时）

问题：“你现在想测试 meta 标签吗？” 标题：“测试” 选项：

• “Facebook Debugger” - 描述：“在 Facebook 上测试 Open Graph 标签”
• “Twitter Card Validator” - 描述：“测试 Twitter 卡片的显示效果”
• “LinkedIn Post Inspector” - 描述：“测试 LinkedIn 分享预览”
• “所有测试工具” - 描述：“获取所有验证工具的链接”
• “不，跳过测试” - 描述：“我稍后自行测试”

提供相应的测试 URL：

• Facebook：https://developers.facebook.com/tools/debug/
• Twitter：https://cards-dev.twitter.com/validator
• LinkedIn：https://www.linkedin.com/post-inspector/
• 通用 OG 验证工具：https://www.opengraph.xyz/

工作流

从 Logo 生成 Favicon 和应用图标

当用户有 Logo 图片时：

python scripts/generate_favicons.py <source_image> <output_dir> [icon_type]

参数：

• source_image：Logo/图片文件的路径
• output_dir：保存生成图标的位置
• icon_type：可选——'favicon'、'app' 或 'all'（默认：'all'）

示例：

python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

生成：

• favicon-16x16.png、favicon-32x32.png、favicon-96x96.png
• favicon.ico（多分辨率）
• apple-touch-icon.png（180x180）
• android-chrome-192x192.png、android-chrome-512x512.png

从 Emoji 生成 Favicon 和应用图标

新功能：基于 Emoji 字符创建 Favicon，并提供智能建议！

第 1 步：获取 Emoji 建议

当用户想要基于 Emoji 的图标时，首先获取建议：

python scripts/generate_favicons.py --suggest "coffee shop" /home/claude/output all

这会根据描述返回 4 个 Emoji 建议：

1. ☕  Coffee               - coffee, cafe, beverage
2. 🌐  Globe                - web, website, global
3. 🏪  Store                - shop, store, retail
4. 🛒  Cart                 - shopping, cart, ecommerce

第 2 步：使用选定的 Emoji 生成图标

python scripts/generate_favicons.py --emoji "☕" <output_dir> [icon_type] [--emoji-bg COLOR]

参数：

• --emoji：要使用的 Emoji 字符
• output_dir：保存生成图标的位置
• icon_type：可选——'favicon'、'app' 或 'all'（默认：'all'）
• --emoji-bg：可选的背景颜色（默认：Favicon 为透明，应用图标为白色）

示例：

# Basic emoji favicon (transparent background)
python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon

# Emoji with custom background for app icons
python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all

# Complete set with white background
python scripts/generate_favicons.py --emoji "💻" --emoji-bg "white" /home/claude/output all

生成与基于 Logo 的生成方式相同的文件：

• 所有标准 Favicon 尺寸（16x16、32x32、96x96）
• favicon.ico
• 应用图标尺寸（180x180、192x192、512x512）

注意：需要 pilmoji 库：pip install pilmoji

从 Logo 生成社交媒体元图像

当用户有 Logo 且需要 Open Graph 图像时：

python scripts/generate_og_images.py <output_dir> --image <source_image>

示例：

python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png

生成：

• og-image.png（1200x630——Facebook、WhatsApp、LinkedIn）
• twitter-image.png（1200x675——Twitter）
• og-square.png（1200x1200——正方形版本）

从文本生成社交媒体元图像

当用户提供文本口号或标语时：

python scripts/generate_og_images.py <output_dir> --text "Your text here" [options]

选项：

• --logo <path>：在文本旁添加 Logo
• --bg-color <color>：背景颜色（十六进制值或名称，默认：'#4F46E5'）
• --text-color <color>：文本颜色（默认：'white'）

示例：

python scripts/generate_og_images.py /home/claude/output \
  --text "Transform Your Business with AI" \
  --logo /mnt/user-data/uploads/logo.png \
  --bg-color "#4F46E5"

生成全部内容

适用于需要完整套件的用户：

# Generate favicons and icons
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

# Generate social media images
python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png

或用于基于文本的生成：

# Generate favicons from logo
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

# Generate social media images with text + logo
python scripts/generate_og_images.py /home/claude/output \
  --text "Your Tagline Here" \
  --logo /mnt/user-data/uploads/logo.png

扩展参考

从 ## Delivering Assets to User 开始的详细材料已移至 reference/extended.md，以保持此技能简洁。若任务需要已移出的示例、命令目录、检查清单、平台详情或实现模板，请加载该参考文档。