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外部依赖
| 类型 | 依赖 |
|---|---|
| package | Pillow（PIL，必需） |
| package | pilmoji（emoji 渲染，可选） |
| package | emoji（emoji 关键词/版本检测，可选且被检查器要求 <2.0.0） |
| network | 无代码级网络出口；仅在 SKILL.md/references 里给出外部验证工具链接供用户自行访问 |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 会改动用户源码（能力设计使然的最高风险项） — 『Yes, auto-detect my setup』分支会探测框架、定位 layout/index 文件并插入标签；虽有 diff+确认门，但在复杂仓库里定位错文件的代价是真实改动。建议先提交/备份，或在『No, I'll do it manually』模式下只用生成的标签。
- 依赖版本陷阱导致 emoji 功能静默失败 — pilmoji 与 emoji>=2.0.0 不兼容，且 pilmoji 缺失时脚本直接 ImportError；check_dependencies.py 可体检，但需用户主动运行。文档要求 'pip install … --break-system-packages'，在受管 Python 环境里可能污染系统环境。
- 字体与平台假设 — 文字图依赖 Linux 下的 DejaVu 字体路径（缺则回退默认字体，可能影响观感）；对 macOS/Windows 未做适配说明。另有 CJK 文案的字体覆盖未处理（emoji 之外的汉字可能缺字）。
- 生成图不保证品牌/法律合规 — 脚本只做尺寸与对比度校验，不检查 logo 使用授权、平台商标规则或版权素材；文案由用户提供会直接渲染进图，内容准确性不在校验范围内。
- 校验为启发式 — 对比度按文本色/背景色单点计算，未考虑渐变、图片背景与压缩后观感；体积阈值也是推荐值而非平台强制值，通过校验不等于平台一定接受。
风险提醒：蓝色，知晓即可。按统一分档：本 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，输出也需要写盘）；不允许任何自动改写源码的团队（除非全程选手工模式）；以及要求图片可直接用于生产且通过人工设计的用户（生成图仍需人工复核）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 web-asset-generator.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agenta6da82bc927a95b8…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库alonw0 / alonw0/web-asset-generator
原始 GitHubalonw0/web-asset-generator ↗
Stars494
最近推送2026-01-28
本 skill commit
c6d56dc54a许可MIT（仓库根 LICENSE；GitHub API spdx=MIT；.claude-plugin/plugin.json 内 license: MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。