1仕組みと動作原理
画像生成 → 詳細分析 → 実装の厳格な3段階プロセスの強制。順序はハードルールとして定義され、「視覚中心のタスクではこの順序を強制」、事前の自由なコーディングを禁止。
skills/image-to-code-skill/SKILL.md
image generation first deep image analysis second implementation third
原文 SKILL.md 65〜69行目：3段階プロセスの直後に「If the task is mainly visual, this order is mandatory.」（69行目）と明記。61行目の「The generated image(s) are the primary visual source of truth.」は画像をデザインの正本と定義し、コードは単なる翻訳層にすぎないとしており、プロンプトから直接コードを出力する通常スキルとの本質的な違いを示しています。
自前ツールではなくホストの画像生成機能に依存：本文では「when image generation is available」という限定条件が繰り返され、Codex内で最も厳格なルールを適用。
skills/image-to-code-skill/SKILL.md
Do not skip image generation when image generation is available.
スキルファイル自体には画像生成の実装は含まれず、機能前提はホスト（CodexやChatGPTの画像モード等）に依存します。Section 11には、画像優先プロセスをスキップ可能な例外（純粋な技術タスク、ユーザーがすでにデザインシステムを提供している場合など）も列挙されています。
「1 section = 1 image」のセクション粒度による画像出力：1〜10セクションそれぞれに応じた生成枚数を明確に規定し、1枚の長い画像にサイト全体を詰め込むことを否定。
skills/image-to-code-skill/SKILL.md
- 1 section requested → generate 1 image - 2 sections requested → generate 2 images - 3 sections requested → generate 3 images - 4 sections requested → generate 4 images - 5 sections requested → generate 5 images - 6 sections requested → generate 6 images - 7 sections requested → generate 7 images - 8 sections requested → generate 8 images - 9 sections requested → generate 9 images - 10 sections requested → generate 10 images
原文 §4 の連続した箇条書きブロック（1〜10セクション各1枚の画像指定）より。各画像内のテキスト、余白、ボタンを後からパラメータとして抽出できる十分な大きさに保ち、「見た目は綺麗だがパラメータが読み取れない」状態を防ぐ設計意図があります。
既存画像の切り抜きを禁止し、セクション全体の再生成を推奨：切り抜きは余白、フォント比率、マージンなどの抽出情報を損なうため、同一デザイン言語によるクリーンな独立セクション画像を新規生成することを要求。
skills/image-to-code-skill/SKILL.md
When a section needs a dedicated image or a closer detail view, do not simply crop, cut out, zoom into, or slice it from a previously generated larger image.
「Do Not Crop Old Images Rule」と「FRESH RE-GENERATION RULE」が対となって記載されており、安易なショートカットを確実に防止します。
分析フェーズを単なる概観ではなく「デザインシステムの抽出」として規定：抽出対象要素（テキスト、フォントスタイル、フォントサイズ関係、余白、グリッド、ボタン階層、パレット、角丸ロジック、画像処理等）を明文化し、不鮮明な箇所にはクローズアップ画像の再生成を許可。
skills/image-to-code-skill/SKILL.md
Carefully inspect and extract: - exact visible text where readable - hero headline wording - subheadline wording - CTA wording - section titles - typography character - type scale relationships
§9の網羅的チェックリストは画像を仕様書として扱い、フォントの雰囲気、行数、改行、配置、余白、角丸、ボタン、カラーパレットなど数十項目を列挙。§25ではデフォルトのWebカラーへの退行を防ぐため、カラーパレットを抽出して元の色彩ロジックを保持することを要求しています。
実装フェーズにおけるcopy-discipline（テキスト規範）とanti-drift（デザイン乖離防止）の二重制約：リファレンス画像に忠実であり続け、コーディング時に汎用テンプレートへと「勝手に手直し」することを禁止。
skills/image-to-code-skill/SKILL.md
Do not “improve” the design by replacing it with a generic coded layout.
Section 26/27は最大の失敗パターンである「画像は優れているのにコードが凡庸化する問題」に焦点を当て、「The goal is: visually faithful to the image, translated into real frontend」と定めています。
反復強調型プロンプトエンジニアリング：「手抜き生成の禁止」「カード内カードの禁止」「クリーンなHero」などの同一ルールが、詳解度を変えて複数セクションで繰り返し登場し、強制力のグラデーションを形成。
skills/image-to-code-skill/SKILL.md
Do not be lazy with image count.
grep検証により、該当表現は全1228行中3箇所（L107/L137/L1212付近）および複数の同義文で確認。anti-slopチェックリスト（Section 29）もlayout/visual/typography/content/densityの5系統で反復されており、モデルの注意力の減衰を防ぐ工夫がなされています。
2コア機能
01画像優先のワークフローオーケストレーション：リファレンス画像の自己生成 → 分析 → 実装（視覚タスクでは必須）
02セクション粒度での画像出力（1 section → 1 image以上）による、テキストおよびコンポーネントの高い可読性と抽出性の確保
03高度なデザインシステム抽出：テキスト、フォント、余白、ボタン、パレット、角丸、グリッド、画像処理を項目ごとに抽出
04セクション全体の再生成と詳細クローズアップの補完：古い画像の切り抜きを禁止し、不鮮明な場合は同一言語のクリーン画像や詳細画像を再生成
05デザイン乖離を防ぐ忠実な実装：汎用テンプレートへの退行を禁止した、コピー指向のコーディング規範
065カテゴリの反AI-slopリスト（layout/visual/typography/content/density）＋ 最小限Heroルール（メインタイトル1〜3行）
07方向性を決定する組み合わせ変異エンジン：Theme/Background/Type/Hero/Section/Motionから各1つを選択し一貫性を担保
08納品前の21項目clarity check（画像生成枚数の手抜きチェック、切り抜き有無、ネスト構造の整理等）
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: プロンプト指示およびルール定義テキストのみで構成され、スクリプト実行や外部影響は一切なし
監査ノート： （証拠：git ls-filesで確認したところ、ワークスペースはSKILL.md単一ファイルのみ。トークンスキャンでもURL/curl/wget/fetch/bash/exec/APIキー/.env/fsへのヒットはゼロ）。スキル自体にスクリプト実行、外部ネットワーク通信、認証情報の取り扱い、ローカル読み書きは一切存在しません。ホストに対する画像の読み込み、生成、コード記述の指示はすべてユーザー指示に基づくホストの認可された動作範囲であり、画像呼び出しもホストツールを経由します。留意点：実際の画像生成はホストが担うためネットワーク影響はホスト環境に依存します。自前生成画像からのテキスト抽出時に極めて低確率なプロンプトインジェクションの理論的余地があるほか、画像生成非対応ホストでは提案モードにフォールバックします。いずれもコードレベルの脆弱性ではありません。
5二重目の独立検証
- [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
- [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
- [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
- [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
- [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
- [ok] 『generate the design image(s) itself』的实现主体 — 文件全部以指令口吻要求模型出图（'you must first generate the design image(s) yourself'），并自限『when image generation is available』；实际图像工具属宿主能力，在 skill 文件内不可定位实现——此为能力前提而非 skill 缺陷，已在 how_it_works/traits 明示。
- [ok] 读取中途出现的省略号是否为文件内容（影响引证准确） — raw 复查+grep：文件内不存在字面 '…' 行；先前读取中的省略是展示层对重复行的压缩，全部引文均已逐条 grep -F 复核，无受影响条目。
- [ok] Codex 内外规则是否冲突 — Codex 内一区一图（§4）与 Codex 外『may still allow more compact multi-section composition』明确按宿主分流，非矛盾；§18 亦以 'Inside Codex' 为界重申 section-first 生成规则。
6結論
最適な用途： 視覚的完成度が成果物の中核であり、画像生成をサポートするホスト環境（Codex画像モード、ChatGPT Imagesエコシステムなど）で稼働するWebサイト制作タスクに最適：Hero、LP、マーケティング、ポートフォリオ、ブランドサイト、マルチセクションサイトなどの一気通貫ワークフロー（画像生成→分析→実装）。また、「コードより前に画像を確定する」SOPの確立を目指すチームの雛形としても有用。
不向きな用途： 画像生成機能を持たないホスト環境や、純粋な技術的・構造的タスク（バグ修正、確定したデザインシステムが既にある場合など）には不向き。1枚の全体画像から素早くドラフトを作成したい軽量シナリオ（ルールで明確に否定）や、スキル自体に画像APIやキー管理機能を期待するユーザー（画像生成機能およびコストはホスト側に依存）には適していません。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload image-to-code.tar.gz
sha256:
Option B · Copy Guide for Agent60f16fb068787a1c…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3cca18b368.