デザインカンプ・UIモックを、再利用できるレイヤー素材とレスポンシブUIへ落とし込む。必要素材の分解・生成・配信用整備・組み合わせ検証から、依頼範囲に応じて既存アプリへの実装まで扱う。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
採用された見た目と操作の優先順位を保ちながら、画面サイズと状態の変化に耐える部品へ分解する。成果物は依頼に応じた「実装用素材」または「動く画面」。カンプの画像一枚を表示しただけのものを実装としない。
imagegen と generative-prompt-design を読む。生成記録と採用画像の保存は imagegen-core に従い、ここで別規約を作らない。参照画像を実際に開き、生成時の原稿・プロンプト、ユーザーの修正指示、既存アセットとUIを確認する。複数案を組み合わせる場合は、背景・文字・イラスト・導線ごとに採用元を特定する。最新の明示指示を優先し、不採用案を形状や配色の根拠にしない。
既存のデザイン資料に、次を短く記録する。資料がなければ docs/DESIGN/{YYMMDD}_{slug}/ に設ける。
「文字表現を参考にする」は背景変更の指示ではない。ロゴやコピーの新規設計も、素材化のついでに始めない。実装まで許可されている場合は素材納品で止めず、確認済みの方針で進める。
主要操作を先に決め、各要素を次のどれで実現するか選ぶ。
| 実現方法 | 対象と判断 |
|---|---|
| 既存部品・既存素材 | ブランド、キャラクター、カードや商品写真、入力部品。利用できる正本を優先する |
| HTML/CSS | 見出し、本文、ラベル、番号、入力、ボタン、背景色・グラデーション、角丸、影。操作と読み上げを保つ |
| SVG・既存アイコン | 単純な線、星、吹き出し、矢印など。形の複雑さと既存スタイルへの適合で選ぶ |
| ラスター素材 | 水彩、紙地、複雑なイラスト、写真、手描き固有の質感。必要なものだけ生成・編集する |
別々に動く・縮む・重なるものを独立させる。例えば背景／キャラクター／装飾／カード各枚／文字を分け、UIラベルや矢印をイラストに焼き込まない。逆に、常に一体で使う絵を理由なく細分化しない。
手書き文字を画像にする場合は、通常のフォントで表現できない理由と正確な代替テキストを持たせる。周囲の帯や飾り線は独立調整が必要なら別素材にする。
素材作成前に references/asset-handoff.md を読み、保存先・寸法・透過・重ね順・描画範囲を決める。
カンプのアスペクト比を画面全体の制約にしない。操作の順序と主従を保って、コンテナ幅、要素幅、余白、カラム、改行、スクロールを設計する。
対象端末、代表幅、最小対応幅、ブレークポイント付近の挙動を決める。別端末の画像案がなくても、通常のレスポンシブ判断で補える部分は実装して確認する。主要操作や採用構図が変わる不明点だけを質問する。
生成には採用参照を渡し、維持する形・色・描画タッチ、単体素材として必要な範囲、透過、不要な文字や背景を具体化する。元カンプの背景ごと持ち込む編集と、独立した素材の生成を混同しない。
各素材は単体だけでなく、想定背景・表示サイズ・重なりで確認する。ファイルが生成されたこと、拡張子がPNGであることだけで透過成功としない。配信用変換やサイズ変更は元データを残し、画質と容量を確認して行う。
組み合わせ検証には、実装済みコンポーネントまたは小さなHTML/CSSプレビューを使う。画像生成で組み直した完成図は、実素材の重なりやレスポンシブ動作の証拠にはならない。
素材のみの納品なら、参照表・配置説明・配信用ファイル・実素材を使ったプレビューを渡し、未実装の操作や状態を明示する。「そのまま実装に使える素材」と「アプリへの実装完了」を区別する。
実装が依頼範囲なら ui-concept-implement に従って既存部品・状態・導線へ統合する。装飾は操作や読み上げを妨げず、画像のロード前にもレイアウトが大きく動かないよう寸法を与える。
検証では次の見落としを優先する。
最終報告は、素材または実装の完了範囲、採用ファイルと実画面へのリンク、確認した幅・状態、残件に絞る。実通信とモック、作業ツリー全体の検証とコミット単独の検証を区別する。
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Rebuild a degraded AI image to remove crunchy textures and repeated-edit artifacts while preserving identity, style, and composition. Use for clean remakes, not ordinary retouching or upscaling.
日本語の概要は準備中です。原文の説明を表示しています。
セミナー・講義・ウェビナー・研修・実演動画をローカルで文字起こしし、内容を分析して、必要なスライド画像や動画クリップ付きのHTML／Markdown資料を作る。動画から学習資料・実践ガイドを作りたい場合に使う。映像作品の再現設計やCanvas生成は対象外。
責務・依存方向・状態や副作用の境界を監査し、既存挙動を保って段階的にリファクタリングする。read-only監査にも対応する。
AGENTS.mdや既存スキルをGPT-6 Astra向けに監査・整理するときに使う。契約と意図的な他モデル委譲を保ち、重複、過剰な手順、曖昧な停止条件を修正する。
人物の参照写真から、同一性を保った複数アングルのキャラクターシートを生成・修正する。指定された身だしなみや撮影表現も整える。
既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。