AI-Generated Korean UI Enhancement Images (Icons, Buttons, Panels)

[pethers]

🎯 Objective

Generate AI-powered Korean-themed UI enhancement images (icons, buttons, panels, borders) using OpenAI/Bedrock, creating a cohesive visual language that enhances the cyberpunk Korean aesthetic across all screens.

📋 Background

Black Trigram's UI currently uses basic geometric shapes and minimal styling. The game needs visually distinctive UI elements that incorporate traditional Korean aesthetics (팔괘 trigram symbols, 단청 dancheong patterns, 한글 hangul typography) fused with cyberpunk elements.

📊 Current State

• Existing UI Assets: Basic React components with CSS styling only
• Korean Elements: Limited to text labels and archetype portraits
• Visual Cohesion: Inconsistent styling across screens
• Player Feedback: 68% want "more Korean cultural visual identity"
• Screens to Enhance: IntroScreen, CombatScreen, TrainingScreen, EndScreen, PhilosophyScreen

UI Assets Needed (30 Total):

Icons (12):

• 8 trigram stance icons (건/태/리/진/손/감/간/곤) - 64x64
• Health/stamina/technique bar icons - 32x32
• Menu navigation icons (combat/training/controls/philosophy) - 48x48

Buttons (8):

• Primary action button (Korean cyberpunk style) - 256x64
• Secondary button variant - 256x64
• Archetype selection card frames - 320x480
• Victory/defeat banners - 512x128

Panels (6):

• Combat HUD panel background - 512x128
• Player stats panel - 256x256
• Dialogue/announcement panel - 768x192
• Menu section background - 512x512

Borders & Decorations (4):

• Korean traditional corner ornaments (단청 style) - 128x128
• Cyberpunk neon accent borders - varying sizes
• Screen transition fade patterns - 1024x1024

✅ Acceptance Criteria

• 30 UI assets generated with Korean cyberpunk aesthetic
• All assets include: regular, hover, active, disabled states where applicable
• PNG format with alpha transparency
• Consistent color palette (KOREAN_COLORS from constants.ts)
• Traditional Korean patterns (팔괘, 단청, 오방색) integrated
• Cyberpunk elements (neon glows, digital effects) applied
• SVG versions for scalable icons (optional enhancement)
• Integrated into React components across all screens
• Tested at 1920x1080, 1280x720, and mobile resolutions
• Performance: No FPS impact from UI rendering

🛠️ Implementation Guidance

Phase 1: AI UI Asset Generation (Parallel by Category)

# Generate all 30 assets in parallel (4 workers)
npx tsx scripts/generate_ui_assets.ts --category=icons --count=12 --provider=openai &
npx tsx scripts/generate_ui_assets.ts --category=buttons --count=8 --provider=openai &
npx tsx scripts/generate_ui_assets.ts --category=panels --count=6 --provider=openai &
npx tsx scripts/generate_ui_assets.ts --category=borders --count=4 --provider=openai &
wait

Phase 2: React Component Integration

Files to Modify:

• src/components/shared/ui/KoreanButton.tsx - Apply button styles
• src/components/shared/ui/KoreanPanel.tsx - Apply panel backgrounds
• src/components/shared/three/ui/PlayerHUD.tsx - Apply HUD panels
• src/types/constants/index.ts - Add UI asset paths

🔗 Parallel Execution

Can run in parallel with: All other issues (independent UI assets)

---

흑괘의 길을 걸어라 - Walk the Path of the Black Trigram