imagegen-frontend-mobile
スマートフォンのアプリの画面の案を、画像で作らせる。画面ごとに 1 枚、端末の枠に入れて並べる。コードは書かない。画面の流れとして筋が通るかまで見させる
npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "imagegen-frontend-mobile"入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 373,769
- 実用度
- 76
- GitHub star
- 111,156
- 最終更新
- 2026/11/5
頼み方の例
そのままコピーして使えますimagegen-frontend-mobileスキルを使って、家計簿アプリの初回起動から家計の一覧までの流れを計画してください。画面の数と順番、iOS と Android のどちらに寄せるか、色と書体の方針を一覧にしてください。画像の生成はまだ行わないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
いつ使うか
公開元は 2026-10-19 に、このスキルを Leonxlnx/imagegen-skills へ移しました。導入名と SKILL.md の中身は変わっていません（導入は上のコマンド）。
アプリを作り始める前に、画面の見た目と流れを画像で固めたいときに効きます。初回起動の説明、ログイン、ホーム、設定、買い物の流れなど、スマートフォンのアプリの画面が対象です。
画像だけを作り、コードは書かない
冒頭で「画像だけを作る。コードは書かない」と念を押しています。SwiftUI、React Native、Flutter、HTML のどれにも切り替えないよう書かれています。
本文が決めていること
- 最初にiOS 寄り・Android 寄り・どちらでもない、のどれかを選び、混ぜない
- 画面の数頼まれた数だけ。流れを頼まれたら複数の画面
- 見せ方既定で端末の枠に入れる。ただし主役は画面の中身
- 詳細を見せたいとき前の画像を切り抜かず、新しく 1 枚作る
何枚作っても同じアプリに見せる
複数の画面を作るときは、最初に内部の設計書を決めさせます。色、書体、余白、角の丸み、アイコン、写真の扱い、端末の枠の大きさなどです。3 枚目、4 枚目で別のアプリに見えてこないように、という決まりです。
画面の並びにも筋を通す
「2 枚目はなぜ 1 枚目の次か」「どの操作で次に進むか」を考えさせます。説明 → ログイン → ホーム、一覧 → 詳細 → かご、のように実際に使う順に並べます。
使わないほうがいいとき
Web サイトやランディングページ
本文が対象外と明記しています。同じ公開元の imagegen-frontend-web の担当です。
すぐにコードが欲しいとき
画像からの実装も対象外です。画像を渡して実装させるなら image-to-code です。
- imagegen-frontend-webWeb サイトやランディングページの画像
- image-to-code画像を渡して実装させる
画像を生成できない環境
画像の生成を前提にしたスキルです。
注意点
SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚（約 40KB）で完結しています。
生成の回数が増えやすい
- 「生成の意欲」の既定
- 10 段階の 10
- 作り直しの条件
- 19 個
- SKILL.md（同梱ファイルは無し）
- 約 40KB
生成の回数が増えやすい作りです。「生成の意欲」は 10 段階の 10 が既定です。「怠けて画面の数を減らすな」「細部が分かりにくければ追加の画像を作れ」「最初の平凡な出来で満足するな」と書かれています。作り直しの条件も 19 個並んでいます。
画像の中の文字は仮のもの
画像の中の文字は仮のものです。本文は文字の読みやすさを最優先にしていて、「文字が小さいと感じたら、デザインは終わっていない」とまで書いています。
それでも画像生成では細かい文字が崩れることがあり、和文は特に崩れやすいです。文言は実装のときに改めて決めてください。
「AI らしさ」の禁止の一覧が具体的
「AI らしさ」の禁止の一覧が具体的です。紫と青のグラデーション、意味の無いガラス風の部品、でたらめなグラフの詰め込み、スマートフォンの枠に入れただけの Web ページ、などです。「あなたの可能性を解き放つ」のような決まり文句や、Acme のような架空の社名の定番も名指しで禁じています。
インストール数
インストール数は約 26 万件です。移る前のリポジトリにあった 13 件は約 22 万〜45 万件に収まっていて（2026-09-07 の上流集計）、一部がまとまって入っている形です。
インストール数の推移
日次で記録9月18日 〜 10月30日（42日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
よくある質問
端末の枠なしで作れますか
できます。既定は枠ありですが、依頼文で枠なしと書けば外します。枠ありのときも、枠が目立ちすぎず、周りの余白が均等になるよう決められています。
業種によって作りは変わりますか
変わります。金融は信頼と落ち着いた余白、健康は数値の見やすさ、仕事の道具は一覧の整理、SNS は写真の見せ場、買い物は商品の写真と支払いまでの分かりやすさ、暮らし・ウェルネスは柔らかい質感とゆとりのある余白、を優先するよう書かれています（6 分野）。
初回起動の説明の画面は何枚作られますか
枚数の決まりはありませんが、1 枚では済ませず、複数の画面にします。アイコンと見出しだけを変えた同じ型の 3 枚を並べることを禁じ、画面ごとに配置を変えさせます。説明の途中で評価を求める画面を出すことも「避ける」側に入っています。
Web 版の imagegen-frontend-web と何が違いますか
対象の画面が違います。こちらはアプリの画面と、その間の流れが中心で、端末の枠、画面上端の時計などの領域、下のタブの扱いといった、スマートフォン特有の決まりを持っています。
同じ分類のスキル
✳ デザイン・UIdesign-taste-frontend
研究から作った方向をスクリプトで 3 案配らせ、実ブラウザで測り、画面写真を見て直させる。「AI が作った見た目」を消すための道具一式
higgsfield-brandkit
ブランドの色・ロゴ・書体を 1 つずつ選ばせて、名刺や包装や SNS の画像、PPTX と PDF のブランドブックまで作らせる。ロゴは SVG で、選んだものは手元に記録して使い回す
apple-design
Apple の WWDC の設計講演を Web に置き直して、指に吸い付く画面を作らせる。ばねの値、慣性、途中で掴み直せる動きまで具体的