image-to-code
先に設計の画像を作らせ、それに合わせて実装させる。AI が陥る型を 14 個名指しで潰す
npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "image-to-code"入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 385,899
- 実用度
- 80
- GitHub star
- 111,156
- 最終更新
- 2026/11/5
頼み方の例
そのままコピーして使えますimage-to-codeを使って、この製品の導入部の設計案を作ってください。まず画像を節ごとに分けて生成して、私に見せてください。実装はそのあとにしてください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
いつ使うか
公開元は 2026-10-19 に、このスキルを Leonxlnx/imagegen-skills へ移しました。導入名と SKILL.md の中身は変わっていません（導入は上のコマンド）。
見た目が結果を左右する Web の作業です。
手順の順序が中心です。説明文がこう書いています。
見た目が重要な Web の作業では、まず自分で設計の画像を生成し、それを深く分析し、そのうえで画像に近づけて実装する。
つまりコードから始めません。絵を作って、それを再現する形です。本文の見出しも「中核の指令: 画像を先に置く Web 設計から実装へ」です。
想定している対象が具体的
「汎用の Web のモックアップを作るのが仕事ではない」と断ってから、対象が列挙されています。
導入部、ランディングページ、マーケティングのサイト、スタートアップのサイト、編集寄りのブランドのページ、製品のページ、作品集、複数の節を持つ上質なサイト、そして見た目の質が問われる作り直し。
★AI が陥る型を 14 個並べている（2026-10-05 確認）
ここがこのスキルの本体です。「標準的な AI の出力は、繰り返される既定に崩れていく」として、避けるべき型が列挙されています。
| 崩れ方 |
|---|
| 節が多すぎるのに、1 枚の巨大な圧縮画像で済ませる |
| 文字が小さすぎて読めない寸法になる |
| 中央揃えの暗い導入部という定型 |
| カードの氾濫 |
| 左に文・右に画像の配置の繰り返し |
| 書体の階層が弱い |
| 余白が曖昧 |
| カードの中にカード、その中にまたカード |
| 巨大な角丸の容器がどこにでもある |
| 最初の画面に情報が出すぎている |
| 小さな札・ラベル・タグ・偽の操作用語 |
| 見た目は良いが取り出せない設計 |
| 画像の段のあと、コードで一般的に作り直してしまう |
| 節の数に対して画像を出し惜しむ |
「見た目は良いが取り出せない設計」という項目が鋭いです。画像として綺麗でも、そこから CSS に落とせなければ意味がありません。
そして「これらの既定を積極的に破れ」と結ばれます。
Codex での振る舞いが指定されている
説明文に実行環境が名指しされています。
Codex では、小さく圧縮された板ではなく、大きく読める節ごとの画像を選ばなければならない。節や細部ごとに新しく独立した画像を生成し、古いものを切り出さない。出し惜しみをしない。カードの入れ子を避ける。導入部は綺麗に、広く、読めて、小さなノートでも見えるように保つ。
「小さなノートでも見える」が具体的で良い条件です。大きな画面で作ると、導入部が 1 画面に収まらなくなります。
同じ公開元にもう 1 件ある
design-taste-frontend はやってはいけないことの列挙が中心です。このスキルは手順（画像が先）を与えます。
image-to-code
手順（画像が先）を与える
手順でこちら
design-taste-frontend
やってはいけないことの列挙が中心
禁止事項であちら
組で使うと噛み合います。手順でこちら、禁止事項であちら。
使わないほうがいいとき
画像を生成できない環境
画像を生成できない環境では成立しません。手順の 1 段目が画像の生成です。
アプリの内部の画面
アプリの内部の画面には向きません。対象が「導入部・ランディング・マーケティング・作品集」で、見せるためのページに寄っています。管理画面や業務の画面には過剰です。
既存のデザインを再現するとき
既存のデザインを再現するなら順序が違います。これは自分で案を作る型です。指定された意匠を実装するなら、画像を生成する段が無駄になります。
本文も、技術的な作業・不具合の修正・詳しい設計の決まりを渡されたとき・構造が主の作業では、コードから始めてよいとしています。
生成の回数を抑えたいとき
生成の回数がかかります。節ごとに新しい画像を作る指示なので、節が多いページでは回数が積み上がります。
規則の一覧が欲しいとき
規則の一覧が欲しいなら別物です。決まった指針に照らして画面のコードを点検させるなら、web-design-guidelines の側が合います。
注意点
同梱は無く、本文が大きい
SKILL.md の解析では、外部通信・シェル実行・ファイル書き換えの記述は見つかっていません。同梱ファイルは 0 件です（2026-10-09 確認）。
本文が 37,670 バイトあります（2026-10-09 確認）。収録の中でも大きい側で、同梱が無いぶんすべてが本文に入っています。読ませると文脈をまとめて使います（スキルを入れすぎて重くなる仕組み）。
画像の生成に費用がかかる
生成された画像の扱いを決める
リポジトリに入れるのか、一時的に置くだけか。放っておくと参考画像が溜まります（スキルを入れる前に確認すること）。
「上質」の基準は公開元の趣味
避けるべき型の列挙には説得力がありますが、どれも絶対ではありません。
中央揃えの暗い導入部が合う製品もあります。自分の文脈で読み替えてください。
ライセンス
ライセンス: MIT。再配布や商用利用の前に公開元の表記を確認してください。
インストール数の推移
日次で記録9月18日 〜 10月30日（42日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
よくある質問
なぜ先に画像を作るのですか
コードから始めると既定に崩れるからです。本文は、AI の出力が繰り返される型（カードの氾濫、左文・右画像の繰り返しなど）に落ちることを問題にしています。
絵を先に決めて、それを再現する順序で止めにいっています。
画像は何枚くらい作られますか
節ごとに 1 枚以上です。本文が「節の数に対して画像を出し惜しむな」と明記しています。
古い画像を切り出して使い回すことも禁じられています。この 1 節 1 枚の決まりは Codex の中での既定で、Codex 以外では複数の節を 1 枚にまとめる構図も場合により認めています。生成の回数がそのまま増えます。
管理画面にも使えますか
過剰です。対象が導入部・ランディング・マーケティング・作品集といった見せるためのページに寄っています。
業務の画面なら、規則の一覧を持つ側のスキルが合います。
design-taste-frontend とどう違いますか
こちらは手順、あちらは禁止事項です。design-taste-frontend は「これをするな」の列挙が中心です。
同じ公開元なので、組で使うと噛み合います。
対応しているエージェントはどれですか
Claude Code と Codex です。説明文が「Codex 向けの」と明記し、「Codex では」で始まる指示が複数入っています。Claude Code については、公開元のリポジトリに Claude Code 向けのプラグインの定義があります（2026-10-09 確認）。
当サイトは公開元が明記しているものだけを「対応」として表示する方針なので、このスキルのページには両方が対応として出ます（指標の意味と限界）。