imagegen-frontend-web

公開元は 2026-10-19 に、このスキルを Leonxlnx/imagegen-skills へ移しました。導入名と SKILL.md の中身は変わっていません（導入は上のコマンド）。

サイトを作り始める前に、見た目の方向を画像で固めたいときに効きます。出てくるのはコードではなく、デザインの参考画像（いわゆるカンプ）です。

冒頭の「絶対の出力規則」で枚数が決まる

最大の特徴は、冒頭に置かれた「絶対の出力規則」です。頼み方ごとに、生成する枚数が決まっています。

見出しの区画だけ

1 枚

ランディングページ（数の指定なし）

6 枚

サイト全体、宣伝サイト（数の指定なし）

8 枚

区画数を指定

その数だけ

1 つの区画を 1 枚の横長の画像で

1 つの区画を 1 枚の横長の画像で作り、複数の区画を 1 枚にまとめない、縦に長い 1 枚にしない、1 枚だけ返して残りを省かない、と繰り返し書かれています。

枚数の指定が曖昧なときは「多めに見積もれ」という指示です。製品のページと作品集も、数の指定が無ければ 6 枚です。

画像は 16:9・16:10・21:9 のいずれかの横長で、作る前に「N 枚を作る」と枚数を宣言し、1 枚ずつ「Section X of N」と名前をつけて出す決まりです。

全体の統一と、区画ごとの変化

区画ごとに別の画像になるので、色、書体、ボタンの型、角の丸み、写真の色調を全枚数でそろえる決まりがあります。そのうえで、配置の型や背景の扱いは区画ごとに変えます。配置の型は、サイト全体で少なくとも 3 種類を使う決まりです。

見出しの区画では使い古された型を避ける

見出しの区画では、「左に文字・右に画像」が最も使い古された AI の型だとして、中央寄せ、左下、画像を全面に敷く、など 9 つの代わりを先に検討させます。

場面によっては、同じ公開元の別のスキルが合います。

• image-to-code画像から実装に移す続きの役
• design-taste-frontend画像を経ずに直接コードを書かせる
• imagegen-frontend-mobileスマートフォン向けの版

画像を生成できない環境

画像を生成できない環境。画像の生成を前提にしたスキルです。生成の道具が無いと何もできません。

すぐにコードが欲しいとき

すぐにコードが欲しいとき。出るのは参考画像です。画像から実装に移すなら、同じ公開元の image-to-code が続きの役を担います。

画像を経ずに直接コードを書かせるなら design-taste-frontend です。

スマートフォンの画面

スマートフォンの画面。同じ公開元にスマートフォン向けの版（imagegen-frontend-mobile）があり、こちらは Web のサイト向けです。

SKILL.md 1 枚で完結している

SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚（約 37KB）で完結しています。

生成の回数が多く、費用がかかる

さらに「途中で止めるな、要約するな、1 枚だけ返すな」と書かれていて、最後まで生成し切る作りです。

質問をせずに進む

質問をせずに進みます。「強い解釈ができるなら、余計な質問をするな」と書かれています。業種、目的、雰囲気を最初の依頼にまとめて書くと、意図から外れにくくなります。

既定の値は大胆な側

既定の値は大胆な側です。揺らぎ 8、演出 8、画像の比重 9、余白 8 が既定です。

揺らぎ

8

演出

8

画像の比重

9

余白

8

依頼文の言葉（「すっきり」「編集記事風」「SaaS」など）に合わせて動かす決まりです。業務用の地味な画面が欲しいときは、そう書いてください。

画像の中の文字は、そのまま使えない

画像の中の文字は、そのまま使えません。参考画像は見た目の方向を決めるためのもので、画像生成の性質上、細かい文字が崩れることがあります。

日本語の見出しの組み方は、実装のときに改めて決めてください。

インストール数

インストール数は約 27 万件です。移る前のリポジトリにあった 13 件は約 22 万〜45 万件に収まっていて（2026-09-07 の上流集計）、一部がまとまって入っている形です。

1 枚だけ作ってもらえますか

依頼文で区画の数を指定すれば、その数だけ作ります。「見出しの区画だけ」なら 1 枚です。指定が無いと既定（ランディングページで 6 枚）になるので、試すときは必ず数を書いてください。

生成した画像をどう使えばいいですか

見た目の方向を決める参考です。そのままサイトになるわけではありません。画像に合わせて実装するなら image-to-code が、先に画像を作ってから実装する流れを受け持ちます。

毎回同じような絵になりませんか

それを避ける仕組みが本文の中心です。見出しの区画の大きさはページごとに 3 種から選び、背景の扱い、配置の型、ボタンの見せ方は区画ごとに変え、「紫や青の光」「意味の無い浮遊する塊」「ダッシュボードの部品の詰め込み」のような AI の定番を名指しで禁止しています。

ほかの画像生成のスキルと何が違いますか

写真や素材ではなく、Web サイトの設計図としての画像を作る点です。実装しやすさの値（既定 9）が高く、「そのままコードに起こせる参考」になることを重視しています。