Community画像github.com

iithink88/cup-shop-illustration

アップロードしたコーヒー・タピオカミルクティーなどの飲み物写真から、ブランド・カップタイプ・配色・トッピングを自動認識し、画像生成AIで「カップで構成された」2Dアイソメトリックなミニチュア店舗イラスト(太い黒縁・フラットカラー・ブランドタイトル・マスコット・階段・観葉植物)に変換。さらに、元の写真とイラストを無裁断で並べた高解像度比較画像を生成し、「独立イラスト+比較画像」の2枚のPNGを納品します。

cup-shop-illustration とは?

このスキルは、ユーザーがアップロードしたコーヒー・タピオカミルクティーなどの飲み物写真を、自動でブランド・カップ形状・配色・トッピングを分析し、2Dアイソメトリック(等角投影)スタイルの精巧な店舗イラストに変換するものです。Adobe Illustratorで作られたような太い黒縁とフラットカラーが特徴で、元の飲み物の特徴(カップのロゴ、色、形)を忠実に保持したまま、建築物(窓、階段、マスコット、看板など)に再設計します。主にClaude CodeやWorkBuddyなどのAIエージェントプラットフォームで動作し、画像生成AI(ImageGen)とローカルPythonスクリプト(imgtool.py)を組み合わせてワークフローを自動化します。最終的には「独立したアイソメトリックイラスト」と「元画像vsイラスト」の高解像度比較画像の2枚のPNGを納品します。このスキルは、飲み物写真を創造的な建築イラストに変えたいマーケターやクリエイターに特に有用で、ユーザーは簡単なトリガーフレーズ(「飲み物写真をイラストに」「コーヒー写真を店舗に」など)で起動できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iithink88/cup-shop-illustration/tree/HEAD/cup-shop-illustration

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

一杯の飲み物、一軒の小さなお店

アップロードした本物のコーヒー/タピオカミルクティーの写真 → 精巧で可愛らしいブランドテーマのアイソメトリック店舗イラストと、「元画像 vs イラスト」の高解像度比較画像を1枚にまとめて納品します。

核心となるコンセプト(たった一言):元の飲み物の識別特徴を保持し、その建築的機能を再設計する。 「似たようなカップを描く」のではなく、「写真の中のその飲み物に、窓や階段や小さな店員が生える」こと。

完成品のイメージ

GridCoffee の緑のカップを例にとると:緑のカップ本体が2階建ての店舗本体に、ミルクホワイトのフタが屋上テラスに、白い四角いロゴはそのまま壁に残ります。カップ本体にはアーチ型の窓とストライプの日よけが設置され、右側には木製の階段と観葉植物、入り口にはマスコット、小さなテーブル椅子、A型看板があります。建物全体は斜めの石畳の台座の上に乗っています。上部には Grid Coffee / Americano / Yunnan · Giupo Estate という丸みのある太字タイトルが配置され、ミントグリーンのベタ塗り背景に白い雲があしらわれています。

スタイルは Adobe Illustrator で作った 2D ベクターイラスト であり、Blender でレンダリングした 3D シーンではありません。

ワークフロー(自動実行、ステップごとの確認は不要)

ユーザーはデフォルトで飲み物の写真を1枚アップロードし、ブランド名、飲み物名、コーヒー豆の産地、コラボ情報などの補足説明を添えることがよくあります。以下の6ステップを一度に実行します。

Step 0 · 画像受付と前処理

PY="$HOME/.workbuddy/binaries/python/envs/default/Scripts/python.exe"
[ -x "$PY" ] || PY="$(command -v python || command -v python3)"
SK="$HOME/.workbuddy/skills/cup-shop-illustration/scripts/imgtool.py"
OUT="<カレントワークスペース>/out/cup-shop-illustration"
mkdir -p "$OUT"

"$PY" "$SK" prepare "<ユーザーがアップロードした写真の絶対パス>" --out "$OUT/photo_clean.jpg"
  • prepare は EXIF 方向を統一し、sRGB に変換し、アルファチャンネルを削除し、長辺 ≤2048 にリサイズし、情報カード(幅・高さ・方向・輝度・主要色)を出力します。情報カードの方向が、後のキャンバス比率と比較画像のレイアウト方向を決定します。
  • ファイル形式とサイズのみ変更し、画像の内容は変更しません。ImageGen には photo_clean.jpg を渡します。比較画像の作成には、ユーザーがアップロードした元の写真を使用します。
  • ユーザーが HEIC / webp など Pillow で読み取れない形式をアップロードした場合は、システムツールを使用して事前に PNG に変換してからこのステップを実行し、その旨をユーザーに伝えます。

