1仕組みと動作原理

全機能が2つのローカル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（選択肢UI）を経由し、アセット種別、元データ、対象プラットフォーム、配色、アイコンセマンティクス、コード統合、検証を網羅する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）は、アセット種別、素材元、プラットフォーム複数選択、配色、アイコン意味論、絵文字選択、コード改変の要否、検証ツールリンク提示をそれぞれ分担し、本Skill最大の「非画像」設計部分を構成しています。

アイコン生成の実態はPillowによるリサイズパイプラインです：元画像を透明度保持のRGBAに変換し、LANCZOSリサンプリングで各サイズのPNGを書き出し、16/32の2階層を含むマルチ解像度.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が透過背景をサポートしないため、アプリアイコンには不透明な塗りつぶし背景が適用されます（SKILL.md: 'For app icons, use solid background (iOS doesn't support transparency)'）。

絵文字ルートはローカル描画とローカル辞書推薦を採用：キーワード付きの60以上の絵文字辞書でスコアリング推薦を行い、選択後にPilmojiを使用してキャンバス上に絵文字を描画します。

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）、幅に応じた自動改行およびロゴの高さ上限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

ロゴ処理：'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）を自動検出し、対象ファイルを特定して差分を提示し、ユーザー確認後に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>直前の3つの挿入例が用意されています。

プラットフォーム仕様データは独立したドキュメント（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

AI開発者向けのアーキテクチャ解説としてCLAUDE.mdも同梱（スクリプトの役割、フォントパス '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf'、emojiパッケージは<2.0.0必須などの制約）。

2コア機能

01ロゴから完全なfavicon/Appアイコン群を生成（16/32/96 PNG + マルチ解像度ico + 180/192/512 PWAアイコン）

02絵文字からアイコンを生成（キーワード適合度による候補絵文字4種のレコメンド、背景色指定に対応）

03ソーシャル共有画像の生成（OG 1200x630、Twitter 1200x675、正方形 1200x1200）、テキストのみ/テキスト+ロゴ/ロゴのみの3モードに対応

04文字数に応じた自動組版（動的フォントサイズ + 自動改行 + ロゴ高さ制限）、非デザイナーでも実用的な画像を生成可能

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結論

生成から組み込みまでのワンストップ対応：画像生成 → 規格検証 → HTMLタグ生成 → フレームワーク検出とコードベース修正 → 検証リンク提示まで完結し、ユーザーが手動で手順を組み合わせる手間がありません。

暴走を防ぐ高い自動化設計：8つのAskUserQuestionテンプレートで事前ヒアリングを徹底し、コード改変前には必ず差分（diff）を提示してユーザーの承認を要求します。

組み込みの品質基準：プラットフォーム仕様の容量/寸法/比率/フォーマット検証とWCAGコントラスト判定を備え、投稿不能や視認不能な画像の出力を未然に防ぎます。

絵文字対応による低ハードル化：ロゴがない場合でも体裁の整ったアプリアイコンを作成でき、キーワード解説付きの選定や背景色指定、iOSの透過非対応を考慮した不透明背景の自動適用にも対応します。

完全ローカル動作（外部通信・認証情報不要）：すべての処理をローカルで完結し、APIキーや外部サービスを必要としないため、社外に素材を出せない環境でも安全に実行できます。

最適な用途： 適したユースケース：Webサイト向けのfavicon、PWAアイコン、ソーシャル共有画像を迅速に揃えたい開発者やインディー開発者；正式なロゴがなく絵文字を使って素早く見栄えの良いアイコンを作りたい初期プロジェクト；画像生成後にNext.js/Astro/HTMLプロジェクトへmetaタグの追記まで一括で行いたいユーザー；FacebookやTwitterの容量・寸法制限に適合しているかを厳密にチェックしたい運用担当者（--validateで直接検証可能）。

不向きな用途： 適さないユースケース：ブランドレベルの高度なビジュアルデザイン（グラデーション、イラスト、指定フォント、多言語組版など）が求められるケース（本ツールはパラメータによる組版ツールでありデザインツールではありません）；Pillowをインストールできない、またはエージェントへのファイル書き込みが禁止されている制限環境（絵文字モードではpilmojiも必要）；ソースコードの自動改変を一切許可しない開発チーム（手動モードを選択しない限り不向き）；事後確認なしでそのまま完全な本番品質のデザインアセットとして運用したいユーザー（生成物の目視確認は必須）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload web-asset-generator.tar.gz

sha256: a6da82bc927a95b8…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit c6d56dc54a.