设计 · alonw0/web-asset-generator
web-asset-generator
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
L4 高权限 · 分级授权与审计V1 已固定执行命令安装依赖读写文件Dual-pass Audit
管控等级描述 skill 的能力与建议配套的管控措施，不代表质量或安全认证，也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同，请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者，使用风险由使用者自行承担。
1实现原理 · 为什么它能做到
能力全部落在两个本地 Python 脚本上（Pillow 画图/缩放），skill 正文的作用是把『问什么、跑哪个脚本、怎么交付』编排成固定流程。
skills/web-asset-generator/SKILL.md
3. **Run the appropriate script(s)**: - Favicons/icons: `scripts/generate_favicons.py` - Social media images: `scripts/generate_og_images.py`
脚本尺寸表是硬编码常量：favicon 16/32/96 + apple-touch-icon 180 + android-chrome 192/512（generate_favicons.py ICON_SIZES/APP_ICON_SIZES），OG 为 og-image 1200x630 / twitter-image 1200x675 / og-square 1200x1200（generate_og_images.py OG_SIZES）。
交互纪律被写成硬要求：所有需求澄清必须走 AskUserQuestion（可视选项），并给出 8 套标准问题模板覆盖资产类型、源材料、平台、配色、图标语义、代码集成与验证。
skills/web-asset-generator/SKILL.md
**IMPORTANT**: Always use the AskUserQuestion tool to gather requirements instead of plain text questions. This provides a better user experience with visual selection UI.
8 套模板（Question Pattern 1-8）分别处理：资产类型、源材料、平台多选、配色、icon 语义、emoji 选择、是否代改代码、是否给验证工具链接——这是该 skill 最大的『非图像』设计量。
图标生成的实质是 Pillow 缩放链：源图转 RGBA 保留透明、LANCZOS 重采样逐尺寸落 PNG，另生成含 16/32 两档的多分辨率 .ico。
skills/web-asset-generator/scripts/generate_favicons.py
icon_16.save(ico_path, format='ICO', sizes=[(16, 16), (32, 32)])
循环体：'resized.save(output_path, 'PNG', optimize=True)'；emoji 模式要求 iOS 不支持透明，故 app 图标走实色背景（SKILL.md: 'For app icons, use solid background (iOS doesn't support transparency)'）。
emoji 路线是本地渲染 + 本地词库推荐：60+ 条带关键词的 emoji 库做打分推荐，选中后用 Pilmoji 把 emoji 画进画布。
skills/web-asset-generator/scripts/emoji_utils.py
# Curated emoji database with keywords for better matching
渲染：'with Pilmoji(img) as pilmoji: … pilmoji.text((x, y), emoji_char, font=None, fill=(0, 0, 0, 0), emoji_scale_factor=emoji_size/64)'；缺 pilmoji 时抛 'pilmoji library is required for emoji rendering. Install it with: pip install pilmoji'。
文字类 OG 图靠字符数决定字号（短 144 / 中 120 / 长 102 / 超长 84）、按宽度换行、logo 限高 20%——即用参数化排版代替做图。
skills/web-asset-generator/scripts/generate_og_images.py
# Medium text: use base size return base_size # 120px elif text_length <= 60: # Long text: reduce slightly return int(base_size * 0.85) # 102px
logo 处理：'max_logo_height = int(size[1] * 0.20)'；图片模式用 fit_mode='cover' 的中心裁剪缩放；输出同样 'img.save(output_path, 'PNG', optimize=True)'。
质量校验是本地纯计算：按平台要求表检查体积/尺寸/比例/格式，文本图另算 WCAG 对比度分级。
skills/web-asset-generator/scripts/lib/validators.py
PLATFORM_REQUIREMENTS = { 'facebook': { 'max_file_size': 8 * 1024 * 1024, # 8MB 'recommended_size': (1200, 630), 'min_size': (600, 315), 'aspect_ratio': 1.91, 'formats': ['png', 'jpg', 'jpeg'], },
对比度用标准相对亮度公式（calculate_contrast_ratio/validate_contrast，AA 4.5:1 / AAA 7.0:1）；结果封装为 ValidationResult（success/warning/error）驱动 SKILL.md 里的 ✓/⚠/❌ 输出规范。
交付环节包含『代改代码』：按用户选择自动探测框架（Next/Astro/SvelteKit/Vue-Nuxt/Gatsby/纯 HTML）→ 找目标文件 → 展示 diff → 用户确认后用 Edit 工具插入 meta/link 标签。
skills/web-asset-generator/SKILL.md
**If user selects "Yes, auto-detect":** 1. Search for framework config files (next.config.js, astro.config.mjs, etc.) 2. Detect framework type
安全约束写在流程里：'Show diff of proposed changes' + 'Insert tags if user confirms'，且 SKILL.md 给 Next.js metadata export / Astro head / 纯 HTML </head> 三种插入范例。
平台规格知识单独成册（references/specifications.md），skill 正文只引用不内嵌，避免把尺寸表塞进每次上下文。
skills/web-asset-generator/SKILL.md
For detailed platform specifications, size requirements, and implementation guidelines, read: - `references/specifications.md`: Comprehensive specs for all platforms
另有 CLAUDE.md（给 AI 开发者的架构说明：脚本职责、字体路径 '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf'、emoji 包必须 <2.0.0 等）。
2核心能力
01从 logo 生成完整 favicon/App 图标组（16/32/96 PNG + 多分辨率 ico + 180/192/512 PWA 图标）
02从 emoji 生成图标（含关键词打分推荐 4 个候选 emoji、可选背景色）
03生成社交分享图（OG 1200x630、Twitter 1200x675、方形 1200x1200），支持纯文字/文字+logo/纯 logo 三种模式
04按字符数自动排版（动态字号 + 自动换行 + logo 限高），非设计师用户也能出可用图
05内置校验：体积上限（FB 8MB / Twitter 5MB / favicon 100KB 警告）、尺寸与比例、格式、WCAG 对比度分级
06直接产出可粘贴的 HTML 标签（favicon link 组 + OG/Twitter meta 组）
07框架感知的代码集成（探测 + 目标文件定位 + diff 确认后插入）
08交付后引导外部验证工具（Facebook Debugger / Twitter Card Validator / LinkedIn Post Inspector / opengraph.xyz）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | Pillow（PIL，必需） |
| package | pilmoji（emoji 渲染，可选） |
| package | emoji（emoji 关键词/版本检测，可选且被检查器要求 <2.0.0） |
| network | 无代码级网络出口；仅在 SKILL.md/references 里给出外部验证工具链接供用户自行访问 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: python scripts/generate_favicons.py <source_image> <output_dir> [favicon|ap
- scripts/ 或 SKILL.md: 声明动态安装外部语言包依赖
- 本地工作目录: 文件读写与工件输出: 输出目录下生成 PNG/ICO：favicon-16x16/32x32/96x96.png、favicon.ico、apple-touch-icon.
审计说明： 。按统一分档：本 skill 属『仅本地工具/本地读写』——脚本用 Pillow 在本地生成图片、无网络出口、无凭证读取、无子进程，外部依赖为官方 PyPI 包（Pillow/pilmoji/emoji）。之所以不是绿档：它确实执行 Python 脚本、写本地文件，且在用户确认后会**修改用户代码库文件**（框架自动集成），并有 pip 安装第三方包的前置要求。外发面与凭证面均为零，故不升黄/橙。
5第二遍独立确认
- [ok] 『无网络外发』结论 — 5 个脚本逐文件扫描：import 仅 PIL/pilmoji/emoji/colorsys/textwrap/argparse/pathlib/io/sys/os/re；无 requests/urllib/socket/http.client/subprocess/os.system/eval/exec；全目录 URL 仅出现在 SKILL.md 与 references/specifications.md 的文档说明中。
- [ok] 『无凭证读取』结论 — 无 os.environ/getenv；check_dependencies.py 只做 try-import 探测并打印 pip 安装建议；仓库无 .env 示例、无 key 常量。
- [ok] 尺寸与字号常量与文档一致 — generate_favicons.py ICON_SIZES(16/32/96)+APP_ICON_SIZES(180/192/512)、generate_og_images.py OG_SIZES(1200x630/1200x675/1200x1200)、calculate_font_size 的 1.2/1.0/0.85 倍率（144/120/102/84）与 SKILL.md Best Practices 的文本长度表逐字吻合。
- [ok] 校验能力真实落地（非仅文档） — validators.py 定义 PLATFORM_REQUIREMENTS（facebook 8MB/1200x630/1.91、twitter 5MB/1200x675/16:9 等）与 ValidationResult；SKILL.md 给出 --validate 用法与 ✓/⚠/❌ 输出示例，两侧一致。
- [ok] emoji 依赖的版本约束 — check_dependencies.py 对 emoji 主版本 <2 判定兼容，否则提示 "Install compatible version: pip install 'emoji<2.0.0'"；CLAUDE.md 重复该约束（'must use version <2.0.0 for pilmoji compatibility'）。属真实存在的第三方兼容性坑，非文档臆造。
- [discrepancy] 『会修改用户代码库』的定性与护栏 — 第一遍只按『本地生成图片』记录，第二遍确认 SKILL.md Question Pattern 7 与交付流程明确要求 agent 探测框架（next.config.js/astro.config.mjs/…）并在用户确认后用 Edit 插入标签——这是对用户源码的写入能力。已据此把 file_writes 拆成『脚本产物』与『经确认的宿主编辑』两类，并在 injection_surface/risks 单列；档位维持 blue（写入仍属本地、且有 diff+确认门）。
- [ok] 字体路径依赖（跨平台可用性） — CLAUDE.md 记录字体 '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf'（回退默认字体）；generate_og_images.py 用 ImageFont 加载，属 Linux 假设，已作为可用性注记写入 verdict.fits/not_for 之外的分析（traits 未夸大跨平台能力）。
- [ok] 外部依赖清单完整性 — 依赖仅 Pillow（必需）与 pilmoji/emoji（可选 emoji 路线），全部为 PyPI 官方包；无 CLI 依赖、无镜像源、无远程服务（对比同类 skill 常见的 ffmpeg/imagemagick 依赖，本 skill 无外部二进制）。
6结论
适合： 适合：需要快速给站点补齐 favicon/PWA 图标与社交分享图的开发者或独立产品作者；没有 logo、想用 emoji 快速起一个体面图标的小项目；希望生成后顺手把 meta 标签写进 Next.js/Astro/纯 HTML 项目的用户；以及在意『图能不能过 Facebook/Twitter 限制』的运营向场景（可直接跑 --validate）。
不适合： 不适合：需要品牌级视觉设计（渐变/插画/品牌字体/多语言排版）的场景——它是参数化排版工具而非设计工具；无法安装 Pillow 或不让 agent 写文件的受限环境（emoji 路线还需要 pilmoji，输出也需要写盘）；不允许任何自动改写源码的团队（除非全程选手工模式）；以及要求图片可直接用于生产且通过人工设计的用户（生成图仍需人工复核）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload web-asset-generator.tar.gz
sha256:
Option B · Copy Guide for Agenta6da82bc927a95b8…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit c6d56dc54a.