Step 1 · 写真を観察し、「識別カード」に記入

視覚能力を使用して元の写真を直接見ます(コードで輪郭を抽出したり、事前に線画を生成したりしないでください)。references/diagnose.md の識別カードに従って、項目ごとに読み取ります:

フィールド内容
ブランド名カップ本体のロゴ / テキスト、可能な限り英語名またはピンインを記載
飲み物名カップのラベル、レシート、またはユーザーの説明から読み取り
カップタイプテイクアウト用紙カップ / 透明プラスチックカップ / 缶 / ガラス瓶、および縦横比
上部構造平らなフタ、飲み口、ストロー、フォームミルク、クリーム、シール
主要色 / 補助色Step 0 の主要色情報カードと相互検証
ロゴとテキスト形状、位置、色(例:白い中空の四角枠 + カップ下部の GridCoffee)
トッピング / デコレーションコーヒー豆、タピオカ、フルーツ、砕いたクッキー、層、氷
産地 / コラボ雲南省の農園、コラボIPなど、環境要素に変換可能

ルール:ユーザーが明示的に指定した情報を優先します。写真から読み取れないものは決して捏造せず、「カップ本体の既存のテキスト/グラフィック」のように記述します。ブランド、配色、カップタイプを勝手に変更しないでください。

Step 2 · プロンプトの組み立て

references/prompt-master.md を参照し、そのメインテンプレートを使用して6つのスロット(ブランド / 飲み物 / 補足説明 / 元画像の方向で決まるキャンバス比率 / 背景色 / 特徴的な要素)を埋め、完全なプロンプトを生成します。

  • テンプレート内のスタイル条項、ネガティブワード、構図制約はそのまま保持し、簡略化しないでください。
  • 生成された最終プロンプトは重要な資産として、納品時に原文のまま添付します(ユーザーが再利用したいとよく言います)。
  • 中国語の文字看板が必要な場合、メインタイトルは英語のままにし、中国語は小さな装飾としてのみ使用します。AI の中国語は文字化けしやすいため、diagnose.md の対処方法を参照してください。

Step 3 · 画像生成(ImageGen 画像生成)

⚠️ 呼び出し前に、返信で必ず明示的に通知:1回のImageGenで約5〜10クレジットを消費します。 最初に宣言してから呼び出します。

パラメータ値
promptStep 2 の完全なプロンプト
image1Step 0 の photo_clean.jpg 絶対パス(実写、テキストからの生成は禁止)
size元画像が縦長の場合 1024x1365(3:4、2026-11-08 実測で利用可能、実際には 1024x1360 が返却される;拒否された場合は 1024x1280 にダウングレード);横長の場合 1536x1024;正方形の場合 1024x1024
qualityhigh
input_fidelitymedium(デフォルト、下記パラメータ調整を参照)
output_dir$OUT
footnote""(ツール側の透かしは除去可能。プラットフォームが強制的に「AI生成 WORKBUDDY」を重ねる場合、Step 5 の cleanwm で除去)
style未入力、スタイルはプロンプトで固定

input_fidelity のパラメータ調整:medium はカップの形状/ロゴ/配色を維持しつつ、再構図を許可します。「別のカップ」になってしまった場合 → high に上げる;写真をトレースしたような絵になり、視点が 45° になっていない場合 → low に下げる。

生成されるのは一枚の独立した完全なイラストであり、決して AI に左右比較画像を直接描かせたり、比較画像からイラストを切り出したりしてはいけません。

Step 4 · 自己チェック

references/diagnose.md の9項目の自己チェックリストに従って、項目ごとに比較します。3つの必須チェック項目:

  1. 一目で写真の飲み物だとわかるか?(カップの形状、主要色、ロゴの位置)
  2. 純粋な 2D 太黒枠 + ベタ塗りか?(プラスチック感 / グラデーション / ソフトシャドウの出現 = 失敗)
  3. 建物、階段、人物、台座、タイトルがすべて画面内に収まっているか?(途切れている = 失敗)

不合格 → 該当するプロンプト部分のみ変更し、最大で再試行は1回のみ。それでも不合格の場合は、正直に納品し、調整可能な方向性を説明します。成功を偽装しないでください。

Step 5 · 透かし除去 + コードによる比較画像作成

