Menú
「ロゴを作成して」「ロゴを作って」「ロゴを生成して」など、ロゴ画像の生成依頼時に、GrouMapのブランドカラーとデザインスタイルを適用してロゴを自動生成する。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional 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 | logo-gen |
| description | 「ロゴを作成して」「ロゴを作って」「ロゴを生成して」など、ロゴ画像の生成依頼時に、GrouMapのブランドカラーとデザインスタイルを適用してロゴを自動生成する。 |
ユーザーからロゴ生成を依頼されたときに、GrouMapのブランドイメージに合ったロゴを自動生成する。
具体的な画像生成の手順（コマンド実行方法・保存先・アスペクト比の決定方法）は、以下のファイルを Read ツールで読み込んでから実行してください：
/Users/kanekohiroki/Desktop/groumapapp/.claude/skills/nano-banana-image-gen/HOW_TO_GENERATE.md
| 用途 | カラーコード | 説明 |
|---|---|---|
| プライマリオレンジ | #FF6B35 | メインのブランドカラー、ボタン・アイコン等に使用 |
| 背景色 | #FBF6F2 | 画面背景色（温かみのあるベージュ） |
ロゴ生成時は #FF6B35（オレンジ） を主軸カラーとして使用すること。
以下の参照画像のスタイルに 厳密に 準じてロゴを生成すること：
参照画像: .claude/skills/logo-gen/reference/logo_style_reference.png
ロゴ生成前に必ず Read ツールでこの参照画像を確認し、同じスタイルで生成すること。
参照画像は「ソリッド塗りつぶしUIアイコンセット」であり、以下の特徴を持つ：
重要: このスキルで生成するものはすべてオレンジ色（#FF6B35）を使用すること。ダークグレーやその他の色は使用しない。
Single solid filled [icon/logo] of [対象物], bold solid shape, filled silhouette style with white cutout details for inner elements, orange color #FF6B35 on white background, rounded corners, simple and clean with minimal detail, no outlines no strokes, no shadows no gradients no textures no 3D effects, flat 2D solid icon, professional and modern, centered with equal padding, isolated single [icon/logo]
[icon/logo]: 依頼内容に応じて icon または logo を選択[対象物]: シンプルな英語で対象物を記述（例: a coin, a medal badge with a star）必ず含めるキーワード:
solid filled （塗りつぶし）bold solid shape （太く力強い形状）filled silhouette style with white cutout details （シルエット塗りつぶし＋白切り抜きでディテール表現）no outlines no strokes （輪郭線なし）no shadows no gradients no textures no 3D effects （装飾禁止）flat 2D solid icon （フラットな2Dソリッドアイコン）single icon or single logo （1つだけ生成）centered with equal padding （中央配置・均等余白）絶対に含めないキーワード:
outline, stroke, line art, thin （アウトライン・線画系）colorful, vibrant, gradient （多色・グラデーション）3D, realistic, photorealistic （立体・写実）shadow, glow, reflection （影・光沢）detailed, complex, intricate （詳細・複雑）icon set, multiple icons （複数アイコン）対象物の記述:
a coin, a medal badge with a star, a stamp card1:1（正方形）2K/Users/kanekohiroki/Desktop/groumapapp/generated_images/logo_main.png, logo_icon.png）生成された画像を Read ツールで表示し、以下を確認する：
品質基準を満たさない場合: プロンプトを調整して再生成する。特に「アウトライン線画」になりやすいため、solid filled と no outlines no strokes を強調する。
ロゴ生成後は必ずオレンジ以外のすべてのピクセルを透明化すること。 remove-background スキル（rembg）は使用しない。rembgはコインの内側の白を残してしまうため、色ベースの透明化を行う。
生成されるロゴはオレンジ色（#FF6B35）の線のみで構成されるため、白やその他の非オレンジ色ピクセルはすべて背景として透明化する。
以下のPythonコマンドを使って透明化を実行すること：
source ~/.zshrc 2>/dev/null && python3 -c "
from PIL import Image
import numpy as np
img = Image.open('INPUT_PATH').convert('RGBA')
data = np.array(img)
# 白〜薄い色のピクセルを透明化（オレンジの線だけ残す）
# R,G,B すべてが200以上のピクセルは背景とみなす
mask = (data[:,:,0] > 200) & (data[:,:,1] > 200) & (data[:,:,2] > 200)
data[mask, 3] = 0
Image.fromarray(data).save('OUTPUT_PATH')
print('透明化完了')
"
INPUT_PATH / OUTPUT_PATH: 実際のファイルパスに置き換える（同じパスでもOK）注意: 白い部分が残った状態で納品しないでください。コインの内側も外側もすべて透明にし、オレンジの線だけが残る状態にすること。
GOOGLE_API_KEY 環境変数が設定されている必要がある（HOW_TO_GENERATE.md 参照）。