메뉴
「バッジを生成して」「バッジ画像を作って」「バッジアイコンを生成して」など、バッジ画像の生成依頼時に、統一されたバッジデザインテンプレートを使って画像を自動生成する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
【必須・最優先】GrouMapのFlutter画面作成・画面編集・UI実装・コード修正・機能追加でUI/UXルールを適用するためのガイド。このスキルを発動せずにFlutterコードを1行でも書くことは禁止。「作成して」「修正して」「編集して」「追加して」「実装して」「画面」「ウィジェット」「UI」「UX」「レイアウト」「デザイン」「ボタン」「フォーム」「カード」「リスト」「タブ」「画面の見た目」「図鑑」「マップ」「dart」などのキーワードを含む依頼時に、コードを書く前に必ず最初に発動すること。スタンプ・スタンプカードのUI変更時にも使う。
「画像を生成して」「画像を作って」「アイコンを作って」「バナーを作って」など、画像生成の依頼時に、Nano Banana 2（Gemini 3.1 Flash Image）APIを使って画像を自動生成する。
【必須・最優先】GrouMapのFlutter画面作成・画面編集・UI実装・コード修正・機能追加でUI/UXルールを適用するためのガイド。このスキルを発動せずにFlutterコードを1行でも書くことは禁止。「作成して」「修正して」「編集して」「追加して」「実装して」「画面」「ウィジェット」「UI」「UX」「レイアウト」「デザイン」「ボタン」「フォーム」「カード」「リスト」「タブ」「画面の見た目」「図鑑」「マップ」「dart」などのキーワードを含む依頼時に、コードを書く前に必ず最初に発動すること。スタンプ・スタンプカードのUI変更時にも使う。
「手順書を更新して」「ガイドを整理して」「フェーズが完了したのでマークダウンを整理して」「フェーズが進んだので更新して」「ロードマップを更新して」など、フェーズ進捗に応じてAGENT_TEAM_GUIDE.mdとIMPLEMENTATION_ROADMAP.mdを最新状態に整理する依頼時に使う。
「計画書を作成して」「プランを作って」「設計書を作成して」「計画を立てて」「〇〇の計画書」「〇〇のプラン」など、計画書・設計書・プランの作成を依頼されたときに、/Users/kanekohiroki/Desktop/groumapapp/.claude/plans/ 配下にマークダウンファイルを作成して保存するためのルール。
「バッジ」「バッジ追加」「バッジ削除」「バッジ変更」「バッジ一覧」「バッジ定義」「badge」など、バッジに関するワードが出てきたときに BADGE_LIST.md を参照し、変更があれば追記・修正するためのルール。バッジの追加・削除・名前変更・獲得条件変更・レア度変更・画像パス変更・トリガー実装変更などの場面で使う。
| name | badge-image-gen |
| description | 「バッジを生成して」「バッジ画像を作って」「バッジアイコンを生成して」など、バッジ画像の生成依頼時に、統一されたバッジデザインテンプレートを使って画像を自動生成する。 |
ユーザーからバッジ画像の生成を依頼されたときに、統一されたデザインテンプレートを使って一貫性のあるバッジ画像を自動生成する。
/Users/kanekohiroki/Desktop/groumapapp/scripts/generate_image.py/Users/kanekohiroki/Desktop/groumapapp/BADGE_LIST.md/Users/kanekohiroki/Desktop/groumapapp/assets/images/badges/stamps_total_1.pngBADGE_LIST.md を読み取り、生成対象のバッジ情報を確認する。
レア度に応じたカラーを決定する:
| レア度 | カラー指定（プロンプト用） |
|---|---|
| common | silver and gray (#9CA3AF) |
| rare | blue (#3B82F6) |
| epic | purple (#8B5CF6) |
| legendary | gold (#F59E0B) |
バッジの内容に応じた中央アイコンの説明を英語で作成する。
a shield with a checkmark and a small stara steaming ramen bowl with chopsticksa map with a location pin以下の固定テンプレートを使ってプロンプトを組み立てる:
Generate a badge image matching the style of the attached reference image. A circular metallic coin-style badge icon for a mobile app achievement system. The badge has a brushed metal texture with a raised outer ring border and an inner recessed circular area. 3D metallic look with subtle shadows and highlights. Center icon: [アイコンの説明]. The icon is embossed on the metal surface in the same metallic tone. Color scheme: [レア度カラー] metallic finish. Japanese text curved along the bottom of the badge reads: '[バッジ名（日本語）]'. White background (#FFFFFF), no drop shadow, no background elements. Clean and consistent style, suitable for a mobile app UI at 512x512px.
変更する箇所は3つだけ:
[アイコンの説明] → バッジ内容に応じた英語のアイコン説明[レア度カラー] → 上記テーブルのカラー指定[バッジ名（日本語）] → BADGE_LIST.md に記載されたバッジの「名前」以下のコマンドで画像を生成する（必ず参考画像を第5引数に指定する）:
source ~/.zshrc 2>/dev/null && python3 /Users/kanekohiroki/Desktop/groumapapp/scripts/generate_image.py "プロンプト" "出力パス" "1:1" "1K" "/Users/kanekohiroki/Desktop/groumapapp/assets/images/badges/stamps_total_1.png"
1:11Kassets/images/badges/stamps_total_1.png を指定（デザイン統一のため必須）保存先:
assets/images/badges/{badgeId}.pngassets/images/badges/stamps_total_1.png背景透過処理（rembg / ローカル実行）: 生成された画像は白背景のため、rembgで背景を透過する。
python3 -c "
from rembg import remove
input_path = 'assets/images/badges/{badgeId}.png'
with open(input_path, 'rb') as f:
data = f.read()
with open(input_path, 'wb') as f:
f.write(remove(data))
print('Done')
"
pip install "rembg[cpu]" が事前にインストールされている必要がある。生成された画像を Read ツールで表示し、ユーザーに確認してもらう。
ユーザーが修正を希望する場合は、アイコン説明のみ調整して再生成する（テンプレートの他の部分は変更しない）。再生成後は再度手順7の背景透過を実行する。
Generate a badge image matching the style of the attached reference image. A circular metallic coin-style badge icon for a mobile app achievement system. The badge has a brushed metal texture with a raised outer ring border and an inner recessed circular area. 3D metallic look with subtle shadows and highlights. Center icon: a shield with a checkmark and a small star at the bottom. The icon is embossed on the metal surface in the same metallic tone. Color scheme: silver and gray (#9CA3AF) metallic finish. Japanese text curved along the bottom of the badge reads: 'はじめてのスタンプ'. White background (#FFFFFF), no drop shadow, no background elements. Clean and consistent style, suitable for a mobile app UI at 512x512px.
Generate a badge image matching the style of the attached reference image. A circular metallic coin-style badge icon for a mobile app achievement system. The badge has a brushed metal texture with a raised outer ring border and an inner recessed circular area. 3D metallic look with subtle shadows and highlights. Center icon: a collection of multiple stamps arranged together. The icon is embossed on the metal surface in the same metallic tone. Color scheme: blue (#3B82F6) metallic finish. Japanese text curved along the bottom of the badge reads: 'スタンプハンター'. White background (#FFFFFF), no drop shadow, no background elements. Clean and consistent style, suitable for a mobile app UI at 512x512px.
Generate a badge image matching the style of the attached reference image. A circular metallic coin-style badge icon for a mobile app achievement system. The badge has a brushed metal texture with a raised outer ring border and an inner recessed circular area. 3D metallic look with subtle shadows and highlights. Center icon: a grand crown with radiating light rays. The icon is embossed on the metal surface in the same metallic tone. Color scheme: gold (#F59E0B) metallic finish. Japanese text curved along the bottom of the badge reads: 'スタンプレジェンド'. White background (#FFFFFF), no drop shadow, no background elements. Clean and consistent style, suitable for a mobile app UI at 512x512px.
GOOGLE_API_KEY 環境変数が設定されている必要がある。stamps_total_1.png）は常にコマンドの第5引数に指定すること。pip install "rembg[cpu]" が必要。既存バッジの背景を一括で透過処理するスクリプトが用意されている:
python3 /Users/kanekohiroki/Desktop/groumapapp/scripts/rembg_batch.py