プラットフォームはイラストの右下に強制的に「AI生成 WORKBUDDY」の白文字を重ねます。footnote: "" では除去できません。まず痕跡を残さず除去し、その後比較画像を作成します:

"$PY" "$SK" cleanwm "$OUT/<イラストファイル名>.png" --out "$OUT/<元のファイル名>_illustration.png"

"$PY" "$SK" compose \
  --photo "<ユーザーがアップロードした元の写真の絶対パス>" \
  --art "$OUT/<元のファイル名>_illustration.png" \
  --out "$OUT/<元のファイル名>_compare.png"
  • cleanwm のデフォルトの selective モードは、白っぽい透かしピクセルのみを背景色に引き寄せます。台座を切り取ったり、緑の葉を誤って消したりしません。実測で残留物や継ぎ目はありません。デフォルトは --threshold 160。右下に白い雲や白い石畳などの薄い色の装飾がある場合は、190–210 に引き上げて誤検出を防ぎます。透かしの位置が特殊な場合は --box "x0,y0,x1,y1" で調整するか、--mode fill に変更します(枠内の装飾を消去するため、注意して使用)。
  • compose は元画像の方向に応じて自動的にレイアウトを選択:縦長/正方形 → 元画像が左、イラストが右。横長 → 元画像が上、イラストが下。--layout side|stack で強制指定も可能。
  • イラストの元のピクセルを基準とし、イラストは拡大縮小しない。元画像はアスペクト比を保って拡大縮小し、位置を合わせます。白い間隔は 24px、外側の余白は 24px で、比率の違いは余白で吸収します。
  • 元の写真の内容を切り取ったり、引き伸ばしたり、変更したりしません。高解像度 PNG で出力します。
  • cleanwm が機能しない場合、代替として trim <イラスト> --bottom 0.06 --mode pad を使用します。ただし、画面下部を切り取るため、台座を切ってしまう可能性があるので、やむを得ない場合のみ使用します。

Step 6 · 納品

present_files を使用して、まず比較画像を表示し、次に独立したイラストを表示します(両方を提供します)。返信には3行の結論(識別されたブランド/飲み物、キャンバス比率と input_fidelity、2つのファイルのパス)と、完全なプロンプトの原文を添付します。

ハードルール(違反は失敗)

  1. 必ず実写を image1 として画像生成を行い、テキストだけでカップを描き直してはいけません。
  2. 比較画像には、ユーザーがアップロードした元の写真を必ず使用し、AI が描き直した「写真」で代用してはいけません。
  3. 元のカップの形状、主要色、ロゴ、パッケージの特徴を保持します。再設計するのは建築的機能であり、パッケージではありません。
  4. 元の写真の撮影角度を機械的にコピーせず、合理的な3次元空間の推測(45° 斜め上のアイソメトリック)を行います。
  5. まず独立した完全なイラストを生成し、その後比較画像を作成します。比較画像からイラストを切り出すことは禁止します。
  6. 2D ベクターイラストのみ。3D レンダリング / 写実 / 水彩 / グラデーション / 複雑な照明効果は厳禁です。
  7. コードで輪郭を抽出したり線画を生成したりせず、画像モデルに元画像を直接理解させます。
  8. 画像生成前にクレジット消費を必ず通知します。ステップごとの確認は求めず、一度に実行します。

調整可能項目

変更したい内容変更箇所
背景色プロンプト「明るく柔らかなミントグリーン」→ ブランドに合った色に変更
タイトル文字メイン/サブタイトルスロット。不確かな場合はブランド名のみ
産地 / コラボ要素「特徴的な要素」スロット(例:コーヒーの木の枝、農園のA型看板、コラボキャラクター)
マスコットの数 / 階段スライダープロンプト「建築デザイン」セクションの設備リスト
キャンバス比率Step 3 の size、同時にプロンプト内のキャンバス条項も変更
忠実度input_fidelity low / medium / high
比較画像の間隔と背景色compose --gap --pad --bg

リソース

ファイル用途
references/prompt-master.mdメイン:完全で再利用可能なプロンプトテンプレート、スロット表、3つの完成サンプル、ネガティブワード表
references/diagnose.md写真識別カード、9項目の自己チェック、失敗時の修正方法表、中国語テキスト処理
scripts/imgtool.pyprepare / cleanwm / compose / trim / sheet の5つのローカルサブコマンド
README.md中国語のインストールと使用説明

関連スキル