img-to-html

Img → HTML

概要

インターフェースのモック（PNG/JPG/WebP）を、段階を追って忠実なHTMLの再現に変換するスキルです。

**入力：**参照画像（チャットに添付、パス、または URL）。指定がない場合は、ユーザーに依頼してください。

出力：参照画像のコピー、ワイヤーフレーム、index.html、生成した CSS、JS、メディアを含む assets/ フォルダーを格納した design-systems/<slug>/ フォルダーです。

最終的なエントリーポイントの名前は、必ず index.html にしてください。メインの HTML に別の名前を使わないでください。

<slug> = モックの短い名前（ケバブケース。例：chatgpt-glass-dash）。ユーザーが指定しない場合は、ファイル名から決めるか、ユーザーに尋ねてください。

段階を踏む理由

画面全体を一度に再現しようとすると、色、ガラス表現、アイコン、フォントが混ざり、失敗します。フローはボトムアップです。各レイヤーは、前のレイヤーがユーザーに承認されてから着手します。ワイヤーフレームで「何が」存在するかを定義し、計画で各領域を「いつ」「どのように」実装するかを示します。アセットは用途に応じて追加します。背景を構成する画像は、背景と同時に作成します。

パイプライン

1. reference → $to-wireframe format=ascii → wireframe.txt + plano → [usuário aprova ambos]
2. fundo completo (CSS e/ou imagens)       → [usuário aprova]
3. estrutura e componentes + fontes       → [usuário aprova]
4. assets restantes (ícones, imagens etc.) → [usuário aprova, se houver]
5. revisão final integrada                → [usuário aprova]

承認ゲート（すべての段階に適用）

各段階の完了時：

1. 結果を提示します（パスと、macOS での open、および／またはブラウザーでのスクリーンショット）。
2. 正しいか、変更したい点があるかを尋ねます。
3. 停止します。 次の段階には進みません。

明示的な確認（「承認」「進めてください」「OK」）があった場合のみ、先へ進みます。ユーザーが修正を依頼した場合は、編集して再度提示し、新たな承認を待ちます。

計画の承認は、提案された手順を進める許可となりますが、実装の承認ゲートに代わるものではありません。残りのアセットがない場合は計画にその旨を記載し、ステップ 4 を省略します。ステップ 3 の承認後、最終レビューに進んでください。

フォルダー構成

design-systems/<slug>/
  reference.[ext]      # cópia da imagem de entrada
  wireframe.txt        # planta tipada criada por $to-wireframe format=ascii; plano apresentado junto
  index.html           # markup — só estrutura, sem <style>/<script> inline
  assets/
    styles.css         # todo o CSS
    app.js             # todo o JS (só se o mock precisar de comportamento)
    crops/             # recortes da reference
    *.png / *.mp4 …    # imagens, ícones, vídeos gerados

スタック：HTML + CSS + JS を分離

ビルドなし、バンドラーなし、フレームワークなし、node_modules なし、開発サーバーなし — open index.html で開いて動作します。

• index.html からほかの 2 つを読み込みます。<head> に <link rel="stylesheet" href="assets/styles.css">、<script src="assets/app.js" defer></script> を配置します。
• HTML 内にインラインの <style> や <script> を記述せず、要素に style="…" も指定しません。CSS はすべて assets/styles.css に記述します。
• styles.css は 1 つだけにします。約 1500 行を超える場合は、領域ごと（assets/nav.css、assets/cards.css）に分割し、対応する <link> を追加してください。ただし、既定では 1 ファイルにします。
• 補助フォルダーは assets/ のみです。CSS、JS、画像、アイコン、動画、クロップ画像はすべてここに置きます。
• Tailwind もフレームワークの CDN も使いません。:root にデザインシステム用のカスタムプロパティ（色、角丸、影、タイポグラフィ）を定義し、プレーンな CSS を使います。
• ワイヤーフレームの各領域は CSS クラス（.nav、.hero、.card、.card2、…）にし、型指定された各タグはユーティリティクラス（.h1、.t2、.btn、.lnk、…）にします。ワイヤーフレームで同じ ID を持つ要素には、同じクラスを使います。
• 繰り返しコンテンツ（カードのリスト、ナビ項目）は HTML に直接記述します。モックに実際の動作が必要な場合のみ app.js を作成してください。JS のループでマークアップを生成しないでください。
• パスは常に相対パスにします：assets/{id}.png。

ユーザーが React/Vite を明示的に指定した場合のみ、スタックを変更してください。

---

ステップ 1 — 型付き ASCII ワイヤーフレーム + 計画

目的：画面の構造設計図として、存在する領域と各領域内のテキストを定義し、領域ごとの短い実装計画を添えます。

ワイヤーフレームは HTML との契約です。各領域と型指定された各タグは、後でそれぞれCSS クラスになります（同じ ID = 同じ見た目）。作成方法、型指定の語彙、ネスト、構造レビューは $to-wireframe の範囲に限ります。このスキル内でこれらのルールを繰り返さないでください。

ワイヤーフレームの作成

