Design & Motion · 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 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandInstall DepsWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
All core capabilities rely on two local Python scripts (Pillow-based rendering and resizing); the skill document functions as an orchestrator defining a fixed workflow of 'what to ask, which script to execute, and how to deliver'.
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`
Script dimension tables use hardcoded constants: favicon 16/32/96 + apple-touch-icon 180 + android-chrome 192/512 (ICON_SIZES/APP_ICON_SIZES in generate_favicons.py); OG sizes include og-image 1200x630 / twitter-image 1200x675 / og-square 1200x1200 (OG_SIZES in generate_og_images.py).
Strict interaction discipline is enforced as a hard requirement: all requirements clarification must go through AskUserQuestion (visual selection), with 8 standardized question patterns covering asset type, source assets, platforms, color palette, icon semantics, code integration, and validation.
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.
The 8 templates (Question Patterns 1–8) respectively cover: asset type, source material, multi-select platforms, color schemes, icon semantics, emoji selection, code modification consent, and external validation tool links—representing the skill's largest 'non-image' engineering design.
Icon generation fundamentally operates as a Pillow resizing pipeline: converting source images to RGBA to preserve transparency, resampling per target size via LANCZOS into PNGs, and generating a multi-resolution .ico file containing both 16 and 32 sizes.
skills/web-asset-generator/scripts/generate_favicons.py
icon_16.save(ico_path, format='ICO', sizes=[(16, 16), (32, 32)])
Save loop: 'resized.save(output_path, 'PNG', optimize=True)'; emoji mode accounts for iOS lacking transparency support by enforcing solid backgrounds for app icons (SKILL.md: 'For app icons, use solid background (iOS doesn't support transparency)').
The emoji pathway combines local rendering with local corpus recommendation: an emoji library of 60+ entries with keywords provides scoring-based recommendations, and Pilmoji renders the selected emoji onto the canvas.
skills/web-asset-generator/scripts/emoji_utils.py
# Curated emoji database with keywords for better matching
Rendering logic: 'with Pilmoji(img) as pilmoji: … pilmoji.text((x, y), emoji_char, font=None, fill=(0, 0, 0, 0), emoji_scale_factor=emoji_size/64)'; when pilmoji is missing, it raises 'pilmoji library is required for emoji rendering. Install it with: pip install pilmoji'.
Text-based OG images determine font sizes dynamically by character count (short 144 / medium 120 / long 102 / extra-long 84), wrap text by width, and limit logo height to 20%—replacing manual graphic design with parametric typography.
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 handling: 'max_logo_height = int(size[1] * 0.20)'; image mode uses fit_mode='cover' center-crop resizing; final output also saves via 'img.save(output_path, 'PNG', optimize=True)'.
Quality validation is purely local computation: evaluating file size, dimensions, aspect ratio, and format against platform requirement matrices, alongside calculating WCAG contrast ratings for text-based graphics.
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'], },
Contrast calculation follows standard relative luminance formulas (calculate_contrast_ratio/validate_contrast, AA 4.5:1 / AAA 7.0:1); results are encapsulated in ValidationResult (success/warning/error) driving the ✓/⚠/❌ display format defined in SKILL.md.
The delivery stage includes optional code modification: automatically detecting project frameworks (Next/Astro/SvelteKit/Vue-Nuxt/Gatsby/pure HTML) based on user choices → locating target files → presenting diffs → inserting meta/link tags using Edit tools upon user confirmation.
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
Safety guardrails are embedded into the workflow: 'Show diff of proposed changes' + 'Insert tags if user confirms', with SKILL.md providing 3 insertion examples for Next.js metadata export, Astro head, and plain HTML </head>.
Platform specifications are isolated into a standalone document (references/specifications.md); the main skill text only references it rather than inlining it, avoiding polluting the context window with dimension tables.
skills/web-asset-generator/SKILL.md
For detailed platform specifications, size requirements, and implementation guidelines, read: - `references/specifications.md`: Comprehensive specs for all platforms
Includes CLAUDE.md (architectural guidelines for AI developers: script roles, font paths like '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf', emoji package pinned to <2.0.0, etc.).
2Core Capabilities
01Generate complete favicon and App icon bundles from logos (16/32/96 PNGs + multi-resolution ico + 180/192/512 PWA icons)
02Generate icons from emoji (includes keyword-scored recommendations for 4 candidate emojis, optional background colors)
03Generate social sharing images (OG 1200x630, Twitter 1200x675, Square 1200x1200), supporting text-only, text + logo, and logo-only modes
04Automated typography based on character count (dynamic font size + auto line wrapping + logo height constraints), enabling non-designers to produce usable graphics
05Built-in validation: file size caps (FB 8MB / Twitter 5MB / favicon 100KB warning), dimensions, aspect ratio, format, and WCAG contrast grading
06Direct output of ready-to-paste HTML tags (favicon link sets + OG/Twitter meta sets)
07Framework-aware code integration (detection + target file localization + diff confirmation + automated insertion)
08Post-delivery guidance pointing to external validation tools (Facebook Debugger / Twitter Card Validator / LinkedIn Post Inspector / opengraph.xyz)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | Pillow（PIL，必需） |
| package | pilmoji（emoji 渲染，可选） |
| package | emoji（emoji 关键词/版本检测，可选且被检查器要求 <2.0.0） |
| network | 无代码级网络出口；仅在 SKILL.md/references 里给出外部验证工具链接供用户自行访问 |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local scripts or commands: python scripts/generate_favicons.py <source_image> <output_dir> [favicon|ap
- scripts/ 或 SKILL.md: Declares dynamic installation of external language package dependencies
- 本地工作目录: Performs file read/write operations and artifact generation: generates PNG/ICO files in output directories: favicon-16x16/32x32/96x96.png, favicon.ico, apple-touch-icon.
Audit Notes: According to the unified grading scheme: this skill falls under 'Local tools / local read-write only'—scripts generate images locally using Pillow, with no outbound network access, no credential reading, and no subprocess spawning; external dependencies are official PyPI packages (Pillow/pilmoji/emoji). The reason it is not placed in the green tier: it executes Python scripts, writes local files, and **modifies user codebase files** upon user confirmation (automated framework integration), while requiring pip installation of third-party packages as prerequisites. With zero outbound exposure and zero credential access, it does not escalate to yellow or orange tiers.
5Second-Pass Verification
- [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 无外部二进制）。
6Verdict & Scenarios
Best for: Best for: Developers or indie makers needing to quickly generate favicon/PWA icons and social sharing cards for websites; early-stage projects lacking logos seeking clean icons from emoji; users who want meta tags automatically inserted into Next.js/Astro/HTML projects post-generation; and operations-focused scenarios where ensuring images pass Facebook/Twitter upload constraints is critical (using --validate directly).
Not for: Not suited for: Scenarios requiring professional visual brand design (gradients, custom illustrations, branded fonts, complex multilingual typography), as this is a parametric layout tool rather than a design suite; restricted runtime environments where Pillow cannot be installed or file-writing is forbidden (emoji rendering additionally requires pilmoji); teams strictly disallowing automated codebase modifications (unless manual mode is selected); and production requirements demanding human-designed bespoke visual assets without manual verification.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload web-asset-generator.tar.gz
sha256:
Option B · Copy Guide for Agenta6da82bc927a95b8…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit c6d56dc54a.