UI Audio Theme Generator
Generate cohesive sets of subtle, minimal UI sound effects using ElevenLabs text-to-sound-effects API. Create "audio themes" — coordinated sets of sounds that share a common aesthetic and map to standard UI interaction constants.
Requires ELEVENLABS_API_KEY set in the environment. See README.md for setup instructions.
Workflow
Step 1: Discover the UI Vibe
Before generating sounds, understand the application's aesthetic:
Application Context:
- What type of app? (wallet, dashboard, social, productivity)
- Primary user emotion? (trust, delight, focus, calm)
- Professional or playful interface?
Audio Direction:
- Preferred tone? (warm/organic, clean/digital, retro/nostalgic, futuristic)
- Reference sounds? (Apple-like clicks, game bleeps, banking chimes)
Step 2: Select a Vibe Preset
Available presets in assets/vibe-presets.json:
| Preset | Tone | Best For |
|---|
corporate-trust | Warm, professional | Banking, finance |
crypto-modern | Digital, clean | Wallet apps, trading |
playful-delight | Bright, friendly | Social, consumer |
minimal-focus | Ultra-subtle | Productivity, tools |
retro-digital | 8-bit inspired | Games, nostalgic |
premium-luxury | Rich, refined | High-end apps |
Step 3: Generate the Audio Theme
# Using preset vibe
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
# Using custom vibe description
python scripts/generate_theme.py \
--vibe-custom "warm organic subtle wooden interface sounds" \
--output-dir "./audio-theme"
# Generate specific categories only
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--categories buttons feedback transactions \
--output-dir "./audio-theme"
# List available presets
python scripts/generate_theme.py --list-vibes
# List all sound names
python scripts/generate_theme.py --list-sounds
Step 4: Regenerate Individual Sounds
python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
Sound Categories
Buttons
| Constant | Description |
|---|
button-click-primary | Main action buttons |
button-click-secondary | Secondary/ghost buttons |
button-click-destructive | Delete/cancel actions |
Navigation
| Constant | Description |
|---|
nav-tab-switch | Tab navigation |
nav-back | Back button/gesture |
nav-forward | Forward navigation |
nav-menu-open | Menu drawer open |
nav-menu-close | Menu dismiss |
Feedback
| Constant | Description |
|---|
notification-success | Success confirmation |
notification-error | Error alert |
notification-warning | Warning indicator |
notification-info | Information notice |
notification-badge | Badge/counter update |
States
| Constant | Description |
|---|
toggle-on | Switch enabled |
toggle-off | Switch disabled |
checkbox-check | Checkbox selected |
checkbox-uncheck | Checkbox deselected |
loading-start | Loading initiated |
loading-complete | Loading finished |
Modals
| Constant | Description |
|---|
modal-open | Modal appearance |
modal-close | Modal dismissal |
tooltip-show | Tooltip reveal |
dropdown-open | Dropdown expand |
dropdown-close | Dropdown collapse |
Transactions (Wallet-specific)
| Constant | Description |
|---|
tx-sent | Transaction sent |
tx-received | Payment received |
tx-pending | Transaction waiting |
tx-confirmed | Confirmation success |
Output Structure
audio-theme/
├── theme.json # Theme manifest
├── constants.ts # TypeScript constants
├── buttons/
│ ├── button-click-primary.mp3
│ ├── button-click-secondary.mp3
│ └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/
Script Options
--vibe NAME Preset vibe name
--vibe-custom DESC Custom vibe description
--output-dir PATH Output directory (default: ./audio-theme)
--format FORMAT mp3 or wav (default: mp3)
--categories CATS Specific categories to generate
--regenerate SOUNDS Comma-separated sounds to regenerate
--prompt-influence N 0-1, higher = stricter prompt adherence (default: 0.5)
--list-vibes Show available presets
--list-sounds Show all sound names
Resources
scripts/generate_theme.py — CLI tool for generating themes
references/sound-design-guide.md — Detailed sound design best practices
assets/vibe-presets.json — Predefined vibe configurations
assets/theme-template.json — Example output manifest
README.md — Prerequisites, design philosophy, integration examples (React hook, Howler.js), accessibility guidance