1. design-systems/<slug>/ を作成し、画像を reference.[ext] にコピーします。
2. format=ascii、image=design-systems/<slug>/reference.[ext]、output=design-systems/<slug>/wireframe.txt を指定して、スキル $to-wireframe を実行します。
3. wireframe.txt は、この実行における正式な契約として維持します。この段階では SVG を生成しません。
4. $to-wireframe の納品後は、ワイヤーフレームを変更しません。構造上の修正は、同じ画像と format=ascii を指定して $to-wireframe に戻します。

実装計画（同じ承認内で）

$to-wireframe の ASCII を受け取ったら、各領域について 実装段階と予定する手法を示します。同じ内容の領域はまとめます。計画は短い表にしてメッセージ内に提示します。ASCII には追加しません。段階と手法は、ID／クラスにも UI テキストにも含めません。

計画例（参照画像に合わせて調整してください）：

領域／要素	段階	予定する手法
画面の背景＋装飾アート	2	CSS グラデーション＋透過イラスト
ナビゲーション、ヒーロー、カード	3	HTML/CSS。微調整の前にフォントファミリーとウェイトを決定
カードのイラスト背景	3	カードの表面と合わせた画像＋CSS
メディア領域	3 / 4	段階 3 で構造を作成。段階 4 でコンテンツ画像を追加
アイコンとアバター	4	切り抜き画像から生成したアセット
画面全体	5	全体を比較し、最終調整

忠実度、作業量、位置やスケールの調整しやすさを考慮して、CSS、画像、またはその組み合わせを視覚的に選択します。色、グラデーション、単純な形状には CSS が適しています。複雑なアートやテクスチャには画像が適しています。個別に調整する必要がある場合は、レイヤーを分けます。構成をより忠実に再現できる場合は、背景画像を 1 枚だけ使う方法も有効です。テキストとコントロールは HTML として保持します。

画像は形式ではなく 用途で分類します。画面の背景 → 段階 2、コンポーネントの背景 → 段階 3、コンテンツ画像、アイコン、アバター → 段階 4 です。背景に不可欠な要素が未完成の状態で、表面を承認してはいけません。段階 1 でこれらのアセットを計画することは、その段階で切り抜きや生成を行うという意味ではありません。

計画の確認のみを行います。ワイヤーフレームの全領域が含まれており、背景アセットとその他のアセットが区別されているでしょうか。その後、wireframe.txt と計画を一緒に示し、構造＋提案された順序／手法に対する単一のゲートを適用します。

---

段階 2 — 背景全体（CSS および／または画像）

前提条件：ワイヤーフレームと計画が承認済みであること。

1. index.html（assets/styles.css への <link> と空の <body> を含む最小限の骨組み）と、assets/styles.css（短いリセット、および定義できるカスタムプロパティを含む :root）を作成します。
2. 計画で選択した手法（CSS、単一画像、またはレイヤーの合成）で背景全体を再現します。下記のアセット手順に従って、必要な画像をこの段階で作成し、段階 4 まで先送りしないでください。独立したレイヤーが複数ある場合は、同じ並列バッチで生成し、すべて完了してから背景を合成します。
3. ナビゲーションバー、カード、コンテンツは追加しません。背景の合成に必要な場合は、<body> に装飾要素を追加してもかまいません。CSS 背景や疑似要素も使用できます。
4. 位置、スケール、切り抜き、透明度、レイヤー間のブレンドを調整します。ブラウザーでファイルを開き（open index.html）、合成した背景を参照画像と比較します。
5. ゲート。

---

段階 3 — 構造とコンポーネント＋フォント

ここではワイヤーフレームの構造とテキストを扱います（index.html のマークアップ、assets/styles.css のスタイル）。まず chrome（nav — トップバーおよび／またはサイドバー）を作成し、次にカードの種類ごと（card、card2、…）に作成してから、その他の領域を追加します。コンポーネントの背景を構成する画像はコンポーネントと合わせて追加します。独立した画像には、アセット手順と同じ並列バッチを使用します。ゲートは最後に 1 回だけ適用します。

ファインチューニング前のフォント

1. タグの種類ごと（h1…t3、btn、lnk、…）に、ファミリー＋ウェイトを特定します。ローカルのfind-fontスキル／APIが利用できる場合は、text=を大文字・小文字を区別して指定し、1行分をクロップして使用します。利用できない場合は、目視で最も近いGoogle Fontを選び、近似であることを明記します。
2. Google Fontsの<link>をindex.htmlに、または@font-faceをstyles.cssに適用し、対応するクラスにfont-family／font-weightを設定します。同じタグIDには同じタイポグラフィを使用します。
3. 改行、寸法、間隔を調整する前に、フォントが読み込まれていることを確認します。ファミリー／ウェイトの選定を最終レビューまで先延ばしにしないでください。

目標：各サーフェスを参照画像と見分けがつかない状態にします。推測ではなく、計測しながら反復します。

