Stage Label

アイコン画像に環境ラベル（DEV / STG / PROD など）を追加できるWebツール。

https://kurotch321.github.io/stage-label/

機能

• 画像アップロード — ドラッグ＆ドロップ or クリックで選択
• 正方形クロップ — 短辺に合わせて自動クロップ、スライダーでオフセット調整
• ラベル設定
  • プリセット: DEV(赤) / STG(黄) / PROD(緑)
  • カスタムテキスト・背景色・文字色
  • 位置（4隅）・スタイル（リボン / バッジ）・フォントサイズ
• 出力サイズ選択 — 128 / 256 / 512 / 1024 px
• リアルタイムプレビュー
• PNGダウンロード（透過保持）

開発

npm install
npm run dev

ビルド

npm run build

Tech Stack

• Vite + React + TypeScript
• Tailwind CSS v4
• HTML Canvas API