1仕組みと動作原理
唯一のハード出力ルールが冒頭で最高優先事項として定義されている：セクションごとに1枚の横長画像を個別に出力し、セクション数＝画像数とする。統合や1枚の縦長画像によるページ全体の代用は厳禁。
skills/imagegen-frontend-web/SKILL.md
**Generate one separate horizontal image PER section. Always. No exceptions.**
ここで行われていること：画像生成AIモデルは（1回の呼び出しで1枚しか出力しないため）複数スクリーンのコンテンツを1枚の画像に詰め込みがちで、テキストが判読不能に縮小される原因となる。本スキルは「カウント＝セクション数」という検証可能な算出基準によって、モデルの手抜き傾向を完全に遮断している。
カウントルールはルックアップテーブル化されており、曖昧な指示に対するデフォルト値（landing page → 6枚、full website / marketing site → 8枚）を設定することで、モデルが勝手に縮小する余地を排除している。
skills/imagegen-frontend-web/SKILL.md
- "landing page" with no count -> default to 6 sections -> 6 images
§5では4/8/12セクションの標準ページパッケージ（Hero → Trust bar → Features → Product showcase → Benefits / use cases → Testimonials → Pricing → CTA など）も提示し、「何枚出力するか」と「各画像が何であるか」を同時に確定させている。
このルールがモデルのデフォルト動作を上書きすることを明示：一度に1枚しかレンダリングできない場合でも、すべてが納品されるまで同一レスポンス内で順番に1枚ずつ出力し続けなければならない。
skills/imagegen-frontend-web/SKILL.md
This rule overrides any model default that wants to collapse output into a single image.
画像ごとに進捗をカウントする（'Section 1 of 8: Hero'）要件を付帯させ、「生成の進捗」をユーザーへの可視化されたコミットメントにすることで、途中で放棄されるのを低減している。
反復防止メカニズムが、AIが最も陥りがちな構図のデフォルトに対処：左テキスト・右画像のHeroが最も乱用されているパターンとして名指しされ、まず他の9種類の構図アンカーを検討することを義務付けている。
skills/imagegen-frontend-web/SKILL.md
The default **left-text / right-image hero is the most overused AI pattern**.
§4の事前出力チェック（pre-output check）では「また無意識に左テキスト・右画像を選んでいないか？」とモデルに直接問いかけ、§2 Composition Anchorでは10種類のアンカーを提示し、ページ全体で少なくとも3種類の異なるアンカーを採用することを要求している。
組み合わせ型のバリエーションエンジン（テーマ／背景／フォント／Hero構造／ブロックシステム／4つのシグネチャコンポーネント／2つのモーション言語／セクションごとのアンカーと背景パターン）を用いて、「破綻しない」前提で差異を生み出す。
skills/imagegen-frontend-web/SKILL.md
## 2. THE COMBINATORIAL VARIATION ENGINE
キーとなる制約文は 'Do not mash everything together into chaos.'（すべてをごちゃ混ぜにしてカオスにするな）であり、各分類から1つだけを選択してページ全体で一貫させ、ランダム性を制御された次元内に制限している。
画像間の一貫性をハードルールとして個別指定：複数枚の画像が同一サイトに見えること（同一カラーパレット、フォント階層ロジック、CTAファミリー、角丸言語、画像処理）を義務付け、変化を許容するのはアンカー／背景／サイズ／補助要素のみとしている。
skills/imagegen-frontend-web/SKILL.md
Across all per-section images, enforce one brand world:
この条項は「1セクション1画像」戦略の必然的な代償に対する補償である。分割によって一貫性が崩れるリスクが高まるため、ファイルレベルのルールでそれを引き戻している。
コンバージョン規律と技術的審美眼の両立：単なる雰囲気重視のムードボードの出力を避け、各セクションがファネル上の役割を担わなければならない。
skills/imagegen-frontend-web/SKILL.md
The page's primary action stays unmistakable.
§18 Conversion focusではhook → proof → actionのパスを可視化することを求め、§19では「セクション数を声に出してコミットする（commit out loud）」ことを応答プロセスの最初のステップとして規定している。
アンチスロップ（AI特有の安直な粗悪表現）リストを分類列挙（レイアウト／ビジュアル／タイポグラフィ／コンテンツ／密度／マーキー／KPIの7分類）し、具体的な使用禁止単語や架空のブランド名を名指しで指定している。
skills/imagegen-frontend-web/SKILL.md
Ban generic copy vibes like:
禁止単語にはunleash、elevate、revolutionize、next-gen、seamlessなどが含まれ、架空ブランド名にはAcme、Nexus、Flowbitが含まれる。同リポジトリのv1の対応リストよりも具体的な内容となっている。
末尾に21項目の内部セルフチェック（§17 CLARITY CHECK）を設け、「十分な品質か」をチェック可能なリストへと変換し、画像数が不足している場合は不足分の再生成を義務付けている。
skills/imagegen-frontend-web/SKILL.md
Do not stop early. Do not summarize. Do not return only one image.
セルフチェック項目は、階層構造、Heroの簡潔さ、AI特有の癖、コード化可能性、画像間の一貫性、余白感、二度見させるディテール、コンバージョン導線、横長および単一セクション制約を網羅している。
2コア機能
011セクション1画像のカウント規律（ランディングページ／フルサイトのデフォルト値を含む）
0210種類の構図アンカー ＋ 連続重複の禁止（同一アンカーの連続使用は2セクションまで）
0312種類の背景パターン（全面画像／デュアルトーン／カラーブロック／ペーパー質感／ビネット／マイクロノイズグラデーションなど）と「背景への確信（background confidence）」原則
04Heroのミニマリズムと構図偏バイアスルール（5〜10語の見出し、バッジや架空データの詰め込み禁止）
05ブリーフから方向性へのマッピング表：minimalist/editorial/cinematic/SaaS/agency/e-commerceの各スタイルに対応するHeroスケール、背景パターン、グラデーション戦略
06配色とグラデーションの規律：プライマリ1色 ＋ セカンダリ1色 ＋ アクセント1色 ＋ ニュートラル階調。プロフェッショナルな低彩度グラデーションは許可、レインボー／紫・青の安直なAIグラデーションやグラデーション文字は禁止
07ストーリーの主軸と「二度見させる（second-read）」手法：6種類のconcept spine ＋ 正確に1つの二度見ディテール（視線誘導またはブランド想起の向上）
08アンチAIスロップと架空データの排除：架空のKPI 3連並び、無意味なニューモーフィズム風ダッシュボード、極小ロゴマーキーの禁止
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: スクリプト実行や外部への影響を伴わない、純粋なプロンプト指示およびルールテキスト。
監査ノート： 純粋な指示型スキルであるため：スクリプト実行、外部ネットワーク送信、認証情報の読み取り、ローカルファイルへの書き込みを行わず、外部画像ソースやパッケージへの参照すら含みません。動作は完全にホストのマルチモーダル生成パイプライン内で完結します。ユーザー自身が判断すべき唯一の点は成果物の用途と所要時間です。ルールによってセクションごとの逐次出力（8セクション＝8回の生成）が要求されますが、これはコストでありセキュリティリスクではありません。また、この画像枚数の規律はモデルの手抜きを防止するためにも機能します。
5二重目の独立検証
- [ok] 文首硬规则与正文是否自洽（一处打脸风险点） — 文首三令（一 section 一图 / hero 构图偏置 / 计数表）与 §5、§16、§19、§20 三处示例解读一致；§20 例 2 明确 '8 separate horizontal images (one per section)'，无自相矛盾。
- [discrepancy] 『Does not write code』声明的出处与 SKILL.md 自述 — README/llms.txt 声明 'Image-generation-only skill for creating premium website design reference images. Does not write code.'；但 SKILL.md 正文没有这句禁令——它反而在 §17 自检里写 'Can someone code from this?'、在 §1 写 '(1 = loose moodboard, 10 = very codeable UI reference)'，把『可编码』当作质量标准。两者不冲突（skill 本身不产出代码，只是要求参考图可被复刻），但与姊妹 skill imagegen-frontend-mobile 相比，后者正文有显式禁令（'This skill generates images only. / Do not switch into coding mode.'），web 版缺这句，跨模型时可能被误拉入编码模式。已记录。
- [ok] 外部依赖与网络调用清单为空 — 全文无 URL、无端点、无包名、无安装指令；连占位图源都未指定（§8 只禁『endless centered sections』等模式，不指定图片服务）。对比 gpt-taste 与 taste-skill-v1 均会写 picsum.photos，本文件确实为零依赖。
- [ok] 梯度/全幅背景规则是否与同仓库反渐变口径冲突 — §13 明确区分：允许低彩同色系渐变、晕影、微噪渐变；禁彩虹 mesh、紫蓝 AI 默认、霓虹描边、渐变文字作『高级感』捷径。属细分而非矛盾，已记录于 traits。
- [ok] 是否有隐藏脚本或可执行内容 — 文件为纯 markdown（含代码块仅为示例 HTML/CSS 描述与包名列表），grep 'exec|subprocess|bash|python|npm install' 零命中；无 sha/哈希、无 base64 载荷。
- [ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/imagegen-frontend-web/SKILL.md；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。
6結論
最適な用途： コードを書く前に高品質なWebサイトのビジュアルカンプを必要とする人：プロダクト／マーケティングのランディングページ、公式サイト、ポートフォリオのコンセプト案やセクション別リファレンス画像；Codex、Cursor、Claude Codeなどに画像を渡して実装を再現させる「画像先行」ワークフロー；クライアントに複数のビジュアル方向性を提示して迅速にコンペを行いたいチーム；ChatGPT Imagesなどのツールを使用しながら、「1枚にページ全体を詰め込む」デフォルト挙動を抑制したいユーザー。
不向きな用途： 実際のコード生成やインタラクティブなプロトタイプを必要とする場合（画像のみを出力するため）；ピクセル単位で厳密に再現可能な出力を求める場合（画像生成のランダム性は完全には制御できず、シード値やパラメータ制御は提供されない）；モバイルアプリのUI（同一リポジトリの imagegen-frontend-mobile を推奨）；ブランドアイデンティティ／ロゴシステム（brandkit を推奨）；コンテキスト長が短い環境や生成回数ごとの課金に敏感で、複数画像の出力コストを許容できないシナリオ；多言語対応やローカライズされた確定コピーを求めるタスク（短文のコピーのみを要求し、言語の一貫性は保証しない）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload imagegen-frontend-web.tar.gz
sha256:
Option B · Copy Guide for Agent68d29515cc937bdb…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ccbc15639c.