• 色（referenceでスポイト／ピクセルサンプルを使用）
• グラデーション（角度＋ストップ）
• 透明度（ガラス調か不透明か）
• ボーダー／リムライト（方向、ソフトか細線か）
• グロー／外側の影と内側の影
• 角丸、パディング、要素間の間隔
• 適用済みのタイポグラフィ（ファミリー／ウェイト、サイズ、行の高さ、字間）

サーフェスごとの手順（まずナビゲーション、その後カードごと）：

1. 参照画像をクロップします（またはブラウザーで横並びに表示します）。
2. ピクセルをサンプリングします（塗り、左上／右下のリム、テキスト、メタデータ）。
3. index.htmlにマークアップを記述し、assets/styles.cssにクラスを定義します。再利用する値は:rootのカスタムプロパティにします。
4. 再現画像とクロップを比較し、一致するまで調整します。

ステップ4に割り当てられたアセットのみ、寸法を確保したプレースホルダーのままにします。背景とコンポーネントのフォントは、すでに完成している必要があります。対象領域の実装と比較が完了したら、→ ゲートに進みます。

---

ステップ4 — 残りのアセット

このステップに割り当てられた[ico:]／[img:]／[av:]およびその他のアセットを実装します。すでに承認済みの背景アセットを再利用し、このステップを満たすためだけに再生成しないでください。ステップに必要なクロップをすべて準備し、以下の手順で独立したアセットを並列生成します。その後、まとめて比較してゲートを提示します。未対応の項目がなければ、計画に従ってこのステップを省略します。

アセット手順（ステップ2、3、4で使用）

1. 生成を始める前に、referenceで必要なクロップをすべて作成し、assets/crops/{id}.pngに保存します。
2. リクエストをバッチに分けます。互いに依存せず、出力先ファイルが異なるアセットは同じバッチにまとめます。新たに生成した画像や、まだ承認されていない合成画像に依存するアセットは、次のバッチに回します。
3. 各バッチをOpenRouter（gpt2）経由のGPT Image 2で並列に再生成します。アイコンや切り抜いたレイヤーでは透明な背景のPNGを指定し、背景全体の場合は必要な背景を維持します。アートに合わせてプロンプトを調整します（写真、テクスチャ、3Dなど）。すべてのアセットにフラットなスタイルを強制しないでください。各コマンドをバックグラウンドで起動し、結果を配置する前にwaitを実行します。独立した2つのアイコンを生成する例：

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id}.png \
  --filename design-systems/<slug>/assets/{id}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id-2}.png \
  --filename design-systems/<slug>/assets/{id-2}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

wait

スキルリポジトリのcwdから実行するか、絶対パスを使用します。アセットが1つだけの場合は、&とwaitを使わずに同じコマンドを実行します。--aspect-ratioはクロップまたは配置先レイヤーに合わせて調整します。モックから背景を生成する場合は、テキスト、カード、重ねて表示されるコントロールを再現せず、背景アートのみを指定します。OPENROUTER_API_KEYが必要です（プロジェクトの.envまたは~/.env）。

4. waitの後、各結果を<img src="assets/{id}.png">（またはbackground-image）でHTMLに配置し、参照画像と比較します。
5. 失敗したものがある場合は、影響を受けたアセットのみを準備し、プロンプトを調整して新しいバッチで再生成します。合格済みのアセットは再生成しません。
6. アセットは、それを使用するステップの合成画像上で評価します。ゲートはそのステップのものであり、ファイルごとの追加承認はありません。

---

ステップ 5 — 最終統合レビュー

1. フォントとアセットを読み込んだ状態で、同じビューポートを使い、画面全体のスクリーンショットをリファレンスと比較します。
2. ワイヤーフレーム／プランの網羅性を確認し、アセットを配置した後の統合上の差異（レイヤーの重なり、切り抜き、位置合わせ、改行、余白）を修正します。
3. 相対パスと、実装されている場合は動作を確認します。実際に生じている近似や未対応事項があれば報告します。
4. 画面全体と最終ファイルを提示します → ゲート。 このステップで結果を統合します。フォントと背景は前のステップですでに実装されています。

---

やってはいけないこと

• ゲートを飛ばしたり、1 回のターンで複数のステップを「先に進めたり」すること。
• ステップ 1 で、計測、切り抜き、OCR、アートの作成、または 1 回のレビューを超えるワイヤーフレームの調整を行うこと。
• 必須の背景画像の追加をステップ 4 まで先送りしたり、フォントの選定を最終レビューまで残したりすること。
• ワイヤーフレーム内で判読できないテキストを創作すること。
• 領域ラベルのないコンポーネントの枠を描いたり、子カードを親要素内のばらばらなテキストにまとめたりすること。
• アクティブなナビゲーション項目を [lnk:] としてマークすること（[btn:]／バリアントを使用してください）。
• プランでリファレンスから生成したアセットが指定されているのに、アイコン／画像を Lucide や「似た」プレースホルダーで代用すること。
• インライン CSS（HTML 内の <style> や要素の style="…"）を書くこと。すべてのスタイルは assets/styles.css に記述してください。
• package.json、バンドラー、フレームワークを追加したり、assets/ の外にファイルを散在させたりすること。